jQgrid Edit command not rendering in mvc action method

Question

I am trying to create a jQGrid in my MVC 4 application but there is in JQGrid Edit Action not working. My code is below.

.cshtml

<table id="jQGridDemo">
</table>
<div id="jQGridDemoPager">
</div>
<script type="text/javascript">
jQuery("#jQGridDemo").jqGrid({
    url: '/Home/FillGrid/',
    datatype: "json",
    colNames: ['Id', 'Name', 'Description', 'Created'],
    colModel: [{ name: 'Id', Index: 'Id', width: 100, align: 'left' },
               { name: 'Name', Index: 'Name', width: 200, align: 'left', sortable: true, editable: true },
               { name: 'Description', Index: 'Description', width: 400, align: 'left', sortable: true, editable: true },
               { name: 'Created', Index: 'Created', width: 100, align: 'left' }],
    rowNum: 10,
    mtype: 'GET',
    loadonce: true,
    rowList: [10, 20, 30],
    pager: '#jQGridDemoPager',
    sortname: 'id',
    viewrecords: true,
    sortorder: 'desc',
    caption: "List Employee Details",
    editurl: '@Url.Action("Update", "Home")',        
    deleteurl: '@Url.Action("Delete", "Home")', 
});

$('#jQGridDemo').jqGrid('navGrid', '#jQGridDemoPager',
           {
               edit: true,
               add: true,
               del: true,
               search: true,
               searchtext: "Search",
               addtext: "Add",
               edittext: "Edit",
               deltext: "Delete"
           },
           {//EDIT
               url: '@Url.Action("Update", "Home")',
               width: 400,
           },
           {
               width: 400,
               //color: Red
           },
           {//DELETE
               url: '@Url.Action("Delete", "Home")',
           },
           {//SEARCH
               closeOnEscape: true
           }
    );

  </script>

Action

    public ActionResult FillGrid(string sidx, string sord, int page, int rows)
    {
        List<Master> models = new List<Master>();

        int pageIndex = Convert.ToInt32(page) - 1;
        int pagesize = rows;
        int totalrecords = 0;
        int totalpages = 0;

        using (var db = new jQGridDemoEntities())
        {
            totalrecords = db.Masters.Count();
            totalpages = (int)Math.Ceiling((float)totalrecords / (float)pagesize);

            models = db.Masters.OrderBy(x => x.Id).Skip(pageIndex * pagesize).Take(pagesize).ToList();
        }

        var jsondata = new
        {
            total = totalpages,
            page,
            records = totalrecords,
            rows = (
            from master in models
            select new
            {
                i = master.Id,
                cell = new string[] { master.Id.ToString(), master.Name.ToString(), master.Description.ToString(), master.Created.ToString() }
            }).ToArray()
        };

        return Json(jsondata, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public ActionResult Update(string Name, string Description)
    {
        int ret = 2;
        return Json(ret);
    }

    [HttpPost]
    public ActionResult Delete(int Id)
    {
        int ret = 2;
        return Json(ret);
    }

I already specify the editurl and deleteurl in the jQgrid initilize section.

For example I need to update Name and Description field in the Edit popup.

The Update action is fired in the Edit popup but the inside of the submit action not working.

There is any configuration needed to bind fields.

Answer 1

You current code contains some errors. The first one in the lines

from master in models
select new
{
    i = master.Id,
    cell = new string[] { master.Id.ToString(), ... }
}

You assign i property (see i = master.Id) instead of usage id name (id = master.Id). The name of id used in the input data can be changed assigning id property of jsonReader option (see documentation). Default value is id: "id". To use i instead of id one could use jsonReader: { id: "i" } option.

One more good way to specify id used for rows: usage of key: true property for definition of "Id" column. By the way if you want to display id of the row to the user and you use key: true property then you don't need to send master.Id twice (once as id = master.Id and one more time as cell = new string[] { master.Id.ToString(), ... }). Instead of that you can use something like

return Json((
    from master in models
    select new [] {
        master.Id.ToString(),
        master.Name,
        master.Description,
        master.Created.ToString()
    }
).ToArray(), JsonRequestBehavior.AllowGet);

In the case the data returned from FillGrid will be array or items directly. You don't need set total, page and records properties inside of returned data because you use loadonce: true and all the properties will be just ignored by jqGrid.

In the same way prmNames option can be used to rename the default id name use for Add/Edit and Delete operation to another name.

The next problem. You use sortname: 'id', but there are only column with name: 'Id'. So you should change sortname: 'id' to sortname: 'Id'. The delete action uses int Id. So you can use prmNames: { id: "Id" } option or to rename int Id to int id. The option will be used in Add/Edit cation too. So you should add int Id to int id to Update action depend on whether you use prmNames: { id: "Id" } option or not.