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!

I don't need a Solution!!

So the last thing you want to do is create a complete Solution in Visual Studio just to type out a few lines of code. Thanks to the Visual Studio 2015 Update 1 you don't need to create a solution. Just so we are clear this isn't knocking other tools like LINQPad. LINQPad is a great tool so this is just another tool to put in your toolbox. 

Welcome the C# Interactive Window in Visual Studio 2015!


Ok so this doesn't look like much but this window, introduced in the latest update for Visual Studio 2015, lets us use the Roslyn REPL features for C# . REPL stands for "Read Eval Print Loop". Basically it reads your code, evaluates it and you guessed it...prints feedback. You can even integrate the REPL features into your own app using the Roslyn APIs. The nice thing with the C# interactive window is that it provides Intellisense. The window allows you to type in expressions, statements and methods just like a normal .cs file.


All this makes it very easy to quickly test a theory out and get some feedback. No the below foreach loop is not a mystery to me...just an example.


Now the above code snippet is very simple and you may be asking what about third party APIs. Well we are in luck. using the "#r" directive we can import other DLLs. We can even load in script files using the "#load" directive. 

Again this is another tool in your toolbox. If your looking for a full featured tool besides Visual Studio, I would definitely check out LINQPad.  The C# Interactive Window reference is here . Hope this helps you and happy coding!