JQgrid is not working in MVC4 and EntityFramework

Question

Hi I started working on JQGrid, I followed the post which I got from an internet blog Jqgrid with MVC My Code Looks like this:

    @{
        ViewBag.Title = "Home Page";
    }

    <h2>@ViewBag.Message</h2>

       <ol class="round">
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#list").jqGrid({
            url: '/Home/DynamicGridData',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['UserId', 'FirstName', 'LastName', 'CreatedBy', 'Designation', 'City'],
            colModel: [
      { name: 'UserId', index: 'UserId', width: 40, align: 'left' },
      { name: 'FirstName', index: 'FirstName', width: 40, align: 'left' },
      { name: 'LastName', index: 'LastName', width: 400, align: 'left' },
      { name: 'CreatedBy', index: 'CreatedBy', width: 400, align: 'left' },
      { name: 'Designation', index: 'Designation', width: 400, align: 'left' },
      { name: 'City', index: 'City', width: 400, aligh: 'left' }],


            pager: jQuery('#pager'),
            rowNum: 2,
            rowList: [5, 10, 20, 50],
            sortname: 'Id',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '/content/images',
            caption: 'My first grid'
        });
    });
    </script>  

 <%-- HTML Required--%>
    <h2>My Grid Data</h2>
    <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
    <div id="pager" class="scroll" style="text-align:center;"></div>

</ol>

}

And my Controller looks like this:

    using System;
    using System.Collections.Generic;
    using System.Data.Linq;
    using System.Web;
    using System.Web.Mvc;
    using System.Linq.Expressions;
    using UserInfoGrid.Models;
    using System.Linq;
    using System.Linq.Dynamic;

    namespace UserInfoGrid.Controllers
    {
        public class HomeController : Controller
        {
            UserInfoEntities db = new UserInfoEntities();
            public ActionResult Index()
            {
                ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

                return View();
            }

            public ActionResult About()
            {
                ViewBag.Message = "Your app description page.";

                return View();
            }

            public ActionResult Contact()
            {
                ViewBag.Message = "Your contact page.";

                return View();
            }

            public JsonResult DynamicGridData(string sidx, string sord, int page, int rows)
            {

                int pageIndex = Convert.ToInt32(page) - 1;
                int pageSize = rows;
                int totalRecords = db.Users.Count();
                int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

                // var userInfo = db.User(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize);
                //var userInfo = db.Users.OrderBy((sidx+""+sord).Skip(pageIndex * pageSize).Take(pageSize)).ToList();
                var userInfo = db.Users.OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize);
                var jsonData = new
                {
                    total = totalPages,
                    page,
                    records = totalRecords,
                    rows = (
                        from u in userInfo
                        select new
                        {
                            i = u.UserId,
                            cell = new string[] { u.UserId.ToString(), u.FirstName, u.LastName, u.CreatedBy.ToString(), u.Designation, u.City.ToString() }
                            //cell = new string[] { "", "", "", "" }
                        }).ToArray()
                };
                return Json(jsonData);
            }
        }
    }
 }

The problem is, nothing is displaying in Index page. I am tired of trying, please help me. If you find any flaws in my code.

Thanks in advance

Answer 1

Please try is as below.

[HttpPost]
public JsonResult DynamicGridData(string sidx, string sord, int page, int rows)
        {

           //your code here            

            return Json(jsonData,JsonRequestBehavior.AllowGet);
        }

Answer 2

Change this url: '/Home/DynamicGridData' to this url: '@Url.Action("DynamicGridData")'