asp.net mvc jqgrid使用網格外的按鈕提交網格

Question

我是jqgrid和MVC的新手。我的Jqgrid處於多選模式，我想通過單擊網格外的按鈕（tbrSave）將網格上的所有選定項目提交給控制器。

@using (Html.BeginForm("Save", "Home")) 

{

<button type="submit" id="tbrSave" class="toolbar"> 
    <span title="Config" class="icon-32-save"></span>Save</button> 

<script src="@Url.Content("~/Scripts/grid.locale-en.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.custom.min.js")" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var lastSelectedRow; 

     $('#jqGridCategoryCreate').jqGrid({ 
      //url from wich data should be requested 
      url: 'CategoriesList', 
      //type of data 
      datatype: 'json', 
      editurl: '@Url.Action("UpdateCategory")', 
      //url access method type 
      mtype: 'POST', 

      //columns names 
      colNames: ['CategoryId', 'Category Name', 'Display Order', 'Is Featured Product'], //columns model 
      colModel: [ 

      { name: 'Id', index: 'Id', align: 'left', editable: false }, 
      { name: 'Name', index: 'Name', align: 'left', editable: false }, 
      { name: 'DisplayOrder', index: 'DisplayOrder', align: 'left', editable: true, edittype: 'text', editoptions: { maxlength: 10 }, editrules: { required: true} }, 
       { name: 'IsFeaturedProduct', index: 'IsFeaturedProduct', align: 'left', editable: true, edittype: 'text', edittype: 'checkbox', editoptions: { maxlength: 10, value: '1:Yes;0:No' }, formatter: 'checkbox', editrules: { required: true}}], 
      //pager for grid 
      pager: $('#jqPagerCategoryCreate'), 
      //number of rows per page 
      rowNum: 10, 
      //initial sorting column 
      sortname: 'Id', 
      //initial sorting direction 
      sortorder: 'asc', 
      //we want to display total records count 
      viewrecords: true, 
      multiselect: true, 
      //grid width 
      width: 'auto', 
      //grid height 
      height: 'auto', 
      ondblClickRow: function (id) { 
       if (id && id != lastSelectedRow) { 
        //save changes in row 
        jQuery('#jqGridCategoryCreate').saveRow(lastSelectedRow); 

        $.lastSelectedRow = id; 
        //trigger inline edit for row 
        $('#jqGridCategoryCreate').editRow(lastSelectedRow, true); 
       } 

      } 
     }); 

     $('#jqGridCategoryCreate').jqGrid('navGrid', '#jqPagerCategoryCreate', 
       { add: false, del: true, edit: false, search: false }, 
       { width: 'auto', url: '/Category/Edit' }, 
       { width: 'auto', url: 'SaveCustomLanguageData' }, 
       { width: 'auto', url: '/Category/Delete' }); 

     function getSelectedRows() { 

      //make sure all items must be in view mode before submitting. 
      jQuery('#jqGridCategoryCreate').saveRow(lastSelectedRow); 

      var rows = $("#jqGridCategoryCreate").jqGrid('getGridParam', 'selarrrow'); 

      var categories = []; 
      $.each(rows, function (index, rowId) { 
       var gridRow = $("#jqGridCategoryCreate").getRowData(rowId); 

       var category = { "Id": rowId, 
        "DisplayOrder": gridRow['DisplayOrder'] 
       }; 
       categories.push(category); 
      }); 

     } 
    }); 
</script> 

}

如何附上getSelectedRows到電網，以便將其張貼到控制器（ 「保存」）。

非常感謝。 Nam Vo。

Answer 1

這將涉及以下步驟

1）在你的Razor視圖

<a id="somelink" href="">Select Multiple Accounts</a>

2）之上創建

$('#somelink').click(function() { 

var multiplerowdata = jQuery("#grid").getGridParam('selarrrow'); 

$.ajax({ type: 'POST', 
    url: '@Url.Action("YourController", "YourActionMethod")', 
    data: JSON.stringify(multiplerowdata), 
    traditional: true, 
    dataType: "json", 
    contentType: "application/json; charset=utf-8", 
    success: function() { alert("row submited"); } 
});}) 

創建錨鏈接點擊事件處理程序創建一個錨鏈接

3）有時你可能會得到JavaScript錯誤的JSON沒有定義，這可以通過在共享\ _layout.csh中插入元標記來解決TML網頁如下所示

<meta http-equiv="X-UA-Compatible" content="IE=8" /> 

4）內部YourController YourActionMethod謹有點像這樣關於參數順序

[AcceptVerbs(HttpVerbs.Post)] 
    public ActionResult YourActionMethod(List<string> datarow) 
    { 
     //return "sucessfully validated"; 
     return null; 
    }