Question

我有一个像这样的行动方法

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

JQuery的

$('#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]”

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

我的问题是如何将模型转换为JQuery Grid中的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数组，以便网格可以使用它

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

2 个答案: