我有一个像这样的操作方法
[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 可理解的数据