rayan
rayan

Reputation: 75

why sometime ajax success function doesn't work in asp.net mvc?

In my project, I've used datatable for crud operation.but I have a problem sometimes didn't work success function, of course, I saw my network tab I received { status":true} but datatable didn't reload and I redirected to the blank page.I've added alert function into success function but my alert function didn't work.sometimes I got this error The required anti-forgery form field "__RequestVerificationToken" is not present. when I want to delete a record from a table. and also sometimes create and edit give me { status":true} message.

enter image description here

// GET: Admin/Users/Delete/5
public ActionResult Delete(string id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    User user = db.User.Find(id);
    UserViewModel userViewModel=new UserViewModel();
    userViewModel.UserId = user.Id;
    userViewModel.UserName = user.UserName;
    userViewModel.FirstName = user.FirstName;
    userViewModel.LastName = user.LastName;
    userViewModel.Email = user.Email;
    userViewModel.IsActive = user.IsActive;
    userViewModel.Gender = user.Gender;
    userViewModel.PhoneNumber = user.PhoneNumber;
    userViewModel.Address = user.Address;
    if (user == null)
    {
        return HttpNotFound();
    }
    return PartialView(userViewModel);
}

// POST: Admin/Users/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(string id)
{
    bool status=false;
    User user = db.User.Find(id);
    db.User.Remove(user);
    db.SaveChanges();

    return Json(new { status = true }, JsonRequestBehavior.AllowGet);
}

==========================

@model  IEnumerable<Dentistry.Areas.ViewModels.UserViewModel>


@{
    ViewBag.Title = "مدیریت کاربران";

}

@*<h2>مدیریت کاربران</h2>*@

@section Styles{

    <link href="~/Areas/admin/assets/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Areas/admin/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap-rtl.css" rel="stylesheet" type="text/css" />
    <link href="~/Areas/admin/assets/global/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css" />
    <link href="~/Areas/admin/assets/global/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css" />
}

<style>
    .table-checkable tr > td:first-child, .table-checkable tr > th:first-child {
        text-align: center;
        max-width: 50000px;
        min-width: 40px;
        padding-right: 0;
        padding-left: 0;
    }

    #delete .modal-header {
        border-bottom: 1px solid #EFEFEF;
        background: #e7505a !important;
    }

    .modal {
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
    }
</style>


<div class="col-md-12 col-sm-12">
    <!-- BEGIN EXAMPLE TABLE PORTLET-->
    <div class="portlet box green">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-cogs"></i>کاربران
            </div>
            <div class="actions">
                <a href="/Admin/Users/Create" data-target="#create" data-toggle="modal" class="btn btn-default btn-sm">
                    <i class="fa fa-plus"></i> کاربر جدید
                </a>
                <a href="javascript:window.print()" class="btn btn-default btn-sm">
                    <i class="fa fa-print"></i> چاپ
                </a>
            </div>
        </div>
        <div class="portlet-body">
            <table class="table table-striped table-bordered table-hover table-checkable order-column myDatatable">
                <thead>
                    <tr>
                        @*<th class="table-checkbox">
                                <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                    <input type="checkbox" class="group-checkable" data-set="myDatatable .checkboxes" />
                                    <span></span>
                                </label>
                            </th>*@
                        <th>نام کاربری </th>
                        <th>نام </th>
                        <th>نام خانوادگی</th>
                        <th>جنسیت</th>
                        <th>ایمیل</th>
                        <th>وضعیت</th>
                        <th>شماره تماس</th>
                        <th>آدرس</th>
                        <th>ویرایش</th>
                        <th>حذف</th>
                    </tr>
                </thead>


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



<div id="edit" class="modal fade" tabindex="-1" data-width="760">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">ویرایش کاربران</h4>
    </div>
    <div class="modal-body">
        <div class="row">

        </div>
    </div>

</div>

<div id="delete" class="modal fade" tabindex="-1" data-width="760">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">آیا قصد حذف این کاربر را دارید؟</h4>
    </div>
    <div class="modal-body">
        <div class="row">

        </div>
    </div>

</div>

<div id="create" class="modal fade" tabindex="-1" data-width="760">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title"><i class="fa fa-user-plus"></i>   کاربر جدید </h4>
    </div>
    <div class="modal-body">


    </div>

</div>

<!-- BEGIN Portlet PORTLET-->
<!-- END Portlet PORTLET-->




