Add AntiForgeryToken to UrlAdapor filter change request

Hello!


I'd like to add an AntiForgeryToken to the filter chagne request, my code look like this:


Index.cshtml

<ejs-grid id="Grid" allowPaging="true" allowSorting="true" allowFiltering="true" toolbar="@(new List<string>() { "Search" })">

    <e-grid-filterSettings type="Menu"></e-grid-filterSettings>

    <e-data-manager url="@Url.Action("UrlDatasource", "Event")" adaptor="UrlAdaptor"></e-data-manager>

    <e-grid-columns>

        <e-grid-column field="@nameof(Event.Id)" headerText="Id" width="120"></e-grid-column>

        <e-grid-column field="@nameof(Event.UniqueId)" headerText="Unique Id" width="150"></e-grid-column>

        <e-grid-column field="@nameof(Event.Name)" headerText="Name" width="120"></e-grid-column>

    </e-grid-columns>

</ejs-grid>


EventController:

public IActionResult Index()

{

    return View();

}


public async Task<IActionResult> UrlDatasourceAsync([FromBody] DataManagerRequest request)

{


    var bllResult = await _eventService.GetFilteredDataAsync(request);

    return Json(bllResult);

}


Is there a way to add an  AntiForgeryToken  to this?


1 Reply 1 reply marked as answer

SI Santhosh Iruthayaraj Syncfusion Team March 26, 2024 12:14 PM UTC

Hi Boldizsár Benedek,


Greetings from Syncfusion support.


From your query, we understand that you want to add an AntiForgeryToken to the Filtering API request. You can achieve this by adding the AntiForgeryToken value to the Grid dataSource’s header property. This will ensure that the AntiForgeryToken is sent with every API request from the Grid. You can implement this in the Grid’s “load” event handler. Below is the code snippet for your reference:


[Index.cshtml]

 

@Html.AntiForgeryToken()

<div>

    <ejs-grid id="assetgrid21" load="onLoad" allowPaging="true" allowSorting="true" allowFiltering="true" toolbar="@(new List<string>() { "Search" })">

        <e-grid-filterSettings type="Menu"></e-grid-filterSettings>

        <e-data-manager url="Index?handler=UrlDatasource" adaptor="UrlAdaptor"></e-data-manager>

        <e-grid-columns>

           .  .  .  .  .

        </e-grid-columns>

    </ejs-grid>

</div>

 

<script>

    function onLoad() {

        this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name=__RequestVerificationToken]").val() }];

    }

</script>

 


You can find the sample attached below for your reference. Please let us know if you require further assistance.


Regards,

Santhosh I


Attachment: AntiForgeryTokenSample_958ad3fb.zip

Marked as answer
Loader.
Up arrow icon