Ajax me!

One of my recent projects has been creating a code editor using ASP.Net MVC & Roslyn. Part of that project uses a library called ace.io. It's a really nice Javascript library that allows you to very quickly make an in-browser code editor for almost any language. 

One of the challenges I met was getting the code from the editor to the ASP.Net controller on the back end for processing. In comes jQuery Ajax. The $.ajax() function allows you to make asynchronous HTTP requests which in turn doesn't require a full page refresh. Once you have your code just send it to the controller. But let's look at the code first.
<script type="text/javascript">
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/cloud");
    editor.getSession().setMode("ace/mode/csharp");
 
    $("#btnSubmitCode").click(function () {
        var code = escape(editor.getValue());
        $.ajax({
            type: 'POST',
            url: "/Home/AnalyzeCode?Code=" + code,
            success: function (returnPayload) {
                $("#errorList").append("<li>" + returnPayload + "</li>");
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console && console.log("request failed");
            },
            dataType: "text",
            contentType: "text/plain",
        });
    });
</script>
Really there are just a few simple parameters to set:
  1. type needs to be set to "POST" because we are sending data to the controller.
  2. url probably the most important. The format of the url is /{controller}/{action/method}?{parameters}. The parameters are the overload parameters for the action/method. One thing to note is that order does not mater for the parameters being sent in the Ajax call. Just make sure you spell them right! 
  3. success & error are simply what do you want to do if the call succeeds or fails. In this case with the editor we are returning diagnostics on the code from the editor & are displaying them as list items. 
  4. dataType &  contentType  are also pretty straight forward. Just set them as seen above because we are just passing text to the controller. 
As you can see getting data from Javascript to the back end in an ASP.Net MVC app is actually quite easy. One more tool in the toolbox!
Comments are closed