ASP.MVC The required anti-forgery form field errors

Question

I'm Beginner in MVC and Bootstrap. I Want Create Form Like This

I Want When user Click in New Button open Create View In Modal Bootstrap and when user Click in Edit Link Open Edit View in Modal Bootstrap . I Write this Code

// <![CDATA[
(function ($) {
    $.bootstrapModalAjaxForm = function (options) {
        var defaults = {
            renderModalPartialViewUrl: null,
            renderModalPartialViewData: null,
            postUrl: '/',
            loginUrl: '/login',
            beforePostHandler: null,
            completeHandler: null,
            errorHandler: null
        };
        var options = $.extend(defaults, options);

        var validateForm = function (form) {

            var val = form.validate();
            val.form();
            return val.valid();
        };

        var enableBootstrapStyleValidation = function () {
            $.validator.setDefaults({
                highlight: function (element, errorClass, validClass) {
                    if (element.type === 'radio') {
                        this.findByName(element.name).addClass(errorClass).removeClass(validClass);
                    } else {
                        $(element).addClass(errorClass).removeClass(validClass);
                        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
                    }
                    $(element).trigger('highlited');
                },
                unhighlight: function (element, errorClass, validClass) {
                    if (element.type === 'radio') {
                        this.findByName(element.name).removeClass(errorClass).addClass(validClass);
                    } else {
                        $(element).removeClass(errorClass).addClass(validClass);
                        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
                    }
                    $(element).trigger('unhighlited');
                }
            });
        }

        var enablePostbackValidation = function () {
            $('form').each(function () {
                $(this).find('div.form-group').each(function () {
                    if ($(this).find('span.field-validation-error').length > 0) {
                        $(this).addClass('has-error');
                    }
                });
            });
        }

        var processAjaxForm = function (dialog) {
            $('form', dialog).submit(function (e) {
                e.preventDefault();

                if (!validateForm($(this))) {

                    return false;
                }


                if (options.beforePostHandler)
                    options.beforePostHandler();


                $.ajaxSetup({ cache: false });
                $.ajax({
                    url: options.postUrl,
                    type: "POST",
                    data: $(this).serialize(),
                    success: function (result) {
                        if (result.success) {
                            $('#dialogDiv').modal('hide');
                            if (options.completeHandler)
                                options.completeHandler();
                        } else {
                            $('#dialogContent').html(result);

                            $.validator.unobtrusive.parse("#dialogContent");
                            enablePostbackValidation();
                            processAjaxForm('#dialogContent');

                            if (options.errorHandler)
                                options.errorHandler();
                        }
                    }
                });
                return false;
            });
        };


        var mainContainer = "<div id='dialogDiv' class='modal fade'><div id='dialogContent'></div></div>";
        enableBootstrapStyleValidation(); 
        $.ajaxSetup({ cache: false });
        $.ajax({
            type: "POST",
            url: options.renderModalPartialViewUrl,
            data: options.renderModalPartialViewData,
            //contentType: "application/json; charset=utf-8",
          //  headers: { __RequestVerificationToken: $("input[name=__RequestVerificationToken]").val() },
            // dataType: "json",
            dataType: "html",
            complete: function (xhr, status) {
                var data = xhr.responseText;
                var data = xhr.responseText;
                if (xhr.status == 403) {
                    window.location = options.loginUrl; 
                }
                else if (status === 'error' || !data) {
                    if (options.errorHandler)
                        options.errorHandler();
                }
                else {
                    var dialogContainer = "#dialogDiv";
                    $(dialogContainer).remove();
                    $(mainContainer).appendTo('body');

                    $('#dialogContent').html(data); 
                    $.validator.unobtrusive.parse("#dialogContent");  
                    enablePostbackValidation();

                    $('#dialogDiv').modal({
                        backdrop: 'static', 
                        keyboard: true
                    }, 'show');

                    processAjaxForm('#dialogContent');
                }
            }
        });
    };
})(jQuery);
// ]]>

and controller

