MVC jqgrid - cannot get Model Binding to work to edit object for cell update

Question

I am using JQGrid to edit a grid of data. I want to send the data in the cell to be edited on the server. So my view looks like;

@using Lib.Web.Mvc.JQuery.JqGrid
@using Tac.P3.Model
@model ContractType

@{
    ViewBag.Title = "List of Contract Types";
    var grid = new JqGridHelper<ContractType>(
        "ContractTypes",
        dataType: JqGridDataTypes.Json,
        methodType: JqGridMethodTypes.Post,
        pager: true,
        rowsNumbers: true,
        rowsNumber: 20,
        shrinkToFit: true,
        cellEditingEnabled: true,
        cellEditingSubmitMode: JqGridCellEditingSubmitModes.Remote,
        cellEditingUrl:Url.Action("Update", "ContractType"),
        sortingName: "ContractTypeLabel", sortingOrder: JqGridSortingOrders.Asc,
        url: Url.Action("GridData"),
        viewRecords: true)
        .Navigator(new JqGridNavigatorOptions()
                       {
                           Add = false,
                           Edit = false,
                           Delete = false,
                           Search = false
                       });
}

<div class="mainPage">
    <fieldset>
        <legend>Add New Contract Type</legend>
        <form class="form-horizontal" method="POST" action="@Url.Action("Add")">
            <div class="form-group">
                <div class="col-xs-1">@Html.LabelFor(model => model.ContractTypeLabel)</div>
                <div class="col-xs-10">@Html.TextBoxFor(model => model.ContractTypeLabel)</div>
            </div>
            <div class="form-group">
                <div class="col-xs-1">@Html.LabelFor(model => model.Description)</div>
                <div class="col-xs-10">@Html.TextBoxFor(model => model.Description)</div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-1 col-xs-10">
                    <button class="btn btn-primary" id="btnSubmitForm">Add</button>
                </div>
            </div>
        </form>
    </fieldset>
    <fieldset>
        <legend>List of Contract Types</legend>
        @Html.Partial("_Messages")
        <div id="loadingMessage" class="errorHighlight">Loading list of Contract Types, please wait...</div>
        @grid.GetHtml()
    </fieldset>
</div>

My method on the controller looks like

public ActionResult Update(CellEditingViewModel viewModel)
{
    var contractType = this.TacUoW.ContractType.GetById(viewModel.Id);
    switch (viewModel.PropertyName)
    {
        case "ContractTypeLabel":
            contractType.ContractTypeLabel = viewModel.PropertyValue.ToString();
            break;

        case "Description":
            contractType.Description = viewModel.PropertyValue.ToString();
            break;
    }

    this.TacUoW.ContractType.Update(contractType);
    this.TacUoW.SaveChanges();
    return this.Json(true);
}

My view model looks like;

[ModelBinder(typeof(CellEditingViewModelBinder))]
public class CellEditingViewModel
{
    public int Id { get; set; }

    public string PropertyName { get; set; }

    public object PropertyValue { get; set; }
}

My ModelBinder looks like;

public class CellEditingViewModelBinder : DefaultModelBinder
{
    public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        var request = controllerContext.HttpContext.Request;
        var model = new CellEditingViewModel { Id = Convert.ToInt32(request.Params["ContractTypeId"]) };

        if (request.Params.AllKeys.Contains("ContractTypeLabel"))
        {
            model.PropertyName = "ContractTypeLabel";
            model.PropertyValue = request.Params["ContractTypeLabel"];
        }
        else if (request.Params.AllKeys.Contains("Description"))
        {
            model.PropertyName = "Description";
            model.PropertyValue = request.Params["Description"];                
        }

        return model;
    }
}

When I press transmitt in the grid, I get an empty object sent to the controller method, no model binding takes place. What am I doing wrong?

Answer 1

I found what the problem was, and I have not posted all the code to show it. For my class CellEditingViewModel I was using

using System.Web.Http.ModelBinding;

Which is wrong. I should have been using

using System.Web.Mvc;