Asp.Net MVC Datatables с формой публикации

Question

Я работаю над проектом ASP.NET MVC и пытаюсь использовать DataTables. Я фиксирую публикацию формы во время операции Html.BeginForm () и пытаюсь привязать мою ViewModel во время операции публикации DataTables AJAX. Проблема в том, что моя ViewModel всегда пуста. Не могли бы вы узнать, что я делаю не так? Спасибо!

Код: MVC View

@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 DataTables

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 Action

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

Получил подсказку по этой ссылке: Использовать обработку данных на сервере jQuery с mvc. Форма критериев сериализации и добавление этого параметра в метод $ ajax.post