public partial class CityController : Controller
    {
        private ArchiveEntities db = new ArchiveEntities();

        // GET: /City/
        public virtual ActionResult Index()
        {
            return View(db.CITIES.ToList());
        }

        // GET: /City/Details/5
        public virtual ActionResult Details(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            CITy city = db.CITIES.Find(id);
            if (city == null)
            {
                return HttpNotFound();
            }
            return View(city);
        }

        // GET: /City/Create
        [ValidateAntiForgeryToken]
        public virtual ActionResult Create()
        {
            return View();
        }

        // POST: /City/Create
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public virtual ActionResult Create([Bind(Include = "CITY_ID,CITY_NAME,CITY_ABBR,REMARK")] CITy city)
        {
            if (this.ModelState.IsValid)
            {
                //todo: SaveChanges;
                db.CITIES.Add(city);
                db.SaveChanges();
                return Json(new { success = true });
            }
            this.ModelState.AddModelError("", "Error");
            return PartialView("_ModalPartialView", city);

            //if (ModelState.IsValid)
            //{
            //    db.CITIES.Add(city);
            //    db.SaveChanges();
            //   // return View(MVC.City.RenderModalPartialView());
            //}

            //return View();
        }


        // GET: /City/Edit/5
        [ValidateAntiForgeryToken]
        public virtual ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            CITy city = db.CITIES.Find(id);
            if (city == null)
            {
                return HttpNotFound();
            }
           // return View(city);
            return PartialView(Views._Edit, city);
        }

        // POST: /City/Edit/5
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public virtual ActionResult Edit([Bind(Include = "CITY_ID,CITY_NAME,CITY_ABBR,REMARK")] CITy city)
        {
            if (ModelState.IsValid)
            {
                db.Entry(city).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(city);
        }

        // GET: /City/Delete/5
        public virtual ActionResult Delete(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            CITy city = db.CITIES.Find(id);
            if (city == null)
            {
                return HttpNotFound();
            }
            return View(city);
        }

        // POST: /City/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public virtual ActionResult DeleteConfirmed(int id)
        {
            CITy city = db.CITIES.Find(id);
            db.CITIES.Remove(city);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
        [HttpGet]
        public virtual ActionResult List()
        {
            return PartialView(Views._CityList, db.CITIES.ToList());
        }

        [HttpPost]
        // [AjaxOnly]
       // [OutputCache(Location = OutputCacheLocation.None, NoStore = true)]
        public virtual ActionResult List2()
        {
            return PartialView(Views._CityList, db.CITIES.ToList());
        }

        public virtual ActionResult RenderModalPartialView()
        {

            return PartialView(viewName: "_ModalPartialView", model: new CITy() { CITY_ABBR = "", CITY_NAME = "" });
        }

        [HttpPost]
        //[AjaxOnly]
        public virtual ActionResult Index(CITy user) 
        {
            if (this.ModelState.IsValid)
            {
                //todo: SaveChanges;
                return Json(new { success = true });
            }

            this.ModelState.AddModelError("", "Error");
            return PartialView("_ModalPartialView", user);
        }
    }
}

and Index View

<div id="info">
    @Html.Action(MVC.City.List())
</div>
@section JavaScript
{
    <script type="text/javascript">

        function addToken(data) {
            data.__RequestVerificationToken = $("input[name=__RequestVerificationToken]").val();
            return data;
        }

        function EditPopup(id) {



            $.bootstrapModalAjaxForm({
                postUrl: '@postEditUrl',
                renderModalPartialViewUrl: '@renderModalPartialViewEditUrl',
                renderModalPartialViewData:addToken({ id: id }),
                loginUrl: '/login',
                beforePostHandler: function () {
                    alert('beforePost');
                },
                completeHandler: function () {

                    $.ajax({
                        type: "POST",
                        url: '@loadInfoUrl',
                        complete: function (xhr, status) {
                            var data = xhr.responseText;
                            if (xhr.status == 403) {
                                window.location = "/login";
                            }
                            else if (status === 'error' || !data || data == "nok") {
                                alert('error');
                            }
                            else {

                                $("#info").html(data);
                            }
                        }
                    });

                },
                errorHandler: function () {
                    alert("error");
                }
            });


        }
        $(function () {


            $('#btnCreate').click(function(e) {
                e.preventDefault(); //مي‌خواهيم لينك به صورت معمول عمل نكند

                $.bootstrapModalAjaxForm({
                    postUrl: '@postDataUrl',
                    renderModalPartialViewUrl: '@renderModalPartialViewUrl',
                    renderModalPartialViewData: {},
                    loginUrl: '/login',
                    beforePostHandler: function() {
                        alert('beforePost');
                    },
                    completeHandler: function() {

                        $.ajax({
                            type: "POST",
                            url: '@loadInfoUrl',
                            complete: function (xhr, status) {
                                var data = xhr.responseText;
                                if (xhr.status == 403) {
                                    window.location = "/login";
                                }
                                else if (status === 'error' || !data || data == "nok") {
                                    alert('error ajax');
                                }
                                else {

                                    $("#info").html(data);
                                }
                            }
                        });
                        // alert('completeHandler');


                    },
                    errorHandler: function() {
                        alert("error");
                    }
                });
            });


        });
    </script>
}

