I am using asp.net MVC 3 , and my table is not displayed. Then I had built another project, but in MVC 4. Everything worked fine.
My Controller code:
public JsonResult GetTodoLists(string sidx, string sord, int page, int rows, Billboard billboard) //Gets the todo Lists.
{
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
var todoListsResults = db.billboard.Select(
a => new
{
a.BillboardID,
a.Event_date,
a.Event_name,
});
int totalRecords = todoListsResults.Count();
var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
if (sord.ToUpper() == "DESC")
{
todoListsResults = todoListsResults.OrderByDescending(s => s.Event_name);
todoListsResults = todoListsResults.Skip(pageIndex * pageSize).Take(pageSize);
}
else
{
todoListsResults = todoListsResults.OrderBy(s => s.Event_name);
todoListsResults = todoListsResults.Skip(pageIndex * pageSize).Take(pageSize);
}
var jsonData = new
{
total = totalPages,
page,
records = totalRecords,
rows = todoListsResults
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
My View code:
<h2>Todo List</h2>
<div>
<table id="grid"></table>
<div id="pager"></div>
</div>
<head>
<title>jqGrid</title>
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-ru.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/Billboard.js"></script>
</head>
And my js code:
jQuery(document).ready(function () {
$("#grid").jqGrid({
url: "/Home/GetTodoLists",
datatype: 'json',
mtype: 'Get',
colNames: ['BillboardID', 'Event_date', 'Event_name', ],
colModel: [
{ key: true, hidden: true, name: 'BillboardID', index: 'BillboardID', editable: true },
{ key: false, name: 'Event_date', index: 'Event_date', width: 80, editable: true, },
{ key: false, name: 'Event_name', index: 'Event_name', editable: true, editrules: true },
],
pager: jQuery('#pager'),
rowNum: 5,
rowList: [5, 10, 15],
height: '20%',
viewrecords: true,
caption: 'Афиша',
emptyrecords: 'No records to display',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
autowidth: true,
multiselect: false,
}).navGrid('#pager', { edit: false, add: true, del: true, search: true, refresh: true },
{
// edit options
zIndex: 100,
url: '/Home/Edit',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
},
{
// add options
zIndex: 100,
url: "/Home/Create",
closeOnEscape: true,
closeAfterAdd: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
},
{
// delete options
zIndex: 100,
url: "/Home/Delete",
closeOnEscape: true,
closeAfterDelete: true,
recreateForm: true,
msg: "Are you sure you want to delete this task?",
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
});
});
What is the problem ? Where am I wrong?
Problem was solved. Change this:
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-ru.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/Billboard.js"></script>
on:
<link href="@Url.Content("~/Content/jquery.jqGrid/ui.jqgrid.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")"></script>
<script src="@Url.Content("~/Scripts/i18n/grid.locale-en.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")"></script>
<script src="@Url.Content("~/Scripts/Billboard.js")"></script>