asp.net-mvc - asp.net mvc jqgrid 使用网格外的按钮提交网格

Question

我是 jqgrid 和 MVC 的新手。我的 Jqgrid 处于多选模式，我想通过单击网格外的按钮 (tbrSave) 将网格上的所有选定项目提交给 Controller 。

@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 附加到网格以便将其发布到 Controller (“保存”)。

谢谢一百万。
南武。

Answer 1

这将涉及以下步骤

1)在你的 Razor View 上创建一个 anchor 链接
<a id="somelink" href="">Select Multiple Accounts</a>

2)为上面创建的 anchor 链接创建一个点击事件处理程序

$('#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) 有时您可能会遇到 JSON is not defined 的 javascript 错误，这可以通过在 shared\_layout.cshtml 页面中插入元标记来解决，如下所示

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