在 ASP.Net MVC 3 中使用 jQgrid 发布表单

Question

我尝试将我的搜索表单发布到控制器并将 json 结果加载到 jQGrid。但我的控制器总是为空。

public class SearchViewModel
{
public string Name{get;set;}
public string Location{get;set;}
public string EmployeeId{get;set;}
}

@model UI.ViewModel.SearchViewModel

<div id="search-panel">
    @{Html.EnableClientValidation();}
    @using (Html.BeginForm("Search", "Home", 
                 FormMethod.Post, new { id = "search-form" }))
    {
        @Html.AntiForgeryToken()
        <div class="formfield-container">
            <label>
                <span class="column">Name:</span>
                @Html.TextBoxFor(m => m.Name)
            </label>
        </div>
        <div class="formfield-container">
            <label>
                <span class="column">Emp Id:</span>
                @Html.TextBoxFor(m => m.EmployeeId)
            </label>
        </div>
        <div class="formfield-container">
            <label>
                <span class="column">Location:</span>
               @Html.TextBoxFor(m => m.Location)
            </label>
        </div>
 }

这是我的 jQGrid 代码

jQuery("#list").jqGrid({
    //start
    url: 'Home/Search',
    datatype: "json",
    postData: {
        viewModel: function () { return $("#search-form").serialize(); }
    },
    mtype: "POST",
   //etc.. other config goes
 });

这是我的控制器代码

 [HttpPost]
 public JsonResult Search(SearchViewModel viewModel)
 {
  //viewModel parameter is always null
  var searchResult=//getting records from DB and preparing structure for jQGrid
  //Request["PostData"] gives json array sting of my form field and its value
  Json(searchResult);

 }

我也试过关注这篇文章。 jQgrid posting custom data on load。但 SearchViewModel 对象为空。

但我可以在 Requst["PostData"] 值中看到它作为我的 JSON 字符串 表单字段名称及其值。这意味着我的表单已成功发布到服务器，数据为 JSON 字符串。 我怎样才能直接得到那些 JSON 指向强类型模型的字符串。

但我可以看到 Request.Params["viewModel"] 包含表单元素详细信息

任何人都可以帮助将我的表单发布为视图模型？或者我需要 编写我自己的自定义模型绑定器？

Answer 1

我们正在使用一个小函数将表单序列化为一个对象：

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

然后在jQgrid中：

jQuery("#list").jqGrid({
    ...
    beforeRequest: GridOnBeforeRequest,
    ...
});

function GridOnBeforeRequest()
{
    var data = $("#search-form").serializeObject();
    $("#list").jqGrid('setGridParam', { postData: data });
}

然后刷新网格：

$("#list").trigger('reloadGrid');