jqGrid 不调用 asp.net mvc 控制器操作

Question

在我的asp.net mvc中，使用jqGrid绑定数据。代码如下。但是它在调试时没有加载数据并且没有击中控制器动作。下面的代码有什么问题。警报正在显示 url 但未触发控制器操作。帮助将不胜感激。如果您需要更多信息，请告诉我

@model Stud.Areas.Admin.Models.AdminVM

@using Stud.Common.Extension;



<h2>MD Index</h2>


<br />
<div style="margin-top: -45px">


        <div class="col-md-12">
            <div id="gridDivmsg" style="clear: both;">
                <table id="jqGrid" ></table>
                <div id="jqGridPagermsg"></div>
            </div>
        </div>



</div>

@section scripts{

<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
@*<script src="~/Scripts/MDScript.js"></script>*@


    @Html.jqGridSetup()

    <script>
        $(document).ready(function () {
                var $grid = $('#jqGrid');
            var $gridDiv = $('#gridDivmsg');

            function reloadGridmsg() {

                var urlName = '@Url.Action("GetMessagesForGrid", "MD")';

                $grid.jqGrid("setGridParam", { url: urlName, datatype: "json", page: 1 }).trigger("reloadGridmsg");
                $gridDiv.show();
                alert(urlName);
                }

            $grid.jqGrid({
                editurl: '@Url.Action("EditRowMessage")',
                datatype: 'local',
                styleUI: 'Bootstrap',
                colNames: ['Id', 'Message Key', 'Message Value', 'Message Status'],
                colModel: [
                    { name: 'Id', index: 'Id', width: 1, hidden: true, editable: true, edittype: 'text', editrules: { required: true } },
                    { name: 'MessageKey', index: 'MessageKey', width: 1, editable: true, edittype: 'text', editrules: { required: true } },
                    { name: 'MessageValue', index: 'MessageValue', width: 1, editable: true, edittype: 'textarea', editrules: { required: true } },
                    { name: 'MessageStatus', index: 'MessageStatus', width: 1, editable: true, edittype: 'select', editoptions: { value: { 'Active': 'Active', 'InActive': 'InActive' }, defaultValue: 'Active' }, editrules: { required: true } }
                ],
                responsive: true,
                loadonce: true,
                pager: $('#jqGridPagermsg'),
                height: 'auto',
                sortname: 'Id',
                rowNum: 20,
                autowidth: true,
                viewrecords: true,
                altRows: true,
                altclass: 'jqGridAltRow'
            });

            $grid.jqGrid('filterToolbar', { autosearch: true, searchOnEnter: false, defaultSearch: "cn" });
            $grid.jqGrid('navGrid', "#jqGridPagermsg", {
                edit: true,
                add: true,
                del: false,
                search: false,
                refresh: false,
                view: false,
                position: "left",
                cloneToTop: false
            },
            {
                editCaption: "Edit User",
                recreateForm: true,
                checkOnUpdate: true,
                checkOnSubmit: true,
                closeAfterEdit: true,
                errorTextFormat: function (data) {
                    return 'Error: ' + data.responseText
                },
                afterComplete: function () {
                    reloadGridmsg();
                }
            },
            {
                addCaption: "Add User",
                closeAfterAdd: true,
                recreateForm: true,
                errorTextFormat: function (data) {
                    return 'Error: ' + data.responseText
                },
                afterComplete: function () {
                    reloadGridmsg();
                }
            },
            {
                errorTextFormat: function (data) {
                    return 'Error: ' + data.responseText
                }
            });

            reloadGridmsg();

        });


    </script>

}

控制器动作方法如下。

public ActionResult GetMessagesForGrid(StudVM model)
        {
            if (!IsAuthorized(Enums.Rights.Admin))
                return View("NoAccess");

            var gridData = _activityService.GetVCRMessagesList();

            int totalRecords = gridData.Count();
            int totalPages = (int)Math.Ceiling((float)totalRecords / (float)model.rows);
            var jsonData = new
            {
                total = totalPages,
                page = model.page,
                records = totalRecords,
                rows = gridData.Select(d => new { Id = d.Id, cell = new object[] {  d.Id, d.MessageKey, d.MessageValue, d.MessageStatus } }).ToArray()
            };
            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }

直到我得到如下的空白网格

enter image description here

Answer 1

您的控制器有一个 model 类型的 StudVM 参数，该参数未在您的 javascript url 中传递。 尝试传递StudVM 类型的参数。它可能会解决您的问题。

$grid.jqGrid("setGridParam", { url: urlName,postData: { model:<your model>}, datatype: "json", page: 1 }).trigger("reloadGridmsg");

Answer 2

您需要让操作方法遵循一些方法签名，如下所示

public ActionResult GetMessagesForGrid(string sidx, string sord, int page, int rows, bool _search, string filters)
        {
            if (!IsAuthorized(Enums.Rights.Admin))
                return View("NoAccess");

            var gridData = _activityService.GetVCRMessagesList();

            int totalRecords = gridData.Count();
            int totalPages = (int)Math.Ceiling((float)totalRecords / rows);
            var jsonData = new
            {
                total = totalPages,
                page = page,
                records = totalRecords,
                rows = gridData.Select(d => new { Id = d.Id, cell = new object[] {  d.Id, d.MessageKey, d.MessageValue, d.MessageStatus } }).ToArray()
            };
            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }

我也没有看到为什么您不将网格数据类型设置为 json 并在定义网格时在请求中指定 url 而不是制作网格客户端然后重新加载它的原因

 $grid.jqGrid({
                editurl: '@Url.Action("EditRowMessage")',
                datatype: 'json',
                 url: '@Url.Action("GetMessagesForGrid", "MD")'
                styleUI: 'Bootstrap',
                colNames: ['Id', 'Message Key', 'Message Value', 'Message Status'],
                colModel: [
                    { name: 'Id', index: 'Id', width: 1, hidden: true, editable: true, edittype: 'text', editrules: { required: true } },
                    { name: 'MessageKey', index: 'MessageKey', width: 1, editable: true, edittype: 'text', editrules: { required: true } },
                    { name: 'MessageValue', index: 'MessageValue', width: 1, editable: true, edittype: 'textarea', editrules: { required: true } },
                    { name: 'MessageStatus', index: 'MessageStatus', width: 1, editable: true, edittype: 'select', editoptions: { value: { 'Active': 'Active', 'InActive': 'InActive' }, defaultValue: 'Active' }, editrules: { required: true } }
                ],
                responsive: true,
                // loadonce: true,
                pager: $('#jqGridPagermsg'),
                height: 'auto',
                sortname: 'Id',
                rowNum: 20,
                autowidth: true,
                viewrecords: true,
                altRows: true,
                altclass: 'jqGridAltRow'
            });

如果您需要知道如何使该操作方法自定义查看 This solution