asp.net mvc - How to pass form data and jqGrid (editUrl) data to Controller at same time

Question

I have an asp.net MVC3 app with various bits of form data and a jqGrid.

When I edit a row in the jqGrid I need to post the grid data as well as some of the form pieces to the editUrl controller.

I can post the jqGrid edited data to my controller through the editUrl just fine.

Is there a way to do this?

Im not sure how to send the other form elements and how to receive them in my controller.

Any help will be greatly appreciated.

Below is my jqGrid:

    $("#jqTable").jqGrid({
        // Ajax related configurations
        url: '@Url.Action("_CustomBinding")',
        datatype: "json",
        mtype: "POST",
        postData: {
            programID: function () { return $("#ProgramID option:selected").val(); },
            buildID: function () { return $('#Builds option:selected').val(); }
        },

        // Specify the column names
        colNames: ["Actions", "Assembly ID", "Assembly Name", "Assembly Type", "Cost", "Order", "Budget Report", "Partner Request", "Display"],

        // Configure the columns
        colModel: [
        { name: 'myac', width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions', formatoptions: { keys: true} },
        { name: "AssemblyID", key: true, index: "AssemblyID", width: 40, align: "left", editable: false },
        { name: "AssemblyName", index: "AssemblyName", width: 100, align: "left", editable: true, edittype: 'select',
            editoptions: {
                dataUrl: '@Url.Action("_Assemblies")',
                buildSelect: function (data) {
                    var response = jQuery.parseJSON(data);
                    var s = '<select>';
                    if (response && response.length) {
                        for (var i = 0, l = response.length; i < l; i++) {
                            var ri = response[i];
                            s += '<option value="' + ri + '">' + ri + '</option>';
                        }
                    }
                    return s + "</select>";
                }
            }
        },
        { name: "AssemblyTypeName", index: "AssemblyTypeName", width: 100, align: "left", editable: false, edittype: 'select' },
        { name: "AssemblyCost", index: "AssemblyCost", width: 50, align: "left", formatter: "currency", editable: true },
        { name: "AssemblyOrder", index: "AssemblyOrder", width: 50, align: "left", editable: true },
        { name: "AddToBudgetReport", index: "AddToBudgetReport", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
        { name: "AddToPartnerRequest", index: "AddToPartnerRequest", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
        { name: "Show", index: "Show", width: 50, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox'}],

        // Grid total width and height and formatting
        //width: 650,
        //height: 220,
        altrows: true,

        // Paging
        //toppager: true,
        pager: $("#jqTablePager"),
        rowNum: 10,
        rowList: [10, 20, 30],
        viewrecords: true, // Specify if "total number of records" is displayed
        emptyrecords: 'No records to display',

        // Default sorting
        sortname: "AssemblyID",
        sortorder: "asc",

        // Grid caption
        caption: "Build Template",

        // grid command functionality
        editurl: '@Url.Action("_AjaxUpdate")',
        onSelectRow: function (AssemblyID) {
            if (AssemblyID && AssemblyID !== lastsel) {
                $('#jqTable').jqGrid('restoreRow', lastsel);
                $("#jqTable").jqGrid('editRow', AssemblyID, true);
                lastsel = AssemblyID;
            }
        }
    }).navGrid("#jqTablePager",
        { refresh: false, add: false, edit: false, del: false },
            {}, // settings for edit
            {}, // settings for add
            {}, // settings for delete
            {sopt: ["cn"]} // Search options. Some options can be set on column level
     );

Answer 1

You can customize what is being sent to the server using onclickSubmit option:

.navGrid("#jqTablePager",
    { refresh: false, add: false, edit: false, del: false },
        { // settings for edit
            onclickSubmit: function(params, postdata)
            {
                postdata.extraParam = 'value'
            }
        },
        {}, // settings for add
        {}, // settings for delete
        {sopt: ["cn"]} // Search options. Some options can be set on column level
 );

The controller will receive a JSON object containing all edited properties + extraParam. It is up to you how you handle this on the server side.