如何在 JQuery 网格中将模型转换为 JQuery 可理解的数据

Question

我有这样的操作方法

[HttpPost]
public PartialViewResult ActionMethod(String EmailAddress)
{
    Model obj = new Model
    {
        EmailAddress = EmailAddress
    };
    return PartialView(obj.Function());
}

杰奎里

$('#ReportsMain').load('/reports/ActionMethod', { EmailAddress: $('#txtEmailAddress').val() }, function (result) {
    debugger;
});

.HTML

<div id="ReportsMain">
</div>

部分视图

@model List<Reports.Models.clsverified>
<link href="/Content/themes/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<link href="/Content/themes/ui.jqgrid.css" rel="stylesheet" />
<script src="/Scripts/jqGrid/grid.locale-en.js"></script>
<script src="/Scripts/jqGrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#Reports").empty();
        var grid = $("#Reports");
        grid.jqGrid({
            datatype: 'local',
            data: "@Model",
            colNames: ['Title', 'Item Price', 'Qty', 'Total Amount', 'Your Commission', 'Time Stamp', 'Time Plus', 'Paid'],
            colModel: [
                {
                    name: 'Title', index: 'Title', width: 80, align: 'center'
                },
                { name: 'Price', index: 'Price', width: 70, formatter: 'number', sorttype: 'number', resizable: true, align: 'center' },
                { name: 'Qty', index: 'Qty', width: 75, formatter: 'number', sorttype: 'number', resizable: true, align: 'center' },
                { name: 'TotalPrice', index: 'TotalPrice', width: 85, formatter: 'number', sorttype: 'number', resizable: true, align: 'center' },
                { name: 'Commission', index: 'Commission', width: 90, formatter: 'number', sorttype: 'number', resizable: true, align: 'center' },
                {
                    name: 'TimeStamp', index: 'TimeStamp', width: 75, align: 'center', sorttype: 'date',
                    formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y'
                },
                {
                    name: 'TimePlus', index: 'TimePlus', width: 100, align: 'center', sorttype: 'date',
                    formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y'
                },
                { name: 'Paid', index: 'Paid', width: 70 }
            ],
            rowNum: 10,
            rowList: [5, 10, 15, 20],
            pager: '#pager',
            gridview: true,
            rownumbers: true,
            sortname: 'Title',
            viewrecords: true,
            sortorder: 'desc',
            caption: 'Verified Items',
            height: '100%',
            width: '100%',
            footerrow: true,
            loadComplete: function () {
                var Price = grid.jqGrid('getCol', 'Price', false, 'sum');
                var Qty = grid.jqGrid('getCol', 'Qty', false, 'sum');
                var TotalPrice = grid.jqGrid('getCol', 'TotalPrice', false, 'sum');
                var Commission = grid.jqGrid('getCol', 'Commission', false, 'sum');
                grid.jqGrid('footerData', 'set', { Title: 'Total:', Price: Price, Qty: Qty, TotalPrice: TotalPrice, Commission: Commission });
                $('#loadingprogress').html("");
            }
        });
        grid.jqGrid.navGrid("#pager", {
            edit: false,
            add: false,
            del: false
        });
    });

</script>
<table id="Reports">
    <tr>
        <td />
    </tr>
</table>
<div id="pager"></div>

现在，如果您在分部视图中注意，我们有代码行

data: "@Model",

在Firebug中，结果是这样的

"System.Collections.Generic.List'1[Reports.Models.clsverified]"

当我加载部分视图时，操作结果也会发送数据。

我的问题是如何在 JQuery 网格中将模型转换为 JQuery 可理解的数据

Answer 1

将其作为 JSON 发送：

data: JSON.stringify(@Html.Raw(Json.Encode(Model)))

当然，不要忘记设置正确的内容类型请求标头，以向服务器指示您正在发送 JSON：

ajaxGridOptions: { contentType: "application/json" }

所以总结一下：

grid.jqGrid({
    ...
    data: JSON.stringify(@Html.Raw(Json.Encode(Model))),
    ajaxGridOptions: { contentType: "application/json" }
    ...
});

Answer 2

而不是@Model尝试

@Html.Raw(Json.Encode(Model)) 

这会将 C# 模型更改为正确的 Json 数组，以便网格可以使用它