CODEWITHSUNDEEP
javascriptajaxasp.net-mvcjsonjquery
Vahid Akbari
Vahid Akbari

Reputation: 189

Anti Forgery Token and Ajax JSON.stringify Post Does not Work

I tried to use Anti Forgery token with JSON.stringify and i check many site but i failed to success.this is my ajax code that delete some info without any problem.now i add anti forgery token and i dont know how to change my ajax code to work fine.i also added ValidateAntiForgeryToken to my action. 

<script src="../../Scripts/jquery-1.8.3.js"></script>
<script src="../../Scripts/jquery-ui-1.9.2.custom.js"></script>
    <script>
        $(function () {
            $(":checkbox").change(function () {
                var $this = $(this);
                if ($this.is(":checked")) {
                    $this.closest("tr").addClass("SlectedtRow");
                } else {
                    $this.closest("tr").removeClass("SlectedtRow");
                }
            })
            var tittle = '';
            var url = '';
            $("#dialog").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                buttons: [
                    {
                        text: "بلی",
                        click: function () {
                            Delete();
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "خیر",
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
            var IsActive
            // Link to open the dialog
            $(".insertBtn").click(function (event) {

                var IsSelected = false;
                var ModalText = "  آیا کاربر ";
                $('#userForm input:checked').each(function () {
                    ModalText += this.value + " - "
                    IsSelected = true;

                });

                if (IsSelected) {
                    document.getElementById('ErrorContent').style.display = "none";
                    ModalText = ModalText.slice(0, -2);
                    if (this.id == 'DeleteUser') {
                        ModalText += " حذف گردد  "
                        tittle = 'حذف کاربر'
                        url = '@Url.Action("DeleteUser", "UserManagement")';
                    }
                    else if (this.id == 'InActiveUser') {
                        ModalText += " غیر فعال گردد  "
                        tittle = 'تغییر فعالیت کاربر '
                        url = '@Url.Action("ChangeActiveStatus", "UserManagement")';
                    IsActive = false;
                }
                else if (this.id == 'ActiveUser') {
                    ModalText += "  فعال گردد  "
                    tittle = 'تغییر فعالیت کاربر '
                    url = '@Url.Action("ChangeActiveStatus", "UserManagement")';
                    IsActive = true;
                }
        $('#ModalMessgae').text(ModalText);


        $("#dialog").dialog("open");
        $("#ui-id-1").text(tittle);
        event.preventDefault();

    }        })

            function Delete() {
                var list = [];
                $('#userForm input:checked').each(function () {
                    list.push(this.id);

                });
                var parameters = {};
                if (url == '@Url.Action("DeleteUser", "UserManagement")') {
                parameters = JSON.stringify(list);
            }
            else {
                parameters = JSON.stringify({ "userId": list, "ISActive": IsActive });
            }
            $.ajax({
                url: url,
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                dataType: "html",
                traditional: true,
                data: parameters,
                success: function (data, textStatus, jqXHR) {
                    $('#updateAjax').html(data);
                },
                error: function (data) {
                    $('#updateAjax').html(data);

                }
            });   //end ajax
        }
        });
    </script>

//html

@using Common.UsersManagement.Entities;
@model IEnumerable<VwUser>
@{
    Layout = "~/Views/Shared/Master.cshtml";
}

    <form id="userForm">
        <div id="updateAjax">
@Html.AntiForgeryToken()
            @if (string.IsNullOrWhiteSpace(ViewBag.MessageResult) == false)
            {
                <div class="@ViewBag.cssClass">
                    @Html.Label(ViewBag.MessageResult as string)
                </div>
                <br />
            }
            <table class="table" cellspacing="0">
                @foreach (VwUser Item in Model)
                {   
                    <tr class="@(Item.IsActive ? "tRow" : "Disable-tRow")">
                        <td class="tbody">
                            <input type="checkbox" id="@Item.Id" name="selected"  value="@Item.FullName"/></td>
                        <td class="tbody">@Item.FullName</td>
                        <td class="tbody">@Item.Post</td>
                        <td class="tbody">@Item.Education</td>
                    </tr>
                }
            </table>
        </div>
        <br />
        <br />
    @if (!Request.IsAjaxRequest())
    {
        <div class="btnContainer">
            <a href="#" id="DeleteUser" class="insertBtn">delete  </a>
            <br />
            <br />
        </div>}

Upvotes: 0

Views: 5509

Answers (3)

Vahid Akbari
Vahid Akbari

Reputation: 189

wow this is Complete solution with extra Information: http://weblogs.asp.net/dixin/anti-forgery-request-recipes-for-asp-net-mvc-and-ajax

Upvotes: -1

Shanthini
Shanthini

Reputation: 197

This might helpful for someone. All you need to do is, add the following lines in your jquery and cshtml wherever it is appropriate.

jquery:

var token = $('#userForm input[name="__RequestVerificationToken"]').val();

// ....
//include {__RequestVerificationToken:token} in your json result. 
//For example,

JSON.stringify({ __RequestVerificationToken:token, "userId": list, "ISActive": IsActive })

cshtml:

<form id="userForm"> 
@Html.AntiForgeryToken()
        <div id="updateAjax">
    ...
</div>
</form>

Also, remove 

contentType: "application/json; charset=utf-8"

Please read the below link https://nozzlegear.com/blog/send-and-validate-an-asp-net-antiforgerytoken-as-a-request-header

Upvotes: 3

Gecko
Gecko

Reputation: 1344

Antiforgerytokens aren't checked by default with AJAX POST. You can enable it by overriding OnAuthorization like so: AJAX AntiforgeryToken

Upvotes: 2

Related Questions