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()
@Html.LabelFor(model => model.contractorName, htmlAttributes: new { @class = "control-label col-md-4" })
@Html.EditorFor(model => model.contractorName, new { htmlAttributes = new { @class = "form-control", @autofocus = "autofocus" } })
OR
@Html.LabelFor(x => Model.selectedCounty, htmlAttributes: new { @class = "control-label col-md-4" })
@Html.DropDownListFor(x => Model.selectedCounty, new SelectList(Model.counties, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "county" })
OR
@Html.LabelFor(x => Model.selectedServiceType, htmlAttributes: new { @class = "control-label col-md-4" })
@Html.DropDownListFor(x => Model.selectedServiceType, new SelectList(Model.serviceTypes, "Value", "Text"), htmlAttributes: new { @class = "form-control", @id = "service-type" })
}
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().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: