how can i pass parameter from jqgrid to controller with datapost (using MVC4 and asp.net )

Question

I want to pass some selectedValue from view: jqgrid to controller, can i do that with post data? please help me I have 3 cascadind dropdownlist and i want to filter my grid with those selectedValue how can I pass parameters??

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

this is action method:

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

problem in this line -> postdata: { activite: "1-COURRIER ENTRANT" } use postData like this

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

Hope this helps you.

Answer 2

You are using an integer parameter activite

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

and passing a string value to the action.

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

Probably that is the issue.

Edit:

In your action use JqGridRequest object to access request parameters:

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

{
....
}

And you can access the jqgrid request parameters using the following properties:

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

Answer 3

Use

postData: { my_var: "my_value" }

Answer 4

Ideally the jqGrid gets created once, and all subsequent calls only refresh it. So the post parameters are not likely to be posted each time.

The best approach is to keep the grid holding element (eg: <table id="jqgrid">) in a html element like a div and clear the div and initialize it with "<table id="jqgrid">", and then load the grid. This will recreate the grid with your desired post data.

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

This will really work for you.