@section scripts{


    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <script src="~/Areas/admin/assets/global/scripts/datatable.js" type="text/javascript"></script>
    <script src="~/Areas/admin/assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
    <script src="~/Areas/admin/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>

    <script src="~/Areas/admin/assets/pages/scripts/table-datatables-managed.min.js" type="text/javascript"></script>
    <!-- END PAGE LEVEL SCRIPTS -->
    <script src="~/Areas/admin/assets/global/plugins/bootstrap-modal/js/bootstrap-modalmanager.js" type="text/javascript"></script>
    <script src="~/Areas/admin/assets/global/plugins/bootstrap-modal/js/bootstrap-modal.js" type="text/javascript"></script>

    <!-- BEGIN PAGE LEVEL SCRIPTS -->
    <script src="~/Areas/admin/assets/pages/scripts/ui-extended-modals.min.js" type="text/javascript"></script>

    <script>

        $(document).ready(function () {

            var oTable = $('.myDatatable').DataTable({
                "ajax": "/Users/GetUsers",
                "language": {
                    "search": "جستجو:",
                    "lengthMenu": " تعداد _MENU_ رکورد در هر صفحه"
                },
                "autoWidth": true,
                "columns": [

                    { "data": "UserName", },
                    { "data": "FirstName", },
                    { "data": "LastName", },
                    { "data": "Gender", },
                    { "data": "Email", },
                    { "data": "IsActive", },
                    { "data": "PhoneNumber", },
                    { "data": "Address", },

                    {
                        "data": "UserId", "width": "50px", "render": function (data) {
                            //
                            return '<a class="btn btn-info fa fa-pencil" data-toggle="modal" data-dismiss="modal" data-target="#edit"  href="/Admin/Users/Edit/' + data + '"></a>';
                        }
                    },
                    {
                        "data": "UserId", "width": "50px", "render": function (data) {
                            return '<a class="btn btn-danger fa fa-trash" data-toggle="modal" data-dismiss="modal" data-target="#delete" href="/Admin/Users/Delete/' + data + '"></a>';
                        }
                    }
                    //}, {
                    //    "data": 'IsActive',
                    //    render: function (data, type, row) {
                    //        return '<span class="label label-sm label-success"> ' + data + ' </span>'
                    //    }
                    //}
                ], "columnDefs": [
                    {
                        "render": function (data, type, row) {
                            return '<span class="label label-sm label-success"> ' + data ? 'آقا' : 'خانم' + ' </span>' ;
                        },
                        "targets": 3 // replace 0 by your column if
                    }, {
                        "render": function (data, type, row) {
                            return data ? 'فعال' : 'غیرفعال';
                        },
                        "targets": 5
                    }
                ]
                //"fnCreatedRow": function (row, data, dataIndex) {
                //    var div = document.createElement("span");

                //    $(row).children("td:nth-child(1)").append(div);
                //}

            });

            $('body').on('hidden.bs.modal', '.modal', function () {

                $(this).removeData('bs.modal');
            });

        });


    </script>
}

===================================

  @model Dentistry.Areas.ViewModels.UserViewModel

@*<h2>حذف</h2>

    <h3>آیا شما قصد حذف این سطر را دارید؟</h3>*@
@*<div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
        </button>
        <h4 class="modal-title custom_align" id="Heading">آیا شما قصد حذف این سطر را دارید؟</h4>
    </div>*@

@using (Html.BeginForm("Delete", "Users", FormMethod.Post, new { @class = "popupForm" }))
{
    @Html.AntiForgeryToken()
    if (Model != null && Model.UserId != string.Empty)
    {
        @Html.HiddenFor(a => a.UserId, new { id = "userId" })
        <div class="col-md-6">
            <div class="form-group">
                <label>نام کاربری : </label>
                @Html.DisplayFor(model => model.UserName)
            </div>
            <div class="form-group">
                <label>نام : </label>
                @Html.DisplayFor(model => model.FirstName)
            </div>
            <div class="form-group">
                <label>نام خانوادگی : </label>
                @Html.DisplayFor(model => model.LastName)
            </div>
            <div class="form-group">
                <label>شماره همراه : </label>
                @Html.DisplayFor(model => model.PhoneNumber)
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>جنسیت</label>
                @Html.DisplayFor(model => model.Gender)
            </div>
            <div class="form-group">
                <label>وضعیت : </label>
                @Html.DisplayFor(model => model.IsActive)
            </div>
            <div class="form-group">
                <label>ایمیل : </label>
                @Html.DisplayFor(model => model.Email)
            </div>
            <div class="form-group">
                <label>آدرس : </label>
                @Html.DisplayFor(model => model.Address)
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <button type="submit" class="btn  btn-success btn-flat btn-md"><span class="fa fa-check"></span>  بله  </button>
                <button type="button" class="btn btn-danger btn-flat btn-md"><span class="fa fa-close"></span> خیر</button>
            </div>
        </div>
    }
}

<script>

    $(function () {
        //var form = $('#userId');
        //console.log(form);
        console.log($('#userId').val());
        $(".popupForm").on("submit", function (e) {
            e.preventDefault();
           // e.stopPropagation();
            SubmitDeleteForm();

        });
    });
    function SubmitDeleteForm() {
        var formData = $(".popupForm").serialize();
        var url = "/Users/Delete";
           var form = $('.popupForm');
           var __RequestVerification [email protected]();
           var token = $(__RequestVerification, form).val();
        //  var form = $('.popupForm')[0].action;
        //   console.log(form.val());
        //var formdata = false;
        //if (window.FormData) {
        //    formdata = new FormData(form);
        // alert(formdata);
        //}
        var userId = JSON.stringify({ id: $("#userId").val() });
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: url,
            data: {

                __RequestVerificationToken: token,
                id: userId

            },

            cache: false,
            //contentType: "application/json; charset=utf-8",
            //  enctype: 'multipart/form-data',
            processData: false,
            success: function (data) {
                if (data.status == true) {
                    //alert('hiho');
                    $('#edit').modal('hide');
                    //window.location.href = "/Admin/Users/Index";
                    alert('hi');
                    $('.myDatatable').DataTable().ajax.reload();
                }
            },
            error: function (data) {
                console.log(data);
            }

        });
    }



</script>

Upvotes: 0

Views: 473

Answers (1)

Zain Ahmad Khan
Zain Ahmad Khan

Reputation: 497

Please remove this line

[ValidateAntiForgeryToken]

because you are not sending anti forgery key. send anti forgery key in ajax parameters or remove this.

for sending add this parameter in request '__RequestVerificationToken' with its value which you will generate using
var token = Html.AntiForgeryToken();

Upvotes: 1

Related Questions