long delay between serverside JSON and jqGrid loadComplete on asp.net mvc site

Question

i have an asp.net mvc site where i load a jqgrid with json data

Here is my controller action code:

    public ActionResult GridData(GridData args)
    {
        IEnumerable<Application> applications = EntityModel.GetAll().ToList();
        applications = FilterEntities(applications);
        if (args.sidx.IsNullOrEmpty() || args.sidx == "Id")
        {
            args.sidx = "Name";
            args.sord = "asc";
        }
        applications = applications.GridSort(args.sidx, args.sord);
        var paginatedData = applications.GridPaginate(args.page ?? 1, args.rows ?? 10,
                                                      i => new
                                                      {
                                                          i.Id,
                                                          Name = "<div class='showDescription' Id= '" + i.MyId + "'>" + i.Name + "</div>",
                                                          MyId = string.Format("<a                                                               i.LastUpdated,
                                                          i.LastUpdatedColumn
                                                      });

        return Json(paginatedData);
    }

and here is my javascript code:

function doInitCrudGrid(controller, names, model, editable, querystring) {
jQuery("#grid").jqGrid({
    mtype: 'POST',
    url: "/" + controller + "/GridData?" + querystring,
    datatype: "json",
    colNames: names,
    colModel: model,
    imgpath: "/Scripts/jqGrid/themes/steel/images",
    rowNum: 20,
    rowList: [10, 20, 50, 999],
    altRows: true,
    altclass: "altRow",
    jsonReader: {
        root: "Rows",
        page: "Page",
        total: "Total",
        records: "Records",
        repeatitems: false,
        id: "Id"
    },
    pager: "#pager",
    height: "auto",
    sortname: "Id",
    viewrecords: true,
    sortorder: "desc",
    loadComplete: function() {

        alert("Load Complete");
    },
    ondblClickRow: function(rowid) { }
});

i have a breakpoint on the

return Json(paginatedData);

line and that gets hit very quick but after that it takes about 10 seconds for the:

 alert("Load Complete");

and for the rendering to show up on the web page.

Is there anyway to debug this or way to see why there would be this large delay between finishing the server side json and histting the loadcomplete on the javascript callback ?

Answer 1

How much data are you returning? It could be taking a long time to serialise and deserialise. Have you considered returning a PartialView instead and replacing the contents of a div with the returned html?

Answer 2

To be sure where you have a problem, I would recommend you to measure the time on the both sides. For example in your JavaScript do following:

var startTime = new Date();
// do something
var totalTime = new Date() - startTime;

and inside your controller action

using System;

public ActionResult GridData(GridData args) {
    DateTime startTime = DateTime.Now;
    // do something
    TimeSpan totalTime = DateTime.Now - startTime;
    // save or log totalTime
    System.DateTime date4 = date3.Subtract(diff1);
    return Json(paginatedData);
}

After this you will exactly know on which side you have your main performance problems.