Posting an ASP.NET MVC Validation token with fnServerData

Posting an ASP.NET MVC Validation token with fnServerData

modenmoden Posts: 11Questions: 4Answers: 0

I am trying to use HTTP POST to populate datatables.

Example:

$('#completedFieldingsGrid').dataTable({

        "bServerSide": true,
        "sAjaxSource": "Home/CompletedFieldings",
        "bProcessing": true,
        "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
            oSettings.jqXHR = $.ajax({
                "dataType": 'json',
                "type": "POST",
                "url": sSource,
                "data": aoData,
                "success": fnCallback
            })
        },
        "aoColumnDefs": [
                           {
                               "sName": "FIELDING_ID", "aTargets": [0],
                               "sWidth": "5%",
                               "mRender": function (data, type, full) {
                                   return '<a class="glyphicon glyphicon-pencil" href=' + '@Url.Action("Edit", "Fielding")' + '/' + data + '></a>';
                               }
                           },
                           { "sName": "PARENT_UIC", "aTargets": [1] },
                           { "sNamea": "FIELDING_DESCRIPTION", "aTargets": [2] },
                           { "sName": "ADD_USERNAME", "aTargets": [3] },
                           { "sName": "COMPLETE_USERNAME", "aTargets": [4] },
                           { "sName": "COMPLETE_DATETIME", "aTargets": [5] }
        ]

    });

I need submit an Antiforgery token
Example:
@Html.AntiForgeryToken()

Is there anyway to do this using datatables.net?

Answers

  • modenmoden Posts: 11Questions: 4Answers: 0

    I was able to figure out how to submit the antiforgey token and get the controller to accpt it:

    Example:

    $('#completedFieldingsGrid').dataTable({

            "bServerSide": true,
            "sAjaxSource": "Home/CompletedFieldings",
            "bProcessing": true,
            "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
                oSettings.jqXHR = $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": { '__RequestVerificationToken': $('input[name=__RequestVerificationToken]').val(), jsonRequest: aoData },
                    "success": fnCallback
                })
            },
            "aoColumnDefs": [
                               {
                                   "sName": "FIELDING_ID", "aTargets": [0],
                                   "sWidth": "5%",
                                   "mRender": function (data, type, full) {
                                       return '<a class="glyphicon glyphicon-pencil" href=' + '@Url.Action("Edit", "Fielding")' + '/' + data + '></a>';
                                   }
                               },
                               { "sName": "PARENT_UIC", "aTargets": [1] },
                               { "sNamea": "FIELDING_DESCRIPTION", "aTargets": [2] },
                               { "sName": "ADD_USERNAME", "aTargets": [3] },
                               { "sName": "COMPLETE_USERNAME", "aTargets": [4] },
                               { "sName": "COMPLETE_DATETIME", "aTargets": [5] }
            ]
    
        });
    

    I can see the controller code running and returning rows:

    [HttpPost]]

        [ValidateAntiForgeryToken]
        public ActionResult CompletedFieldings(jQueryDataTableParamModel param)
        {
            CompetedFieldingGridRows af = new CompetedFieldingGridRows(param.sSearch);
            var displayedFieldings = af.Skip(param.iDisplayStart).Take(param.iDisplayLength);
            return Json(new
            {
                sEcho = param.sEcho,
                iTotalRecords = af.Count(),
                iTotalDisplayRecords = af.Count(),
                aaData = displayedFieldings
            },
            JsonRequestBehavior.AllowGet);
        }
    

    However, the grid renders with no data.

  • modenmoden Posts: 11Questions: 4Answers: 0

    OK, I found out that when I POST the the aoData parameters (sSearch, iDisplayStart, iDisplayLength, etc. are not getting set. Is there something I am missing to do this?

  • modenmoden Posts: 11Questions: 4Answers: 0

    OK, I figured out how to get it to work using the fnServerParams

    Example:...

    $('#completedFieldingsGrid').dataTable({

            "bServerSide": true,...
            "sAjaxSource": "Home/CompletedFieldings",
            "bProcessing": true,
            "fnServerParams": function (aoData) {
                aoData.push({ "name": "__RequestVerificationToken", "value": $('input[name=__RequestVerificationToken]').val() });
            },
            "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
                oSettings.jqXHR = $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data":  aoData,
                    "success": fnCallback
                })
            },
            "aoColumnDefs": [
                               {
                                   "sName": "FIELDING_ID", "aTargets": [0],
                                   "sWidth": "5%",
                                   "mRender": function (data, type, full) {
                                       return '<a class="glyphicon glyphicon-pencil" href=' + '@Url.Action("Edit", "Fielding")' + '/' + data + '></a>';
                                   }
                               },
                               { "sName": "PARENT_UIC", "aTargets": [1] },
                               { "sNamea": "FIELDING_DESCRIPTION", "aTargets": [2] },
                               { "sName": "ADD_USERNAME", "aTargets": [3] },
                               { "sName": "COMPLETE_USERNAME", "aTargets": [4] },
                               { "sName": "COMPLETE_DATETIME", "aTargets": [5] }
            ]
        });
    
This discussion has been closed.