Passing custom http variables to serverside ASP .Net MVC

Passing custom http variables to serverside ASP .Net MVC

jimkielyjimkiely Posts: 9Questions: 10Answers: 0

I posted this question on stackoverflow but it was not answered.
http://stackoverflow.com/questions/25271717/datatable-js-ajax-pass-variable-to-c-sharp-serverside-method

I'm trying to pass parameters to the serverside and I can not get it to work. I looked at the custom http variables example and I can not get the variables to show up on the serverside.

This question has an accepted answers - jump to answer

Answers

  • rberlin01rberlin01 Posts: 3Questions: 1Answers: 0

    Are you trying to retrieve information from the table to send to the server side method after initialization?

  • jimkielyjimkiely Posts: 9Questions: 10Answers: 0

    I need to pass information in dropdownlists and all the paging, sorting, info.
    .

  • wjhumphreyswjhumphreys Posts: 52Questions: 9Answers: 5
    edited August 2014 Answer ✓

    There is a way to do this with the normal Ajax call but I came across all sorts of issues I didn't like. Datatables give you the facility to make your own Ajax call which is now how I do It. Note that this method will only pass parameters YOU now specify. In this example I dont pass any of the built in Datatables search etc as I dont use them.

     tableFoo = $("#table-foo").DataTable({
        "serverSide": true,
        "ajax": function (data, callback, settings) {  // Make the Ajax call ourselves
            $.ajax({
              url: "/AjaxHandler/Get",
              type: "POST",
              dataType: "json",
              data: {
                draw: data.draw,   // Needed for paging
                start: data.start,    // Needed for paging
                length: data.length, // Needed for paging
                fooId:  $("#fooId").val(),
                fooWhatever: $("#fooWhatever").val(),
              },
              beforeSend: function (xhrObj) {
                // Whatever
              }
            })
            .done(function (data, textStatus, jqXHR) {
    
                // Callback function that must be executed when the required data 
                // has been obtained. 
                // That data should be passed into the callback as the only parameter.
                callback(data);
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
              alert(errorThrown);
            })
            .always(function (data, textStatus, jqXHR) {
              // Whatever
            });
          },
    ............................... rest of
    
    

    Also see http://datatables.net/examples/server_side/custom_vars.html

  • jimkielyjimkiely Posts: 9Questions: 10Answers: 0
    edited August 2014

    wjhumphreys,
    This worked great expect that the paging is not working correctly. I'm handling the paging on the serverside but paging information below the table is not getting populated correctly.

    "Showing 0 to 0 of 0 entries (filtered from NaN total entries)" and the number of Pages is inaccurate.

    I'm so new to this so. Can I make an ajax call with variables and allow the sorting and paging to be handled clientside? Or should I handle everthing serverside and pass back paging data so that datables knows how to handle it?

    Here's the code:
    var tblSpecification = $('#tblSpecification').DataTable({
    "serverSide": true,
    "ajax": function (data, callback, settings) { // Make the Ajax call ourselves
    $.ajax({
    url: "../../Search/Specification",
    type: "POST",
    dataType: "json",
    data: {
    draw: data.draw, // Needed for paging
    start: data.start, // Needed for paging
    length: data.length, // Needed for paging
    compareType: $('#ddlComparison').val(),
    specData: $('#ddlSpecData').val(),
    specData2: $('#ddlSpecData2').val(),
    specType: $('#ddlSpecType').val(),
    partType: $('#ddlPartType').val(),
    },
    beforeSend: function (xhrObj) {
    // Whatever
    }
    })
    .done(function (data, textStatus, jqXHR) {

                // Callback function that must be executed when the required data
                // has been obtained.
                // That data should be passed into the callback as the only parameter.
                callback(data);
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                alert(errorThrown);
            })
            .always(function (data, textStatus, jqXHR) {
                // Whatever
            });
        },
        "autoWidth": false,
        "deferRender": true,
        "columns": [
            { "title": "Spec Type", "data": "SpecType" },
            { "title": "Spec Data", "data": "SpecData", "visible": false  },
            { "title": "Spec Data", "data": "SpecDataString" },
            { "title": "Part Type", "data": "PartTypeName" },
            { "title": "Part Number", "data": "PartNumber" },
            { "title": "Note", "data": "Note" },
            {
                "title": "", "searchable": false, "sortable": false, "render": function (data, type, row) {
                    return '<a href=\"#\" class=\"btn btn-info\">Part Details</a>';
                }
            }
        ]
    });
    
  • jimkielyjimkiely Posts: 9Questions: 10Answers: 0

    Nevermind! I removed the serverside and i'm using ajax.reload whenever I need to grab new data.

This discussion has been closed.