带有表单发布的 Asp.Net MVC 数据表

Question

我正在开发一个 ASP.NET MVC 项目，并且我正在尝试使用 DataTables 。我在 Html.BeginForm() 操作期间捕获表单发布，并试图在 DataTables AJAX 发布操作期间绑定我的 ViewModel。问题是我的 ViewModel 总是空的。你能找出我做错了什么吗？谢谢！

代码： MVC 视图

@using (Html.BeginForm("SearchContractors", "Search", FormMethod.Post, new { @id = "contractor-search-form" }))
                {
                    @Html.AntiForgeryToken()

                    <div class="form-horizontal">
                        <div class="form-group">
                            @Html.LabelFor(model => model.contractorName, htmlAttributes: new { @class = "control-label col-md-4" })
                            <div class="col-md-8">
                                @Html.EditorFor(model => model.contractorName, new { htmlAttributes = new { @class = "form-control", @autofocus = "autofocus" } })
                                <p>OR</p>
                            </div>
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(x => Model.selectedCounty, htmlAttributes: new { @class = "control-label col-md-4" })
                            <div class="col-md-8">
                                @Html.DropDownListFor(x => Model.selectedCounty, new SelectList(Model.counties, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "county" })
                                <p>OR</p>
                            </div>
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(x => Model.selectedServiceType, htmlAttributes: new { @class = "control-label col-md-4" })
                            <div class="col-md-8">
                                @Html.DropDownListFor(x => Model.selectedServiceType, new SelectList(Model.serviceTypes, "Value", "Text"), htmlAttributes: new { @class = "form-control", @id = "service-type" })
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-offset-4 col-md-8">
                                <input type="submit" value="Search" class="btn btn-primary" />
                            </div>
                        </div>
                    </div>
                }

代码：MVC 数据表脚本

var table = $("#contractors-table").DataTable({

            "processing": true, // for show progress bar
            "serverSide": true, // for process server side
            "filter": true, // this is for disable filter (search box)
            "orderMulti": false, // for disable multiple column at once
            "pageLength": 10,
            "ajax": {
                "url": "@Url.Action("SearchContractors", "Search")",
                "data": function (d) {
                    d.form = $("#contractor-search-form").serializeArray();
                },
                "type": "POST",
                "datatype": "json"
            },
            "columns": [
            { "data": "accountNumber", "autoWidth": true, "visible": false, "searchable": false },
            { "data": null, "autoWidth": true, "className": 'details-control', "orderable": false, "defaultContent": '', "searchable": false },
            { "data": "companyName", "autoWidth": true },
            { "data": "phone1", "autoWidth": true },
            { "data": "primaryContact", "autoWidth": true },
            { "data": "email1", "autoWidth": true },
            { "data": "website", "autoWidth": true },

            ]

        });

代码：MVC 动作

 public ActionResult SearchContractors(SearchContractorViewModel vm)
    {
        bool hasCounty = !String.IsNullOrWhiteSpace(vm.selectedCounty);
        bool hasCompanyName = !String.IsNullOrWhiteSpace(vm.contractorName);
        bool hasServiceType = !String.IsNullOrWhiteSpace(vm.selectedServiceType);

        var data = searchRepo.getContractors(vm.selectedCounty, vm.contractorName, vm.selectedServiceType, false, false, false).AsQueryable<ContractorModel>().Select(x => new
        {
            companyName = x.companyName,
            accountNumber = x.accountNumber,
            phone1 = x.adresses.phone1,
            primaryContact = x.primaryContact,
            email1 = x.adresses.email1,
            website = x.adresses.website

        });

        return this.View(data);

    }

如果您想知道，我正在使用过滤器来促进服务器端 DataTables 操作，并且一切正常且花花公子。我唯一的问题是模型绑定器没有将表单值绑定到 ViewModel。

Firefox 调试器：

Firefox 调试器图片：

Answer 1

原来我需要使用一个 JQuery 插件并稍微修改我的代码。这是我所做的：

                "ajax": {
                "url": "/Search/SearchContractors",
                "data": function (data) {
                    var formData = $("#contractor-search-form").serializeObject();
                    for (var key in formData) {
                        if (formData.hasOwnProperty(key)) {
                            data[key] = formData[key];
                        }
                    }
                   // d.form = $("#contractor-search-form").serializeArray();
                },

JQuery 插件：

$.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 || '';
            }
        });

从这个链接得到提示：Use jQuery datatables server-side processing with mvc. Serialize criteria form and add this parameter to $ajax.post method