and _CityList

 @model IEnumerable<TestTwiter.Models.CITy>


    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.CITY_NAME)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CITY_ABBR)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.REMARK)
            </th>
            <th></th>
        </tr>

    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.CITY_NAME)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CITY_ABBR)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.REMARK)
            </td>
            <td>
                <span onclick="EditPopup(@item.CITY_ID)">Edit</span>|||||
                <a href="JavaScript:void(0)" onclick="EditPopup(@item.CITY_ID)" >Edit</a>
                @*@Html.ActionLink("Edit", "Edit", new { id=item.CITY_ID }) |*@
                @Html.ActionLink("Details", "Details", new { id=item.CITY_ID }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.CITY_ID })
            </td>
        </tr>
    }

    </table>

and _ModalPartialView

    @model TestTwiter.Models.CITy
    @{

    }
    @using (Html.BeginForm())
    {
        @Html.ValidationSummary(true, null, new { @class = "alert alert-warning" })
        @Html.AntiForgeryToken()
        <div>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            ×
                        </button>
                        <h4 class="modal-title">
                            Title
                        </h4>
                    </div>
                    <div class="modal-body">
                        <fieldset class="form-horizontal">
                            <legend>User</legend>
                            <div class="form-group">
                                @Html.LabelFor(model => model.CITY_NAME, new { @class = "col col-lg-4 control-label" })
                                <div class="col col-lg-8 controls">
                                    @Html.EditorFor(model => model.CITY_NAME)
                                    @Html.ValidationMessageFor(model => model.CITY_NAME, null, new { @class = "help-block" })
                                </div>
                            </div>
                            <div class="form-group">
                                @Html.LabelFor(model => model.CITY_ABBR, new { @class = "col col-lg-4 control-label" })
                                <div class="col col-lg-8 controls">
                                    @Html.EditorFor(model => model.CITY_ABBR)
                                    @Html.ValidationMessageFor(model => model.CITY_ABBR, null, new { @class = "help-block" })
                                </div>
                            </div>
                            <div class="form-group">
                                @Html.LabelFor(model => model.REMARK, new { @class = "col col-lg-4 control-label" })
                                <div class="col col-lg-8 controls">
                                    @Html.EditorFor(model => model.REMARK)
                                    @Html.ValidationMessageFor(model => model.REMARK, null, new { @class = "help-block" })
                                </div>
                            </div>
                           </fieldset>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" type="submit">
                            Send
                        </button>
                        <button class="btn" data-dismiss="modal" aria-hidden="true">
                            Cancel
                        </button>
                    </div>
                </div>
            </div>
        </div>
    }
and _Edit

@model TestTwiter.Models.CITy

@using (Html.BeginForm())
{


    <div class="form-horizontal">
        <h4>CITy</h4>
        <hr />
        @Html.ValidationSummary(true)
        @Html.AntiForgeryToken()
        @Html.HiddenFor(model => model.CITY_ID)

        <div class="form-group">
            @Html.LabelFor(model => model.CITY_NAME, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CITY_NAME)
                @Html.ValidationMessageFor(model => model.CITY_NAME)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.CITY_ABBR, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CITY_ABBR)
                @Html.ValidationMessageFor(model => model.CITY_ABBR)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.REMARK, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.REMARK)
                @Html.ValidationMessageFor(model => model.REMARK)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

when user click in New Link Modal form Work Good, but when user Click in Edit Button I get This Error

The required anti-forgery form field "__RequestVerificationToken" is not present

