lundi 17 août 2015

jqgrid not displaying, mvc 3

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?

Aucun commentaire:

Enregistrer un commentaire