如何在按钮单击时加载 jqgrid 并将参数发送到 MVC 中 jqGrid 4.6.0 中的操作答案

【问题标题】：How to load jqgrid on button click and send parameters to the action in jqGrid 4.6.0 in MVC如何在按钮单击时加载 jqgrid 并将参数发送到 MVC 中 jqGrid 4.6.0 中的操作
【发布时间】：2018-04-11 12:40:42
【问题描述】：

当我单击按钮并加载模式表单并从下拉列表中选择年份后，我想在 jqgrid 中加载每年的数据。 a diagram of the steps 但我不知道该怎么做。

这是我的源代码：

<!-- Page content -->
<div class="w3-content" style="max-width: 100%">

    <div class="container" style="width:40%;margin-top:2%">

        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Filter</a>

        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content"> 
                    <div class="modal-header">
                        <a href="#" dir="ltr" class="close" data-dismiss="modal">&times;</a> 
                    </div> 
                    <div class="modal-body"> 
                        <form id="myForm" dir="rtl"> 
                            <div class="form-group">
                                <label>Year</label> 
                                @Html.DropDownListFor(model => model.YEAR_ABBR, ViewBag.YearList as MultiSelectList, "--select--", new { @class = "form-control", @id = "ddlYear", multiple = "multiple" })
                            </div> 

                        </form> 
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
                        <input type="reset" value="GetRep" class="btn btn-success" id="btnSubmit" />

                    </div>   </div> 
            </div>    </div>    </div>

    <div dir="rtl" align="center" style="overflow:auto" class="tablecontainer">
        <div id="rsperror"></div> 
        <table id="list" cellpadding="0" cellspacing="0"></table>
        <div id="pager" style="text-align:center;"></div>
    </div>

现在我的脚本是这样的：

 <script type="text/javascript">

        $(document).ready(function () { 
                bindData();
                $("#btnSubmit").click(function () {  
                        $('#list').trigger('reloadGrid');   }) 
        }); 
        var bindData = function () {

            $('#list').jqGrid({ 
                url: '@Url.Action("Get_RepContracts","Home")', 
                postData:  {  YEAR_ABBR: function () { return $('#YEAR_ABBR').val(); }   },
                datatype: 'json',
                jsonReader: {
                    root: "Rows",
                    page: "Page", 
                }, 
                mtype: 'GET',
                //columns names
                colNames: ['Vahed_Descript'   ], 
                colModel: [
    { name: 'Vahed_Descript', index: 'Vahed_Descript', align: 'right', width: 200, sorttype: "number",    }  
        ],
        pager: $('#pager'),
       rowNum: 800,
        rowList: [ 800 ,1000],
        sortname: 'Vahed_Descript',   
        hidegrid: false,
        direction: "rtl",
        gridview: true,
        rownumbers: true,
        footerrow: true,
        userDataOnFooter: true,
        loadComplete: function () {
            calculateTotal();
            $("tr.jqgrow:odd").css("background", "#E0E0E0");
        },
        loadError: function (xhr, st, err) {
            jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
        }   , loadonce: true 
        })   ;

这里的按钮代码（我的模态表单效果很好。当我单击过滤器按钮时，会出现我的模态表单中的过滤器选项，然后我从模态下拉列表中选择年份，然后单击报告按钮，之后，下面的代码会触发，我可以看到所选年份的数据正在运行“Get_RepContracts”，但它没有绑定到我的 jqgrid）：

在此先感谢...

更新：现在我的代码如下：

$(document).ready(function () { 
                bindData();

       $("#btnSubmit").click(function () {
         var myPostData = $('#list').jqGrid("getGridParam", "postData");
                    $('#list').trigger('reloadGrid');
                    $("#myModal").modal("hide");
                })    });

        var bindData = function () {

            $('#list').jqGrid({  
                url: '@Url.Action("Get_RepContracts","Home")',  
                postData: {
                   YEAR_ABBR : function () { return $("#YEAR_ABBR").val();}, 
                 } , 
                datatype: 'json',
                jsonReader: { ........

【问题讨论】：

$("#grid").trigger("reloadGrid") 并在网格部分添加此,beforeRequest: function () { jQuery('#grid').jqGrid('setGridParam', { postData: { year: $('#year').val() } }); }
以上是如何通过jqGrid ajax请求向服务器发送参数的示例。显然，年份参数可能会因您而异。
@Steve 非常感谢您的回答，但我不知道为什么它对我不起作用。
使用 F12 控制台了解发生了什么。您的 javascript 被调用了吗？你的 ajax 发布了吗？
@sam: id YEAR_ABBR 是否正确（参见return $("#YEAR_ABBR").val();）？您使用@id = "ddlYear" 作为@Html.DropDownListFor 的参数。在我看来，您只需将 return $("#YEAR_ABBR").val(); 更改为 return $("#ddlYear").val();

标签： asp.net-mvc jqgrid

【解决方案1】：

在我看来，您对选择元素的正确 id 的使用存在小问题。您的 HTML 代码包含 @Html.DropDownListFor 的 @id = "ddlYear" 参数：

@Html.DropDownListFor(
    model => model.YEAR_ABBR,
    ViewBag.YearList as MultiSelectList,
    "--select--",
    new {
        @class = "form-control",
        @id = "ddlYear",
        multiple = "multiple"
    }
)

但你还在用

postData: {
    YEAR_ABBR: function () { return $("#YEAR_ABBR").val(); }
}

要解决问题，您只需将代码修改为

postData: {
    YEAR_ABBR: function () { return $("#ddlYear").val(); }
}

【讨论】：