동시에 폼 데이터와 jqGrid (editUrl) 데이터를 컨트롤러로 전달하는 방법

Question

폼 데이터와 jqGrid의 다양한 비트가있는 asp.net MVC3 앱이 있습니다.

jqGrid에서 행을 편집 할 때 일부 양식 항목뿐만 아니라 표 데이터를 editUrl 컨트롤러에 게시해야합니다.

편집 된 jqGrid 데이터를 editUrl을 통해 내 컨트롤러에 게시 할 수 있습니다.

이 방법이 있습니까?

다른 양식 요소를 보내는 방법과 내 컨트롤러에서받는 방법을 모르겠습니다.

도움이 될 것입니다. 다음은

내있는 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

이미 programID 및 buildID 속성을 함수로 정의한 것을 볼 수 있습니다. 그리드에 대한 데이터를 가져 오기 위해 요청할 때마다 함수가 호출됩니다. 마찬가지로 inlineData 또는 매개 변수를 사용하여 onSelectRow 콜백 내부에서 명시 적으로 호출하는 editRow 매개 변수를 사용할 수 있습니다.

봅니다 다음있는 jqGrid 옵션이 the demo를 호출 : 당신이 편집 행의 데이터를 저장한다면 당신은이 경고를 볼 수

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; 
    } 
} 

. 내 데모에서 서버 측 코드가없는 editurl: 'myDummyUrl'을 사용 했으므로 끝에 오류가 표시되지만 HTTP 트래픽 (Fiddler 또는 Firebug)을 검사하면 다음과 같은 추가 매개 변수가 전송됩니다. editurl :

myParam=OK&myNextParam=Fine 

나는 그것이 당신이 원하는 것이라고 생각합니다.

inlineData:{} 

수정하기 전에 작업하기 전에 제대로 작동합니다. 그러나 json을 만들기 위해 컨트롤러에 컨트롤을 전달하기 위해 이전처럼 이벤트를 가져 오는 방법을 삭제하려면 삭제를 클릭하십시오.

Answer 2

당신은 onclickSubmit 옵션을 사용하여 서버에 전송되는 것을 사용자 정의 할 수 있습니다

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

이 컨트롤러는 모든 편집 속성 + extraParam 포함 된 JSON 객체를받을 것 . 서버 측에서 어떻게 처리하는지는 독자에게 달려 있습니다.