Post Form with jQgrid in ASP.Net MVC 3

Question

I tried to post my search form to a controller and load the json result into jQGrid. But i always getting null in my controller.

public class SearchViewModel
{
public string Name{get;set;}
public string Location{get;set;}
public string EmployeeId{get;set;}
}

@model UI.ViewModel.SearchViewModel

<div id="search-panel">
    @{Html.EnableClientValidation();}
    @using (Html.BeginForm("Search", "Home", 
                 FormMethod.Post, new { id = "search-form" }))
    {
        @Html.AntiForgeryToken()
        <div class="formfield-container">
            <label>
                <span class="column">Name:</span>
                @Html.TextBoxFor(m => m.Name)
            </label>
        </div>
        <div class="formfield-container">
            <label>
                <span class="column">Emp Id:</span>
                @Html.TextBoxFor(m => m.EmployeeId)
            </label>
        </div>
        <div class="formfield-container">
            <label>
                <span class="column">Location:</span>
               @Html.TextBoxFor(m => m.Location)
            </label>
        </div>
 }

This is my jQGrid code

jQuery("#list").jqGrid({
    //start
    url: 'Home/Search',
    datatype: "json",
    postData: {
        viewModel: function () { return $("#search-form").serialize(); }
    },
    mtype: "POST",
   //etc.. other config goes
 });

Here is my controller code

 [HttpPost]
 public JsonResult Search(SearchViewModel viewModel)
 {
  //viewModel parameter is always null
  var searchResult=//getting records from DB and preparing structure for jQGrid
  //Request["PostData"] gives json array sting of my form field and its value
  Json(searchResult);

 }

I tried following this post also. jQgrid posting custom data on load. But SearchViewModel object is null.

But i can see it in Requst["PostData"] value as a JSON string of my form field name and its value. This mean my form is posting successfully to the server with the data as JSON sting. How can i directly get those JSON string to direct strongly typed model.

But i could see Request.Params["viewModel"] contains the form element details

Any one could help to get my form posted as view model? or Do i need to write my own custom model binder ?

Answer 1

We are using a small function to serialize the form into an object for that:

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

And then in the jQgrid:

jQuery("#list").jqGrid({
    ...
    beforeRequest: GridOnBeforeRequest,
    ...
});

function GridOnBeforeRequest()
{
    var data = $("#search-form").serializeObject();
    $("#list").jqGrid('setGridParam', { postData: data });
}

And then to refresh the grid:

$("#list").trigger('reloadGrid');