Asp.Net MVC JavaScriptView

For a while now I’ve wanted the ability to generate javascript file like I generate html files. Take a little bit of the power of the WebForm view engine (just a little bit) and give that to me for JavaScript.

Why? I have a few reasons. Number one is I want to remove all of my JavaScript from the html, so the JavaScript is loaded via script tags. Once that happens, then I can have the JavaScript cached by the browser and speed up my application a bit. What I need the Asp.Net engine for was to give me accurate links to web site resources (images, web services, call, other javascript files, etc). These are thing that I don’t want to hard wire, mostly because I’ve bitten off the Asp.Net Routing engine bug. So, I want to use the Asp.Net Routing engine to tell me where to find stuff.

Not that I’ve committed to Asp.Net MVC I’ve come to a realization that making dynamic javascript files is well within my reach. Actually, it is almost there already; Asp.Net MVC ships with a JavaScriptResult. The downside of that result action is that the object expects you to hand it the JavaScript as a string, which it pushes to the browser as a file. I want to give a method a JavaScript View for that. The other good news about JavaScriptResult is that it doesn’t do much (just set the response.ContentType to application/x-javascript). So I could grab all of the View methods, turn them into extension methods, rename them, and then use them for my own underhanded affairs.

Luckily we can all grab the Asp.Net MVC source code and go to town. I didn’t modify the original source, but I defined a new class (JavaScriptFileResult) and a bunch of extension methods for the Asp.Net MVC Controller to give you JavaScriptView methods. You can see a usage in the first piece of code.

public ActionResult JsConstants( )
{
    return this.JavaScriptView();
}

Now below is the actually extension methods and class needed. Put this in your project some place and go to down.

public class JavaScriptFileResult: ViewResult
{
    public override void ExecuteResult(ControllerContext context)
    {
        base.ExecuteResult(context);
        HttpResponseBase response = context.HttpContext.Response;
        response.ContentType = "application/x-javascript";
    }
}
  
public static class JavaScriptControllerExtensions
{
    public static ViewResult JavaScriptView(this Controller controller )
    {
        return JavaScriptView(controller, null /* viewName */, null /* masterName */, null /* model */);
    }
  
    public static ViewResult JavaScriptView(this Controller controller, object model)
    {
        return JavaScriptView(controller, null /* viewName */, null /* masterName */, model);
    }
  
    public static ViewResult JavaScriptView(this Controller controller, string viewName)
    {
        return JavaScriptView(controller, viewName, null /* masterName */, null /* model */);
    }
  
    public static ViewResult JavaScriptView(this Controller controller, string viewName, string masterName)
    {
        return JavaScriptView(controller, viewName, masterName, null /* model */);
    }
  
    public static ViewResult JavaScriptView(this Controller controller, string viewName, object model)
    {
        return JavaScriptView(controller, viewName, null /* masterName */, model);
    }
  
    public static ViewResult JavaScriptView(this Controller controller, string viewName, string masterName, object model)
    {
        if( model != null )
        {
            controller.ViewData.Model = model;
        }
  
        return new JavaScriptFileResult
        {
            ViewName = viewName,
            MasterName = masterName,
            ViewData = controller.ViewData,
            TempData = controller.TempData
        };
    }
  
    public static ViewResult JavaScriptView(this Controller controller, IView view)
    {
        return JavaScriptView(controller, view, null /* model */);
    }
  
    public static ViewResult JavaScriptView(this Controller controller, IView view, object model)
    {
        if( model != null )
        {
            controller.ViewData.Model = model;
        }
  
        return new JavaScriptFileResult
        {
            View = view,
            ViewData = controller.ViewData,
            TempData = controller.TempData
        };
    }

Now the view, here is what it looks like:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
var UrlList = {
    SubscriptionList: '<%=Url.Action("SubscriptionList", "Channel") %>',
    MoreSubscriptions: '<%=Url.Action("More", "Channel") %>',
    WaitGif: '<%=Url.Content("~/Content/img/ajaxloader.gif") %>',
};

Like I stated before, I was looking to get uris for the most part. But this could also be a strongly typed view where you have to pass in real data.

Finally, loading this view into my page. You saw the controller action was “JsConstants” above, which was in my HomeController (not shown), so here is how I ask the routing engine for the JavaScript file.

   1: <script type="text/javascript" src="<%=Url.Content("~/Home/JsConstants") %>"></script>

So far I am happy with this technique. But if you see something that can be improved, please let me know.

15 thoughts on “Asp.Net MVC JavaScriptView”

Kelps says:

November 8, 2009 at 9:16 AM

Really nice work. Congrats.
I think you could make one more improvement. You could create Html helper methods to write that script tag for you. This would also make it possible to write strongly type calls to your actions using lambda expressions.

Anyway, nice work. I’ll use it for sure.

Best regards,
Kelps
Jeffrey Palermo says:

November 8, 2009 at 11:51 PM

Great idea. Would you mind contributing that to mvccontrib?
Garry Pilkington says:

November 9, 2009 at 3:05 AM

Excellent. I am in need of this functionality on a current project.
Pingback: Reflective Perspective - Chris Alcock » The Morning Brew #474
Eduardo Gonzalez says:

November 11, 2009 at 12:55 AM

You know, it would be very interesting to use technique to minify an entire directory of JavaScript files.
Chris Brandsma says:

November 11, 2009 at 9:36 AM

Trust me, that thought has crossed my mind as well.
Chris Brandsma says:

November 11, 2009 at 9:38 AM

@Jeffery Palermo: I know you are probably getting ready for PDC and your party, but I would be happy to contribute this code to MVCContrib. Plus that would give me an excuse to check out GIT.
Andrew Gunn says:

November 12, 2009 at 3:45 AM

Cracking idea! Well done.
Pingback: Servefault.com
Pingback: Elegant Code » Authenticated web services calls with Asp.Net MVC
Ajay says:

January 3, 2010 at 10:24 AM

So is this a part of MVCContrib now? or not yet?

Great Idea.

Regards,
Ajay
Chris Brandsma says:

January 3, 2010 at 1:25 PM

I will say I attempted to submit this to MVCContrib (did that back in November actually). But GIT is still a bit of a mystery to me, so I’m not sure if it is there or not.
Roman Rozinov says:

October 14, 2011 at 11:48 PM

This is a great idea.
I did not see that it was part of MVCContrib. If you still out of time, perhaps I can assist. I think this is a vastly helpful.
Parzych K says:

October 27, 2011 at 11:26 AM

Great,
I used this for localize javascript messages
Joomla Development says:

November 2, 2011 at 7:52 AM

Thanks for the code here. Great update!

Comments are closed.