Partial Views and CSS/Javascript

Question

I'm trying to determine the best way to structure my application so that I don't get a lot of javascript splattered all over the place.

I have an ASP.NET MVC application with a view which loads a sllooooowwwww partial view using Michael Kennedy's approach to Improve perceived performance of ASP.NET MVC websites with asynchronous partial views. The partial view itself is rendering a DataTables grid (which has its own CSS/JS files), as well as Javascript-based configuration for the grid itself (column formatting, sorting defaults, editor configuration, etc).

My question is what is a clean way to structure and maintain all this? I have at least 3 varieties of scripts (CSS and/or JS) involved here:

1. The JS on the main view which loads the partial view.
2. The CSS/JSfiles for DataTables
3. The JS inside the partial view which runs on $(document).ready() and configures that particular grid.

I can control (on the main view) where the CSS/JS are rendered using Razor's @section for scripts/styles (Item #1 above). However, a partial view can't take advantage of the @section functionality, so any CSS/JS in a partial view gets injected into the middle of the page. That doesn't really set well with me, because then the rendered HTML looks all nasty with CSS/JS showing up in the middle of the main view. I know things like Cassette can help with Item #2 when the CSS/JS are all stored in external files.

But what about Item #3 where I have CSS/JS which is very specific to that partial view? It may be things as small as attaching click event handlers for the view or configuring JQuery plugins, but does that mean I should separate that out into another JS file? I don't like separating these things if I don't need to, especially the grid configuration for each partial view.

In my case, I have an application with several views containing these partial views which render grids, and none of the grids contain the same set of columns - so the JS configuration for each grid is different which runs on $(document).ready().

Answer 1

I would consider not using partial views at all, for the reasons that you mentioned. Instead of loading partial views with ajax, load json data from controller. Use JavaScript template like handlebars.js to get the razor effect on the client side. Much cleaner. Smaller http payload.

Answer 2

I had a similar situation using JQGrid. I ended up with JavaScript up the wazoo on any view that used the grid. My solution was to put any of the heavy-lifting javascript into external files, and namespace them like this:

var JqGridHelper = JqGridHelper || {};
JqGridHelper.SetupGrid = function (gridTable, pager, gridJson, colNameJson, colModelJson, label, rowNum, gridCompleteFunc, columnChooser) {
    gridTable.jqGrid({
        datatype: "local",
        data: gridJson,
        colNames: colNameJson,
        colModel: colModelJson,
        rowNum: rowNum,
        autowidth: true,
        height: '100%',
        pager: pager,
        sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        caption: label,
        gridComplete: gridCompleteFunc
    });

    gridTable.jqGrid('navGrid', pager, { edit: false, add: false, del: false });
    if (columnChooser == true) {
        JqGridHelper.AddColumnChooser(gridTable, pager, function() {

        });
    }

};

Try to abstract as much of the reusable DataTable binding and initialization code, then just call your abstracted methods from the JavaScript on the partial views.

If you go the way of external javascript files, be sure that you're loading them at the appropriate time, rather than loading them all on the initial page-load.