Use jQuery datatables server-side processing with mvc. Serialize criteria in form
Use jQuery datatables server-side processing with mvc. Serialize criteria in form
lluthus
Posts: 1Questions: 0Answers: 0
Hi all, i'm using mvc and jquery datatables, with serve side processing.
I have created two Class Model:
the first jQueryParamModel, to pass dataTables parameters to action controller
[code]
public class JQueryDataTableParamModel
{
///
/// Request sequence number sent by DataTable, same value must be returned in response
///
public string sEcho{ get; set; }
///
/// Text used for filtering
///
public string sSearch{ get; set; }
///
/// Number of records that should be shown in table
///
public int iDisplayLength{ get; set; }
///
/// First record that should be shown(used for paging)
///
public int iDisplayStart{ get; set; }
///
/// Number of columns in table
///
public int iColumns{ get; set; }
///
/// Number of columns that are used in sorting
///
public int iSortingCols{ get; set; }
///
/// Comma separated list of column names
///
public string sColumns{ get; set; }
}
[/code]
the second rapresent two custom search criteria
[code]
public class Home2Model
{
public CriteriaModel SearchCriteria1 { get; set; }
public CriteriaModel SearchCriteria2 { get; set; }
}
public class CriteriaModel
{
public int? integer { get; set; }
}
[/code]
After i have created a strongly typed view with Home2Model, named index.cshtml
[code]
@model GenericSearch.UI.Models.Home2Model
$(document).ready(function () {
var oTable = $('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "/Home2/AjaxHandler",
"bProcessing": false,
"sServerMethod": "POST",
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({ "name": "hm", "value": $("myForm").serialize() });
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
})
}
});
});
Search
@using (Html.BeginForm("Index", "Home2", FormMethod.Post, new { id="myForm"}))
{
@Html.EditorFor(m => m.SearchCriteria1)
@Html.EditorFor(m => m.SearchCriteria2)
a
b
c
d
e
f
}
[/code]
I'have create a contoller action that recive in input this parameters:
[code]
[HttpPost]
public ActionResult AjaxHandler(JQueryDataTableParamModel param,Home2Model hm)
{
return new EmptyResult();
}
[/code]
JQueryDataTableParamModel bind work properly, but hm param isn't valorized (null). the mvc binding doesn't work correctly.
Can any one help me ?
Thank you in advantage.
I have created two Class Model:
the first jQueryParamModel, to pass dataTables parameters to action controller
[code]
public class JQueryDataTableParamModel
{
///
/// Request sequence number sent by DataTable, same value must be returned in response
///
public string sEcho{ get; set; }
///
/// Text used for filtering
///
public string sSearch{ get; set; }
///
/// Number of records that should be shown in table
///
public int iDisplayLength{ get; set; }
///
/// First record that should be shown(used for paging)
///
public int iDisplayStart{ get; set; }
///
/// Number of columns in table
///
public int iColumns{ get; set; }
///
/// Number of columns that are used in sorting
///
public int iSortingCols{ get; set; }
///
/// Comma separated list of column names
///
public string sColumns{ get; set; }
}
[/code]
the second rapresent two custom search criteria
[code]
public class Home2Model
{
public CriteriaModel SearchCriteria1 { get; set; }
public CriteriaModel SearchCriteria2 { get; set; }
}
public class CriteriaModel
{
public int? integer { get; set; }
}
[/code]
After i have created a strongly typed view with Home2Model, named index.cshtml
[code]
@model GenericSearch.UI.Models.Home2Model
$(document).ready(function () {
var oTable = $('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "/Home2/AjaxHandler",
"bProcessing": false,
"sServerMethod": "POST",
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({ "name": "hm", "value": $("myForm").serialize() });
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
})
}
});
});
Search
@using (Html.BeginForm("Index", "Home2", FormMethod.Post, new { id="myForm"}))
{
@Html.EditorFor(m => m.SearchCriteria1)
@Html.EditorFor(m => m.SearchCriteria2)
a
b
c
d
e
f
}
[/code]
I'have create a contoller action that recive in input this parameters:
[code]
[HttpPost]
public ActionResult AjaxHandler(JQueryDataTableParamModel param,Home2Model hm)
{
return new EmptyResult();
}
[/code]
JQueryDataTableParamModel bind work properly, but hm param isn't valorized (null). the mvc binding doesn't work correctly.
Can any one help me ?
Thank you in advantage.
This discussion has been closed.