Cómo pasar datos de formulario y datos jqGrid (editUrl) al controlador al mismo tiempo

Question

Tengo una aplicación asp.net MVC3 con varios bits de datos de formulario y un jqGrid.

Cuando edito una fila en el jqGrid, necesito publicar los datos de la cuadrícula así como algunos de los formularios en el controlador editUrl.

Puedo publicar los datos editados jqGrid en mi controlador a través de editUrl muy bien.

¿Hay alguna manera de hacerlo?

No estoy seguro de cómo enviar los otros elementos del formulario y cómo recibirlos en mi controlador.

Cualquier ayuda será muy apreciada.

A continuación es mi 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

Veo que ya usa las propiedades programID y buildID definidas como funciones. Se llamarán las funciones durante cada solicitud para obtener los datos para la grilla. De la misma manera, puede usar el parámetro inlineData o extraparam del editRow al que llama explícitamente dentro de su devolución de llamada onSelectRow.

intenta llamar a the demo que tiene las siguientes opciones jqGrid:

inlineData: { 
    myParam: function() { 
     alert("inlineData is calling!!!"); 
     return "OK"; 
    } 
}, 
onSelectRow: function (id) { 
    if (id && id !== lastSel) { 
     $(this).jqGrid('restoreRow', lastSel); 
     $(this).jqGrid('editRow', id, true, null, null, null, { 
      myNextParam: function() { 
       alert("extraparam of 'editRow' is calling!!!"); 
       return "Fine"; 
      } 
     }); 
     lastSel = id; 
    } 
} 

Verá dos alertas si desea guardar los datos de la fila de edición. En mi demostración utilicé editurl: 'myDummyUrl' que no tiene código en el servidor y verá un error al final, pero si examina el tráfico HTTP (con respecto a Fiddler o Firebug) verá que se enviarán los siguientes parámetros adicionales a la editurl:

myParam=OK&myNextParam=Fine 

creo que es lo que necesita.

inlineData:{} 

funciona bien para obtener trabajo antes de ir al controlador durante la edición. Pero en caso de eliminar cómo obtener el evento como antes para pasar el control al controlador para hacer json, después de hacer clic en eliminar.

Answer 2

Puede personalizar lo que se envía al servidor usando onclickSubmit opción:

.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 
); 

El controlador recibirán un objeto JSON que contiene todas las propiedades editadas + extraParam . Depende de usted cómo maneja esto en el lado del servidor.