I tweeted Phil Haack a while ago asking for a new feature in Asp.Net MVC 3. That feature was JavaScript views. What the heck is a JavaScript View? Well first, let’s define what the problem is and then you will see how JavaScript views can be very helpful. Let’s look at how we make an ajax request in JQuery


$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

Do you see a problem? You might not, because this is a valid statement. The problem is with the url property. It is hard coded to be “test.html” which might be ok for simple applications, but this can be problematic as your application gets larger.

Asp.Net 4 (or 3.5) to the Rescue

If you’ve been keeping up with Asp.Net then you know there is something new called routing. It allows you to define friendly urls. It is integral to Asp.Net MVC. From this point on, I will assume you know about Asp.Net MVC and routing. I have a complex site that has actions, several of which are purely for Ajax. The issue is that my routing scheme is still very experimental and I am still deciding on how to get the prettiest urls I can. What is very solid is the functionality each of these actions perform. So what is the challenge.

How do I dynamically inject urls into JavaScript by utilizing the Routes I have already defined?

Luckily the solution is very straightforward and easy to implement. Let’s look at how your JavaScript file might look like.

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

$(document).ready(function() {
  $(".button").click(function() {
        $.ajax({
            type: "POST",
            url: "<%= Url.Action("Ajax","Home") %>",
            success: function(response){
            $(".result").html(response.message);
            }
        });
  });
});

Sweet right! Well it isn’t that easy. You have to set somethings up in your MVC project before this works.

Step 1 – Create a Controller

Create a controller specifically for handling dynamic JavaScript views.


public class JsController : Controller    {

public ViewResult Index(string file)        {

return View(file);

}

}

Step 1 is complete. We need a controller so that a RequestContext is passed to our JavaScriptView, without this our views will bomb. Let’s move on to Step 2.

Step 2 – Specify the Route


routes.MapRoute(

"JavascriptViews",

"js/{file}.js",

new { controller = "Js", action = "Index", file = UrlParameter.Optional });

We need this route, so that MVC handles requests and points them to our controller.

Step 3 – Create Your JavaScript View and Link it

 

Add a new view under a “Js” folder under the “Views” folder. That’s it! All you need now. You can start utilizing the tools inside of Asp.Net MVC to start generating routes. Technically, you could do a lot more than just generate routes, but I wouldn’t go crazy with using C# to generate your JavaScript files.


<script src="js/master.js" type="text/javascript"> </script>

Conclusion

This is a great way to manage the Urls in your JavaScript files without the concern of worrying about modifying all your JavaScript files just because you want a different route. Download my sample and see if you like it or you think I’ve gone completely insane.

JavascriptViewExample