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

Question

我想在单击按钮并加载模态表单并select从下拉列表中输入年份时在 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 
        })   ;

这里是按钮代码（我的模态表单运行良好。当我单击过滤器按钮时，会出现模态表单中的过滤器选项，然后我 select 模态下拉列表中的年份，然后我点击报告按钮，之后下面的代码被触发，我可以看到 selected 年的数据在运行 "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: { ........

Answer 1

在我看来，您在使用 select 元素的正确 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(); }
}

如何在单击按钮时加载 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

asp.net-mvc

jqgrid