0

私はこのようなアクションメソッドを持っています

[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]"

部分ビューを読み込んでいるときに、アクションの結果もデータを送信します。

私の質問は、モデルを JQuery Grid で JQuery の理解可能なデータに変換する方法です。

4

2 に答える 2

2

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" }
    ...
});
于 2013-10-20T12:08:42.327 に答える
1

@Model試す代わりに

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

これにより、c# モデルが適切な Json 配列に変更され、グリッドが使用できるようになります。

于 2013-10-20T12:08:33.803 に答える