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

[Bernard Jurlina]

I'm trying to work with the RemoteSaveAdaptor for inline edit in the grid.

In the Edit view I'm displaying the partial view:

PartialView looks like this:

@Html.AntiForgeryToken()

<script>

    var dmAdaptorUpdate = function (keyField, value, tableName) {

        var res = this.adaptor.update(this, keyField, value, tableName);

        return $.ajax($.extend({

            beforeSend: ej.proxy(this._beforeSend, this)

        }, res));

    }

    var dmAdaptorInsert = function (data, tableName) {

        var res = this.adaptor.insert(this, data, tableName);

        var deffer = $.Deferred();

        $.ajax($.extend({

            beforeSend: ej.proxy(this._beforeSend, this),

            success: ej.proxy(function (record, status, xhr, request) {

                record = function () {

                    if (data.d)

                        data = data.d;

                    return data;

                };

                deffer.resolveWith(this, [{ record: record, dataManager: this }]);

            }, this),

            error: function (e) {

                deffer.rejectWith(this, [{ error: e, dataManager: this }]);

            }

        }, res));

        return deffer.promise();

    }

    var adaptor = new ej.remoteSaveAdaptor().extend({

        update: function (dm, keyField, value, tableName) {

            var token = value.__RequestVerificationToken;

            delete value['__RequestVerificationToken'];

            return {

                type: "POST",

                url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,

                data: {

                    __RequestVerificationToken: token,

                    value: value

                }

            };

        },

        insert: function (dm, data, tableName) {

            var token = data.__RequestVerificationToken;

            delete data['__RequestVerificationToken'];

            return {

                type: "POST",

                url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,

                data: {

                    __RequestVerificationToken: token,

                    value: data

                }

            };

        }

    })

    function load(args) {

        this.model.dataSource.adaptor = new adaptor();

        this.model.dataSource.update = dmAdaptorUpdate;

        this.model.dataSource.insert = dmAdaptorInsert;

    }

</script>

<div class="panel panel-success">

    <div class="panel panel-heading">

        <h3 class="panel-title">Uplate provizije</h3>

    </div>

    <div class="panel panel-body">

        @(Html.EJ().Grid<object>("gridProv")

                                .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dsProvizije)

                                    .UpdateURL("NormalUpdate")

                                    .InsertURL("NormalInsert")

                                    .RemoveURL("NormalDelete")

                                    .Adaptor(AdaptorType.RemoteSaveAdaptor))

                        .EditSettings(edit => { edit.AllowAdding().AllowEditing().AllowDeleting().ShowConfirmDialog(true).ShowDeleteConfirmDialog(true); })

                        .ToolbarSettings(toolbar =>

                        {

                            toolbar.ShowToolbar().ToolbarItems(items =>

                            {

                                items.AddTool(ToolBarItems.Search);

                                items.AddTool(ToolBarItems.Add);

                                items.AddTool(ToolBarItems.Edit);

                                items.AddTool(ToolBarItems.Delete);

                                items.AddTool(ToolBarItems.Update);

                                items.AddTool(ToolBarItems.Cancel);

                            });

                        })

                        .EnableRowHover(false)

                        .AllowSelection(false)

                        .IsResponsive(true)

                        .Locale("hr-HR")

                        .EnableTouch(true)

                        .Columns(col =>

                        {

                            col.Field("PolProvID").HeaderText("PolProvID").IsPrimaryKey(true).Visible(false).Add();

                            col.Field("Datum").HeaderText("Datum").Width(100).Priority(2).Add();

                            col.Field("Iznos").HeaderText("Iznos").Format("{0:N2}").Width(100).Priority(2).TextAlign(TextAlign.Right).HeaderTextAlign(TextAlign.Right).Add();

                        }).ClientSideEvents(ev => ev.Load("load"))

        )

    </div>

</div>

And it renders:

But when I insert new row in the grid and click Save toolbar

There must be something I'm doing wrong...

Thanks.

Bernard.

[Bernard Jurlina]

This happens only when I render partial view inside existing Edit view. Here is the code:

@model Bilijon.Models.Polica

@using Bilijon.Models;

@using Syncfusion.MVC.EJ;

@{

    ViewBag.Title = "Create";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

@{

    if (Model.PolicaID > 0)

    { <h3>Polica</h3> }

    else

    { <h3>Unos nove police</h3> }

}

<!-- modal placeholder-->

<div id='myModal' class='modal fade in'>

    <div class="modal-dialog modal-my-500">

        <div class="modal-content">

            <div id='myModalContent'></div>

        </div>

    </div>

</div>

@Html.Hidden("ModalOpen")

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "form1" }))

{

    @Html.AntiForgeryToken()

<div class="form-horizontal">

    <hr />

    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    @{

        if (Model.PolicaID > 0)

        {

            @Html.HiddenFor(model => model.PolicaID)

        }

        @Html.HiddenFor(model => model.UserId)

        @Html.HiddenFor(model => model.DatumKreiranja)

    }

    <div class="row">

        <div class="col-md-4">

            <div class="form-group">

                @Html.LabelFor(model => model.BrojPolice, "Broj police", htmlAttributes: new { @class = "control-label col-md-3 required" })

                <div class="col-md-9">

                    @Html.EditorFor(model => model.BrojPolice, new { htmlAttributes = new { @class = "form-control" } })

                    @Html.ValidationMessageFor(model => model.BrojPolice, "", new { @class = "text-danger" })

                </div>

            </div>

            <div class="form-group">

                @Html.LabelFor(model => model.BrojPonude, "Broj ponude", htmlAttributes: new { @class = "control-label col-md-3" })

                <div class="col-md-9">

                    @Html.EditorFor(model => model.BrojPonude, new { htmlAttributes = new { @class = "form-control" } })

                    @Html.ValidationMessageFor(model => model.BrojPonude, "", new { @class = "text-danger" })

                </div>

            </div>

        </div>

    </div>

    <div class="form-inline" style="margin-top:10px;">

        <input type="submit" value="Spremi" class="btn btn-success" />

        <a rel='nofollow' href='@Url.Action("Index", "Policas")' class="btn btn-danger">Odustani</a>

    </div>

</div>

}

<div class="col-md-4">

    @Html.Partial("~/Views/Provizijas/_Index.cshtml")

</div>

@section Scripts {

    @Scripts.Render("~/bundles/modalform")

}

I tried to render partial inside form and outside form, but with no luck.

So, when I open the controller action /Provizijas/Index, and have only the grid for CRUD in it, it's working fine.

Thanks!

B.

[Vignesh Natarajan]

Hi Bernard, 

Thanks for using Syncfusion products. 

We have prepared a sample as per your suggestion and we are not able to reproduce the reported issue (anti-forgery form field "__RequestVerificationToken" is not present). The issue occur because below mentioned line is not referred in the edit form 

  @Html.AntiForgeryToken() 

This line must be present to validate the AntiForgeryToken in server side and update record based on it. So only this issue did not occur when same is used directly in the viewpage.  

For your convenience we have prepared a sample which can be downloaded from below link 

Sample:  http://www.syncfusion.com/downloads/support/forum/137407/ze/EJGrid2123567546  

If the issue still occur then kindly share the following details to reproduce at our end.  

1.       Share the full stack trace of the exception thrown. 

2.       Share the full grid rendering code (server side). 

3.       Share the Essential studio version. 

4.       Share the video demonstration of the issue. 

5.       If possible try to reproduce the reported issue in provided sample.  

6.       Or try to provided issue reproducible sample. 

 

Regards, 

Vignesh Natarajan