如何將防偽令牌添加到 Syncfusion 網格數據請求

Question

設想

我在 Razor Pages Net6 應用程序中使用 Syncfusion UI 控件，但在請求網格數據時遇到防偽驗證問題...

例子：

// ------------- Books.cshtml

    @page
    @model Site.Pages.BooksModel
    @using Syncfusion.EJ2
    @{
    }
    @Html.EJS().Grid("BooksIndexGrid").DataSource(dataManager => { 
        dataManager.Url("/books?handler=GetGridData");
        dataManager.Adaptor("UrlAdaptor");
    }).Columns(col =>
    {
                col.Field("title").Add();
    }).AllowPaging().AllowSorting().Render()

//-------------  Books.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace Site.Pages
{
    public class BooksModel : PageModel
    {
        private readonly IMediator _mediator;

        public BooksModel(IMediator mediator)
        {
            _mediator = mediator;
        }

        public void OnGet()
        {
        }

        public async Task<JsonResult> OnPostGetGridDataAsync(DataManagerRequest dm)
        {
            //Filtering logic removed for brevity

            var data = await _mediator.Send(new GetListOfBooksRequest());

            return new JsonResult(new { result = data, count = data.Count() });
        }
    }
}

問題

上面的示例返回 400 錯誤代碼，因為它使用 POST 方法請求數據並且請求中不存在 Antiforgery 令牌。 所以問題是……

如何將所需的防偽令牌添加到讀取數據的請求中？

我發現這篇關於創建自定義適配器的文章，但它似乎只涵蓋 CUD 而不是 CRUD：

https://ej2.syncfusion.com/as.netcore/documentation/grid/how-to/perform-crud-operation-using-anti-forgery-token

我知道我可以禁用防偽令牌檢查，但不想那樣做。

Answer 1

您可以使用本論壇中使用的相同方法並實現自定義適配器，您可以從中發送防偽令牌以執行 CRUD 操作。

這在下面的代碼片段中進行了演示，

window.customAdaptor = new ej.data.UrlAdaptor();

customAdaptor = ej.base.extend(customAdaptor, {

processResponse: function (data, ds, query, xhr, request, changes) {
    request.data = JSON.stringify(data);
    return ej.data.UrlAdaptor.prototype.processResponse.call(this, data, ds, query, xhr, request, changes)
},
insert: function (dm, data, tableName) {
    return {
        url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,
        data: jQuery.param({
            __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value,
            value: data,
            table: tableName,
            action: 'insert'
        }),
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
   }
},
remove: function(dm, keyField, value, tableName, query) {
    return {
        url: dm.dataSource.removeUrl || dm.dataSource.crudUrl || dm.dataSource.url,
        data: jQuery.param({
            __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value,
            key: value,
            keyColumn: keyField,
            table: tableName,
            action: 'remove'
        }),
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
    };
},
update: function (dm, keyField, value, tableName) {
    return {
        url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,
        data: jQuery.param({
            __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value,
            value: value,
            table: tableName,
            action: 'insert'
        }),
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
    };
},

});

var dataManger3 = new ej.data.DataManager({ url: "Home/GetHierachyGridData", crudUrl: "Home/CrudUpdate", adaptor: customAdaptor, crossDomain: true });

我們在此基礎上修改了共享示例，供您參考。 你可以在下面找到它，

示例： https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample1Updated-486561763

可以在下面的文檔鏈接中查看有關自定義適配器的更多詳細信息，

文檔： https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/#custom-adaptor

如果您有任何疑慮，請告訴我們。