Please Help me. Thanks all

EDIT-01: remove [ValidateAntiForgeryToken] from ALL of GET requests

public partial class CityController : Controller
    {
        private ArchiveEntities db = new ArchiveEntities();

        // GET: /City/
        public virtual ActionResult Index()
        {
            return View(db.CITIES.ToList());
        }

        // GET: /City/Details/5
        public virtual ActionResult Details(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            CITy city = db.CITIES.Find(id);
            if (city == null)
            {
                return HttpNotFound();
            }
            return View(city);
        }

        // GET: /City/Create
        //[ValidateAntiForgeryToken]
        public virtual ActionResult Create()
        {
            return View();
        }

        // POST: /City/Create
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public virtual ActionResult Create([Bind(Include = "CITY_ID,CITY_NAME,CITY_ABBR,REMARK")] CITy city)
        {
            if (this.ModelState.IsValid)
            {
                //todo: SaveChanges;
                db.CITIES.Add(city);
                db.SaveChanges();
                return Json(new { success = true });
            }
            this.ModelState.AddModelError("", "Error");
            return PartialView("_ModalPartialView", city);

            //if (ModelState.IsValid)
            //{
            //    db.CITIES.Add(city);
            //    db.SaveChanges();
            //   // return View(MVC.City.RenderModalPartialView());
            //}

            //return View();
        }


        // GET: /City/Edit/5



        // POST: /City/Edit/5
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        //[HttpPost]
        //[ValidateAntiForgeryToken]
        //public virtual ActionResult Edit([Bind(Include = "CITY_ID,CITY_NAME,CITY_ABBR,REMARK")] CITy city)
        //{
        //    if (ModelState.IsValid)
        //    {
        //        db.Entry(city).State = EntityState.Modified;
        //        db.SaveChanges();
        //        return RedirectToAction("Index");
        //    }
        //    return View(city);
        //}

        // GET: /City/Delete/5
        public virtual ActionResult Delete(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            CITy city = db.CITIES.Find(id);
            if (city == null)
            {
                return HttpNotFound();
            }
            return View(city);
        }

        // POST: /City/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public virtual ActionResult DeleteConfirmed(int id)
        {
            CITy city = db.CITIES.Find(id);
            db.CITIES.Remove(city);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
        [HttpGet]
        public virtual ActionResult List()
        {
            return PartialView(Views._CityList, db.CITIES.ToList());
        }

        [HttpPost]
        // [AjaxOnly]
       // [OutputCache(Location = OutputCacheLocation.None, NoStore = true)]
        public virtual ActionResult List2()
        {
            return PartialView(Views._CityList, db.CITIES.ToList());
        }

        public virtual ActionResult Edit()
        {
            int id = 1;
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            CITy city = db.CITIES.Find(id);
            if (city == null)
            {
                return HttpNotFound();
            }
            // return View(city);
            return PartialView(Views._Edit, city);
        }

        public virtual ActionResult RenderModalPartialView()
        {

            return PartialView(viewName: "_ModalPartialView", model: new CITy() { CITY_ABBR = "", CITY_NAME = "" });
        }

        [HttpPost]
        //[AjaxOnly]
        public virtual ActionResult Index(CITy user) 
        {
            if (this.ModelState.IsValid)
            {
                //todo: SaveChanges;
                return Json(new { success = true });
            }

            this.ModelState.AddModelError("", "Error");
            return PartialView("_ModalPartialView", user);
        }
    }

Answer 1

The issue you have here is that you are adding validation to controller actions that do not need it. Let's start by looking at your Controller, you have:

// GET: /City/Edit/5
[ValidateAntiForgeryToken]
public virtual ActionResult Edit(int? id)

Which is requiring an anti-forgery token on a Get request. You would normally only include the [ValidateAntiForgeryToken] attribute on POST requests - they're used to stop somebody posting data to you without coming through your site. Check this tutorial for an overview.

Now coupled to this, any place where you have the [ValidateAntiForgeryToken] token you need to have a corresponding BeginForm with the HtmlHelper call @Html.AntiForgeryToken() in your View. In your code the edit link is 1) not in a form and 2) hasn't got this.

So in short: remove the [ValidateAntiForgeryToken] attribute from your GET requests in your controller and it should work fine.