我如何使用 datapost 將參數從 jqgrid 傳遞到 controller（使用 MVC4 和 asp.net）

Question

我想從視圖中傳遞一些 selectedValue：jqgrid 到 controller，我可以用發布數據做到這一點嗎？ 請幫助我，我有 3 個 cascadind 下拉列表，我想用那些 selectedValue 過濾我的網格，我該如何傳遞參數？？

    @model Project.Models.FRHEntities
@{
    ViewBag.Title = "";
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>

        </div>
    </section>
    }
@Styles.Render("~/Content/jquery.jqGrid/ui.jqgrid.css")
@Styles.Render("~/Content/blitzer/jquery-ui-1.10.3.custom.css")
<script src="@Url.Content("~/Scripts/jquery-2.0.3.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/i18n/grid.locale-fr.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/js/ui/minified/jquery.ui.autocomplete.min.js")" type="text/javascript" ></script>
<script src="@Url.Content("~/Content/js/ui/minified/jquery.ui.datepicker.min.js")" type="text/javascript" ></script>
    @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/themes/base/css")

    <script type="text/javascript">
        $(document).ready(function () {
            $("#Dob").datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#Dob2").datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
    </script>
}
<h2>@ViewBag.Message</h2>
      <table style="width: 100%;" >
            <tr aria-atomic="False">
                <td>date début :</td>
                <td><input id="Dob" type="text" /></td>
            </tr>

           <tr>
                <td>date fin :</td>
                <td><input id="Dob2" type="text"  /></td>
           </tr>

           <tr>
                <td>Activité : </td>
                <td>@Html.DropDownList("Activites", (SelectList)ViewBag.SelectList, "selectionnez --", new { id = "Activites" }) </td>
           </tr>

          <tr>
                <td>Service :</td>
                <td><select id="Services" name="services"  ><option>Selectionnez --</option></select></td>
         </tr>

          <tr>
                <td>Client :</td>
                <td><select id="Clients" name="clients"><option>Selectionnez -- </option></select></td>
          </tr>

            <tr>
                <td><input  class ="button" id="ButtonSubmit" type="button" value="Visualiser"  onclick="javascript: afficher_cacher('rapport')" /></td>

                <td><input class="button" id="Exporter" type="button" value="Exporter"  /></td>
            </tr>

        </table>


<table id="activitelist"></table>
        <div id="activitelist_pager"></div>





    <script type="text/javascript">
<!--
    $(document).ready(function () {
        $('#Activites').change(function () { ChangeActivite(); });
        $('#Services').change(function () { ChangeService(); });
        $('#Clients').change(function () { ChangeClient(); });
        $('#activitelist').hide();
        $('#ButtonSubmit').hide().click(function () { show(); });

    });
    function ChangeClient() {
        var selectedValue = $('#Activites option:selected').val();
        var selectedValue2 = $('#Services option:selected').val();
        var selectedValue3 = $('#Clients option:selected').val();

        if ($.trim(selectedValue).length > 0) {
            $('#ButtonSubmit').show();
        }
        else {
            $('#ButtonSubmit').hide();
            $('#ClientInfo').empty();
        }
    }


    function ChangeActivite() {
        var selectedValue = $('#Activites option:selected').val();
        if ($.trim(selectedValue).length > 0) {
           // GetClients(selectedValue);
            GetServices(selectedValue);
        }
    }
    function ChangeService() {

        var selectedValue = $('#Activites option:selected').val();
        if ($.trim(selectedValue).length > 0) 

        var selectedValue2 = $('#Services option:selected').val();
        if ($.trim(selectedValue).length > 0) {
            // GetClients(selectedValue);
            GetClients(selectedValue,selectedValue2);
        }
    }


        function GetServices(activiteID) {
            $.ajax({
                url: '@Url.Action("Services", "Display")',
            data: { activiteID: activiteID },
            type: 'post',
            cache: false,
            async: false,
            dataType: 'json',
            success: function (data) {
                if (data.length > 0) {
                    $('#Services').empty();
                   $('#Services').append($('<option></option>').val('').text('Selectionnez--'));
                    $.each(data, function (i, item) {
                        $('#Services').append($('<option></option>').val(item.Key).text(item.Value));
                    });
                }
            }
        });
    }


        function GetClients(activiteID,service) {
            $.ajax({
                url: '@Url.Action("Clients", "Display")',
            data: { activiteID: activiteID , service : service},
            type: 'post',
            cache: false,
            async: false,
            dataType: 'json',
            success: function (data) {
                if (data.length > 0) {
                    $('#Clients').empty();
                    $('#Clients').append($('<option></option>').val('').text('Selectionnez--'));
                    $.each(data, function (i, item) {
                        $('#Clients').append($('<option></option>').val(item.Key).text(item.Value));
                    });
                }
            }
        });
        }

    function show() {
        $("#activitelist").jqGrid({

            url: '@Url.Action("LinqGridData", "Display")',
            postData: { activite : "1-COURRIER ENTRANT" },
            datatype: 'json',
            mtype: 'POST',
            colNames: ["Activité", "Service", "Client", "volume", "delta", "temps moyen", "temps total"],
            colModel:
            [

            { name: "Activité", index: "Activité" },
            { name: "Service", index: "Service" },
             { name: "Client", index: "Client" },
              { name: "vol", index: "vol" },
               { name: "delta_", index: "delta_" },
                { name: "tempsmoy_", index: "tempsmoy_" },
                 { name: "tempstot", index: "tempstot" },

            ],
            pager: $('#activitelist_pager'),
            rowNum: 25,
            rowList: [5, 10, 25, 50],
            height: 'auto',
            width: '800',
            sortname: 'Activite',
            sortorder: "ASC"
        });

        $("#activitelist").jqGrid('navGrid', '#activitelist_pager', { add: false, edit: false, del: false, search: false });


    }

</script>

這是動作方法：

public ActionResult LinqGridData(string activite, string sidx, string sord, int page, int rows) {

    var context = new FRHEntities();
    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = rows;
    int totalRecords = context.productivites.Count();
    int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

    var jsonData = new
    {
        total = totalPages,
        page = page,
        records = totalRecords,

        rows = frh.productivites.AsEnumerable().Where(n => n.Activité == activite).Select(n => new { id = n.activitéID, cell = new string[] { n.Activité, n.Service.ToString(), n.action, n.vol.ToString(), n.delta_.ToString(), n.tempsmoy_.ToString(), n.tempstot_.ToString() } }).ToArray()
    };

    return Json(jsonData, JsonRequestBehavior.AllowGet);
}

Answer 1

此行中的問題-> postdata：{activite：“ 1-COURRIER ENTRANT”}像這樣使用postData

postData: { activite: "1-COURRIER ENTRANT" },

希望這對您有所幫助。

Answer 2

您正在使用整數參數activite

public ActionResult LinqGridData(int activite , string sidx, string sord, int page, int rows)
        {

並將字符串值傳遞給操作。

postdata: { activite: "1-COURRIER ENTRANT" },

可能就是這個問題。

編輯：

在您的操作中，使用JqGridRequest對象訪問請求參數：

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Customers(JqGridRequest request, string activite  )

{
....
}

您可以使用以下屬性訪問jqgrid請求參數：

request.SortingName 
request.SortingOrder 
request.PageIndex 
request.PagesCount 
RecordsCount 

Answer 3

采用

postData：{my_var：“ my_value”}

Answer 4

理想情況下，jqGrid 創建一次，所有后續調用只刷新它。 所以post參數不太可能每次都post。

最好的方法是將網格保持元素（例如：<table id="jqgrid">）保留在 html 元素中，如 div 並清除 div 並使用“<table id="jqgrid">”對其進行初始化，然后加載網格。 這將使用您想要的發布數據重新創建網格。

<div class="card-content" id="grid-content">
    <table id="jqgrid"></table>
    <table id="pjqgrid"></table>
</div>

<script>
    var gridhtml = "<table id=\"jqgrid\"></table><table id=\"pjqgrid\">/table>";
    function loadgrid(){
        $("#grid-content").empty().html(gridhtml);
        .....create grid code here
    }
</script>

這真的對你有用。