CODEWITHSUNDEEP
c#ajaxasp.net-mvcdatatables
jahrentorp
jahrentorp

Reputation: 155

No data is sent from form to action

I'm using DataTables.js in an ASP.NET MVC application. I want to handle things on the server in an action but there seems to be no data sent from the form in the view to the action. I have built some code to test this from this example: https://www.c-sharpcorner.com/article/using-datatables-grid-with-asp-net-mvc/

I have a simple view:

<body>
  <div class="container">
      <br />
      <div style="width:90%; margin:0 auto;">
        <table id="demoGrid" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0">
          <thead>
            <tr>
              <th>CustomerID</th>
              <th>CompanyName</th>
              <th>ContactName</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
</body>

The DataTable is set up like this:

$(document).ready(function () {
  $("#demoGrid").DataTable({
    "processing": true,
    "serverSide": true,
    "filter": true,
    "orderMulti": false,
    "pageLength": 5,
    "ajax": {
      "url": "/MOF2/Demo/LoadData",
      "type": "POST",
      "datatype": "json"
    }
  });
});

The action does not contain much yet:

public ActionResult LoadData()
{
  var draw = Request.Form.GetValues("draw").FirstOrDefault();
  var start = Request.Form.GetValues("start").FirstOrDefault();
  var length = Request.Form.GetValues("length").FirstOrDefault();
  return View();
}

After reading a bit on https://datatables.net/ and the example mentioned above i expected to be able to get some values here. For instance I expected length to be 5. I get nothing though. For instance Request.Form.GetValues("length") is null. If i check Request.Form.AllKeys i get an empty string. What can cause this? What is needed for form data to be sent by JavaScript and Ajax so it can be read by Request.Form.GetValues()?

Note: I have downloaded an example project mentioned in a comment to the example above and it works as expected. I have also stripped away most of the code not used in the example from that project and it still works. I can't really find the difference between the example project and my project though. The example project can be found here: https://github.com/saineshwar/DataTablesGridExample

Upvotes: 0

Views: 523

Answers (1)

jahrentorp
jahrentorp

Reputation: 155

A colleague of mine found out the solution. The URL in the ajax object should be changed so that it uses @Url.Action() like this:

$(document).ready(function () {
  $("#demoGrid").DataTable({
    "processing": true,
    "serverSide": true,
    "filter": true,
    "orderMulti": false,
    "pageLength": 5,
    "ajax": {
      "url": "@Url.Action("LoadData", "Demo")",
      "type": "POST",
      "datatype": "json"
    }
  });
});

The project uses Cookie less ASP.NET and that means, among other things, that the session id is stored in the URL. When I pointed out the URL directly the session got lost and with it the form data.

I'm not entirely sure how session, session id and form data exactly ties together here but using @Url.Action() seems to be the solution in my case.

I'm answering my own question here so others who run into the same problem can see how it was solved for me.

Upvotes: 1

Related Questions