How to load jqgrid on button click and send parameters to the action in jqGrid 4.6.0 in MVC

Question

I want to load every year's data in jqgrid when I click on a button and after loading a modal form and selecting the year from drop down list. a diagram of the steps but i don't know how to do this.

And this is my source code :

<!-- 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>  

Now my script is something like this:

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

And here the button code ( My modal form works well. when I click the filter button, the filter options in my modal form appear, and then I select the year from year dropdownlist in modal and then i click the report button, after that the below code fires and I can see the selected year's data in action "Get_RepContracts" but it does not bind to my jqgrid):

Thanks in Advance...

UPDATE : Now My code is like below :

$(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

It seems to me that you have small problem with the usage of correct id of select element. Your HTML code contains @id = "ddlYear" parameter of @Html.DropDownListFor:

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

but you still use

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

To solve the problem you should just modify the code to

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