Question

I’m trying to figure out what the best practice is for using jQuery in an MVC app. Specifically, I would like to know what I should do so that I don’t clutter all my views with individual document.ready statements.

As an example:

I have the following Views:

/Views/Shared/_Layout.cshtml
/Views/Home/Index.cshtml
/Views/Home/_Dialog.cshtml
/Views/Home/_AnotherDialog.cshtml

I have a controller action that will render the Home/Index View, which uses the Layout and renders two partial views (or editor templates, display templates, etc.). This one controller action has rendered 4 or more views. Each view is using some jquery document.ready code.

Currently, I have the code at the bottom of each view:

// In Index
<script type="text/javascript">
    $(function() {
        $('#tabs').tabs()
    });
</script>

// In _Dialog
<script type="text/javascript">
    $(function() {
        $('#some-dialog').dialog( ... );
    });
</script>

I know this isn’t a very good practice because it is already getting unmanageable in my small project. What are some good practices to follow when I have tons of pages that all need some jQuery / javascript initialization code separated across dozens of views?

Answer 1

You could do something along the lines of what Telerik do with their javascript registrar. Basically, make this registrar available in your view model. At the simplest level, all it has to do is keep track of strings added to it:

public class JavascriptRegistrar
{
    private StringBuilder jsBuilder_ = new StringBuilder();

    public Add(string js)
    {
        builder.Append(js).Append('\n');
    }


    public string ToString()
    {
        return "<script type=\"text/javascript\">" + jsBuilder_.ToString() + "\n</script>";
    }
 }

Your partial views will then add to this when rendering:

<h1>In my view!</h1>

@Model.Registrar.Add("$function() { /* ... */ }")

Finally, at the bottom of your main view, when you’re done:

@Model.Registrar.ToString()

Which will write out all the javascript it has collected during rendering.