Asp.Net MVC Datatables with form post

Question

I am working on an ASP.NET MVC project, and I am trying to use DataTables . I am capturing the form post during Html.BeginForm() operation and am trying to bind my ViewModel during the DataTables AJAX post operation. The problem is that my ViewModel is always empty. Can you please find out what I am doing wrong? Thanks!

Code: 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>
                }

Code: MVC DataTables script

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 },

            ]

        });

Code: 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);

    }

In case you're wondering, I am Using a filter to facilitate the server side DataTables operations, and it is all working fine and dandy. My only problem is that the model binder is not binding the form values to the ViewModel.

Firefox Debugger:

Firefox Debugger image:

From your image, it looks like your posting data as `form[0].name` etc - I'm guessing your `SearchContractorViewModel` doesn't have a property `public SearchForm form { get;set; }` - can you include `SearchContractorViewModel`?# — freedomn-m, Jan 16 '19 at 16:16

score 0 · Accepted Answer · answered Jan 16 '19 at 17:29

Turns out i needed to use a JQuery plugin and modify my code slightly. Here is what I did:

                "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 Plugin:

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

Got the hint from this link: Use jQuery datatables server-side processing with mvc. Serialize criteria form and add this parameter to $ajax.post method

Asp.Net MVC Datatables with form post

1 Answers1