JQgrid is not loading data when i redirect from one page to another in asp.net mvc4 - asp.net-mvc-4

Question

i have an issue with my jqgrid in asp.net mvc4. i am creating user form, in this i will be adding data to user details, and when i click submit, it will be added to the database, and based on its result it will redirect to the respective page.
If adding is success, then it will be redirected to userlist page, where i have my JQgrid,the problem is, i can see the grid, but no data is there in the grid. What would be my issue.
My controller code to add a new user looks like this:
public ActionResult CreateNewUser(Tbl_Users tbl_users)
{
int userId = 1;
tbl_users.CreatedBy = userId;
tbl_users.CreatedOn = DateTime.Now;
tbl_users.ModifiedBy = null;
tbl_users.ModifiedOn = null;
if (ModelState.IsValid)
{
db.Tbl_Users.Add(tbl_users);
db.SaveChanges();
return RedirectToAction("**ListUsers**", "**Admin**");
}
ViewBag.UserCity = new SelectList(db.Tbl_Mst_City, "CityId", "CityName", tbl_users.UserCity);
ViewBag.UserDesignation = new SelectList(db.Tbl_Mst_Designation, "DesignationID", "Designation", tbl_users.UserDesignation);
ViewBag.RoleId = new SelectList(db.Tbl_Roles, "RoleID", "Role", tbl_users.RoleId);
ViewBag.CreatedBy = new SelectList(db.Tbl_Users, "UserID", "UserName", tbl_users.CreatedBy);
return View(tbl_users);
}
And My controller action to load my grid is
public ActionResult ListUsers()
{
return View();
}
public JsonResult GetUSerDetails(string sidx = "UserID", string sord = "asc", int page = 1, int rows = 5)
{
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = db.Tbl_Users.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var userdata = db.Tbl_Users.OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize)
.Select(u =>
new
{
u.UserID,
u.UserName,
u.UserEmail,
u.UserMobile,
u.UserCity,
u.UserDesignation,
u.RoleId,
u.CreatedBy,
u.CreatedOn
}).ToList();
var jsonData = new
{
total = totalPages,
page,
records = totalRecords,
rows = (
from u in userdata.AsEnumerable()
select new
{
i = u.UserID,
cell = new string[] { u.UserID.ToString(), u.UserName, u.UserEmail, u.UserMobile, u.UserCity.ToString(), u.UserDesignation.ToString(), u.RoleId.ToString(), u.CreatedBy.ToString(), u.CreatedOn.ToString() }
}).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
My View Page For the List User and JQgrid is looks like this:
#model FSLIWeb.Models.Tbl_Tasks
#{
ViewBag.Title = "ListUsers";
Layout = "~/Views/Shared/AdminDashboardLayout.cshtml";
}
#Html.ActionLink(" User List", "Index")
<h2>Index</h2>
<table id="jQGridDemo" width:"1024px">
</table>
<div id="jQGridDemoPager" style="width:100%">
</div>
<script type="text/javascript">
jQuery("#jQGridDemo").jqGrid({
url: 'Admin/GetUserDetails',
datatype: "json",
colNames: ['UserID','UserName','UserEmail','Contact Num','City','UserDesignation','RoleId','CreatedBy','CreatedOn'],
colModel: [
{ name: 'UserID', index: 'UserID', width: 75, align: 'center', sortable: true, editable: false, key: true, editrules: { required: true} },
{ name: 'UserName', index: 'UserName', width: 120, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} },
{ name: 'UserEmail', index: 'UserEmail', width: 100, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} },
{ name: 'UserMobile', index: 'UserMobile', width: 100, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} },
{ name: 'City', index: 'City', width: 100, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} },
{ name: 'UserDesignation', index: 'UserDesignation', width: 85, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} },
{ name: 'RoleId', index: 'RoleId', width: 70, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} },
{ name: 'CreatedBy', index: 'CreatedBy', width: 70, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} },
{ name: 'CreatedOn', index: 'CreatedOn', width: 70, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} }
],
mtype: 'GET',
loadonce: true,
rowList: [5, 10, 20, 30],
pager: '#jQGridDemoPager',
sortname: 'UserID',
viewrecords: true,
sortorder: 'desc',
width:"100%",
caption: "List Of Users",
//editurl: "//EditUser/"
});
jQuery("#jQGridDemo").jqGrid('navGrid', '#jQGridDemoPager',
{ edit: true, add: true, del: true, search: true },
{ url: "/Admin/EditUser/", closeAfterEdit: true, beforeShowForm: function (formid) { $("#UserID", formid).hide(); } },
{ url: "/Admin/AddNewUser/", closeAfterAdd: true, beforeShowForm: function (formid) { $("#UserID", formid).hide(); } },
{ url: "/Admin/DeleteUser/" }, {});
$("#search").filterGrid("#grid", {
gridModel: false,
filterModel: [{
label: 'Search',
name: 'search',
stype: 'text'
}]
});
</script>
Your Valuable Suggestion will help me to get solved this problem.
Thanks in Advance

Answer 1

The data URL in the jqGrid definition should be like this:
jQuery("#jQGridDemo").jqGrid({
url: '/Admin/GetUserDetails',
...
});