Request.Form .NET Core

Question

I created a view that contains a jQuery datatable bind with server-side and put 3 drop-downs as a filter i use Request.form to get data-table variables (draw,length,start) but i can't get the value of the 3 drop-downs

Code

View

<div class="row">
<div class="col-lg-12">
    <div class="card card-outline-info">
        
        <div class="card-body">

            <div class="form-body">
                @*<h3 class="card-title">Person Info</h3>*@
                
                <div class="row p-t-20" style="padding:0px">
                    <div class="col-4">
                        <select class="form-control custom-select" id="ddlUsers" name="ddlUsers" onchange="FilterData()"
                                asp-items="@((SelectList)ViewBag.Users)"></select>

                    </div>
                    <div class="col-4">
                        <select class="form-control custom-select" id="ddlPages" name="ddlPages" onchange="FilterData()"
                                asp-items="@((SelectList)ViewBag.Pages)"></select>

                    </div>
                    <div class="col-4">
                        <select class="form-control custom-select" id="ddlDBActions" name="ddlDBActions" onchange="FilterData()"
                                asp-items="@((SelectList)ViewBag.DB_Actions)"></select>

                    </div>
                    <div class="table-responsive m-t-40">
                        <table id="tblLogs" class="display nowrap table table-hover table-striped table-bordered" cellspacing="0" width="100%">
                            <thead>
                                <tr>Columns
                                </tr>
                            </thead>


                        </table>
                    </div>
                </div>
                <!--/row-->

            </div>


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

Script

var table = $('#tblLogs').DataTable({
    "processing": true, // for show progress bar
    "serverSide": true, // for process server side
    "filter": false, // this is for disable filter (search box)
    "orderMulti": false, // for disable multiple column at once
    "pageLength": 10,
    "bSort": false,
        "ajax": {
            url: "@Url.Action("LoadData", "ActivityLog")",
            type: 'POST'

},

    "drawCallback": function (settings) {
        swal.close();
    },
"columns": [
    { "data": "timestampStr" },
    { "data": "pageName" },
    { "data": "userName" },  
    { "data": "dB_Action_Name" }

],
 // bFilter: false, bInfo: false,

dom: 'Bfrtip',
buttons: [
    // 'copy', 'csv',
    //'excel', 'pdf', 'print'
],

});

script

  function FilterData() {
    var dt = { userID: $("#ddlUsers").val(), PageID: $("#ddlPages").val(), ActionID: $("#ddlDBActions").val() };
    $.ajax({
        type: "POST",
        url: "@Url.Action("LoadData", "ActivityLog")",
       // data: '{userID: '+ $("#ddlUsers").val() + ',PageID: ' + $("#ddlPages").val() + ',ActionID: ' + $("#ddlDBActions").val() +'}',
        data: dt,
        dataType: "json",
         success: function (response) {

CS

 public async Task<JsonResult> LoadData(int? userID,int? PageID, int? ActionID)
    {
        try
        {
            //Creating instance of DatabaseContext class  
            var dict = Request.Form. ToDictionary(x => x.Key, x => x.Value.ToString());
            
         var draw = dict["draw"];
                var start = dict["start"];
                var length = dict["length"];
              //  var sortColumn = dict["columns[" + dict["order[0][column]"] + "][name]"];
              //  var sortColumnDir = dict["order[0][dir]"];
              //  var searchValue = dict["search[value]"];


                //Paging Size (10,20,50,100)    
                int pageSize = length != null ? Convert.ToInt32(length) : 0;
                int skip = start != null ? Convert.ToInt32(start) : 0;
                int recordsTotal = 0;
            var model=new DataTableAjaxPostModel();
            model.draw=int.Parse( draw);
            model.length=int.Parse(length);
             model.start=int.Parse(start);
          model.ActionID=ActionID;
            model.PageID=PageID;
            model.UserID=userID;
            var res = await ClientSearchFunc(model);

i use the same function LoadData for initial datatable (Working)

but in the onchange for the dropdowns i lose the datatable info how to get both in request.form

i tried to add form tag but i get the same result

.NET Core 2.2 OnChange Result OnLoad Result

Answer 1

Here is a demo to show pass datatable data and ddl values:

View:

div class="row">
    <div class="col-lg-12">
        <div class="card card-outline-info">

            <div class="card-body">

                <div class="form-body">

                    <div class="row p-t-20" style="padding:0px">
                        <div class="col-4">
                            <select class="form-control custom-select" id="ddlUsers" name="ddlUsers" onchange="FilterData()">
                                <option value="1">Volvo</option>
                                <option value="2">Saab</option>
                                <option value="3">Mercedes</option>
                                <option value="4">Audi</option>
                            </select>

                        </div>
                        <div class="col-4">
                            <select class="form-control custom-select" id="ddlPages" name="ddlPages" onchange="FilterData()">
                                <option value="11">Volvo</option>
                                <option value="22">Saab</option>
                                <option value="33">Mercedes</option>
                                <option value="44">Audi</option>
                            </select>

                        </div>
                        <div class="col-4">
                            <select class="form-control custom-select" id="ddlDBActions" name="ddlDBActions" onchange="FilterData()">
                                <option value="111">Volvo</option>
                                <option value="222">Saab</option>
                                <option value="333">Mercedes</option>
                                <option value="444">Audi</option>
                            </select>

                        </div>
                        <div>
                            <table id="dataList" class="table table-striped table-bordered" style="width:100%">
                                <thead class="thead-dark">
                                    <tr class="table-info">
                                        <th>id</th>
                                        <th>name</th>
                                        <th>age</th>
                                        <th>phone</th>
                                        <th>email</th>
                                    </tr>
                                </thead>
                            </table>
                            <button onclick="submitdata()">submit</button>
                        </div>
                    </div>

                </div>
                

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

js:

 @section scripts{
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">

        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
        <script type="text/javascript">
            $('#dataList').DataTable({
                ajax: {
                    url: '/Test/Data',
                    
                },
               
                columns: [
                    { data: 'id' },
                    { data: 'name' },
                    { data: 'age' },
                    { data: 'phone' },
                    { data: 'email' }
                ]
            })
            function submitdata() {
                var table = $('#dataList').DataTable();
                var dd = table.rows().data().toArray();
                var data = new Object();
                data.TestDTs = dd;
                data.userID = $("#ddlUsers :selected").val();
                data.PageID = $("#ddlPages :selected").val();
                data.ActionID = $("#ddlDBActions :selected").val();

                $.ajax({
                    type: "POST",
                    contentType: "application/json;",
                    url: '/Test/GetDataTableData',
                    data: JSON.stringify(data),
                    success: function () {
                        alert('success');
                    },
                    error: function () {
                        alert('failure');
                    }
                });
            }

        </script>
    }

Controller:

[HttpPost]
        public IActionResult GetDataTableData([FromBody] PassData passData) {
            return Ok();
        }

PassData:

public class PassData
    {
        public PassData() {
            TestDTs = new List<TestDT>();
        }
        public IEnumerable<TestDT> TestDTs { get; set; }
        public string userID { get;set;}
        public string PageID { get; set; }
        public string ActionID { get; set; }
    }
}

result: