Demos | DataGrid - BatchUpdateRequest: Support BackEnd / EndPoint Anti Forgery (all frameworks)

apps/demos/Demos/DataGrid/BatchUpdateRequest/Angular/app/app.component.ts

@@ -1,15 +1,17 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
-import { HttpClient, provideHttpClient, withFetch } from '@angular/common/http';
+import { HttpClient, provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
 import * as AspNetData from 'devextreme-aspnet-data-nojquery';
 import { DxDataGridComponent, DxDataGridModule, DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
+import { antiForgeryInterceptor, AntiForgeryTokenService } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
-const URL = 'https://js.devexpress.com/Demos/NetCore/api/DataGridBatchUpdateWebApi';
+const BASE_PATH = 'https://js.devexpress.com/Demos/NetCore';
+const URL = `${BASE_PATH}/api/DataGridBatchUpdateWebApi`;
 
 let modulePrefix = '';
 // @ts-ignore
@@ -28,12 +30,16 @@ if (window && window.config?.packageConfigPaths) {
 export class AppComponent {
   ordersStore: AspNetData.CustomStore;
 
-  constructor(private http: HttpClient) {
+  constructor(private http: HttpClient, private tokenService: AntiForgeryTokenService) {
     this.ordersStore = AspNetData.createStore({
       key: 'OrderID',
       loadUrl: `${URL}/Orders`,
-      onBeforeSend(method, ajaxOptions) {
-        ajaxOptions.xhrFields = { withCredentials: true };
+      async onBeforeSend(_method, ajaxOptions) {
+        const tokenData = await lastValueFrom(tokenService.getToken());
+        ajaxOptions.xhrFields = {
+          withCredentials: true,
+          headers: { [tokenData.headerName]: tokenData.token },
+        };
       },
     });
   }
@@ -52,16 +58,23 @@ export class AppComponent {
     changes: DxDataGridTypes.DataChange[],
     component: DxDataGridComponent['instance'],
   ): Promise<void> {
-    await lastValueFrom(
-      this.http.post(url, JSON.stringify(changes), {
-        withCredentials: true,
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      }),
-    );
-    await component.refresh(true);
-    component.cancelEditData();
+    try {
+      await lastValueFrom(
+        this.http.post(url, JSON.stringify(changes), {
+          withCredentials: true,
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        }),
+      );
+      await component.refresh(true);
+      component.cancelEditData();
+    } catch (error: any) {
+      const errorMessage = (typeof error?.error === 'string' && error.error)
+        ? error.error
+        : (error?.statusText || 'Unknown error');
+      throw new Error(`Batch save failed: ${errorMessage}`);
+    }
   }
 
   normalizeChanges(changes: DxDataGridTypes.DataChange[]): DxDataGridTypes.DataChange[] {
@@ -93,6 +106,9 @@ export class AppComponent {
 bootstrapApplication(AppComponent, {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-    provideHttpClient(withFetch()),
+    provideHttpClient(
+      withFetch(),
+      withInterceptors([antiForgeryInterceptor]),
+    ),
   ],
 });

apps/demos/Demos/DataGrid/BatchUpdateRequest/Angular/app/app.service.ts

@@ -0,0 +1,104 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpInterceptorFn, HttpErrorResponse } from '@angular/common/http';
+import { Observable, of, throwError } from 'rxjs';
+import { catchError, switchMap, map, shareReplay } from 'rxjs/operators';
+
+interface TokenData {
+  headerName: string;
+  token: string;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AntiForgeryTokenService {
+  private BASE_PATH = 'https://js.devexpress.com/Demos/NetCore';
+
+  private tokenCache$: Observable<TokenData> | null = null;
+
+  constructor(private http: HttpClient) {}
+
+  getToken(): Observable<TokenData> {
+    const tokenMeta = document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]');
+    if (tokenMeta) {
+      const headerName = tokenMeta.dataset.headerName || 'RequestVerificationToken';
+      const token = tokenMeta.getAttribute('content') || '';
+      return of({ headerName, token });
+    }
+
+    if (!this.tokenCache$) {
+      this.tokenCache$ = this.fetchToken().pipe(
+        map((tokenData) => {
+          this.storeTokenInMeta(tokenData);
+          return tokenData;
+        }),
+        shareReplay({ bufferSize: 1, refCount: false }),
+        catchError((error) => {
+          this.tokenCache$ = null;
+          return throwError(() => error);
+        }),
+      );
+    }
+
+    return this.tokenCache$;
+  }
+
+  private fetchToken(): Observable<TokenData> {
+    return this.http.get<TokenData>(
+      `${this.BASE_PATH}/api/Common/GetAntiForgeryToken`,
+      {
+        withCredentials: true,
+      },
+    ).pipe(
+      catchError((error) => {
+        const errorMessage = typeof error.error === 'string' ? error.error : (error.statusText || 'Unknown error');
+        return throwError(() => new Error(`Failed to retrieve anti-forgery token: ${errorMessage}`));
+      }),
+    );
+  }
+
+  private storeTokenInMeta(tokenData: TokenData): void {
+    const meta = document.createElement('meta');
+    meta.name = 'csrf-token';
+    meta.content = tokenData.token;
+    meta.dataset.headerName = tokenData.headerName;
+    document.head.appendChild(meta);
+  }
+
+  clearToken(): void {
+    this.tokenCache$ = null;
+    const tokenMeta = document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]');
+    if (tokenMeta) {
+      tokenMeta.remove();
+    }
+  }
+}
+
+export const antiForgeryInterceptor: HttpInterceptorFn = (req, next) => {
+  const tokenService = inject(AntiForgeryTokenService);
+
+  if (req.method === 'GET' && req.url.includes('/GetAntiForgeryToken')) {
+    return next(req);
+  }
+
+  if (req.method !== 'GET') {
+    return tokenService.getToken().pipe(
+      switchMap((tokenData) => {
+        const clonedRequest = req.clone({
+          setHeaders: {
+            [tokenData.headerName]: tokenData.token,
+          },
+        });
+        return next(clonedRequest);
+      }),
+      catchError((error: HttpErrorResponse) => {
+        if (error.status === 401 || error.status === 403) {
+          tokenService.clearToken();
+        }
+        return throwError(() => error);
+      }),
+    );
+  }
+
+  return next(req);
+};

apps/demos/Demos/DataGrid/BatchUpdateRequest/React/App.tsx

@@ -4,13 +4,55 @@ import type { DataGridRef, DataGridTypes } from 'devextreme-react/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import 'whatwg-fetch';
 
-const URL = 'https://js.devexpress.com/Demos/NetCore/api/DataGridBatchUpdateWebApi';
+const BASE_PATH = 'https://js.devexpress.com/Demos/NetCore';
+const URL = `${BASE_PATH}/api/DataGridBatchUpdateWebApi`;
+
+async function fetchAntiForgeryToken(): Promise<{ headerName: string; token: string }> {
+  try {
+    const response = await fetch(`${BASE_PATH}/api/Common/GetAntiForgeryToken`, {
+      method: 'GET',
+      credentials: 'include',
+      cache: 'no-cache',
+    });
+
+    if (!response.ok) {
+      const errorMessage = await response.text();
+      throw new Error(`Failed to retrieve anti-forgery token: ${errorMessage || response.statusText}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    throw new Error(errorMessage);
+  }
+}
+
+async function getAntiForgeryTokenValue(): Promise<{ headerName: string; token: string }> {
+  const tokenMeta = document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]');
+  if (tokenMeta) {
+    const headerName = tokenMeta.dataset.headerName || 'RequestVerificationToken';
+    const token = tokenMeta.getAttribute('content') || '';
+    return Promise.resolve({ headerName, token });
+  }
+
+  const tokenData = await fetchAntiForgeryToken();
+  const meta = document.createElement('meta');
+  meta.name = 'csrf-token';
+  meta.content = tokenData.token;
+  meta.dataset.headerName = tokenData.headerName;
+  document.head.appendChild(meta);
+  return tokenData;
+}
 
 const ordersStore = createStore({
   key: 'OrderID',
   loadUrl: `${URL}/Orders`,
-  onBeforeSend: (method, ajaxOptions) => {
-    ajaxOptions.xhrFields = { withCredentials: true };
+  async onBeforeSend(_method, ajaxOptions) {
+    const tokenData = await getAntiForgeryTokenValue();
+    ajaxOptions.xhrFields = {
+      withCredentials: true,
+      headers: { [tokenData.headerName]: tokenData.token },
+    };
   },
 });
 
@@ -39,25 +81,31 @@ function normalizeChanges(changes: DataGridTypes.DataChange[]): DataGridTypes.Da
   }) as DataGridTypes.DataChange[];
 }
 
-async function sendBatchRequest(url: string, changes: DataGridTypes.DataChange[]) {
-  const result = await fetch(url, {
-    method: 'POST',
-    body: JSON.stringify(changes),
-    headers: {
-      'Content-Type': 'application/json;charset=UTF-8',
-    },
-    credentials: 'include',
-  });
-
-  if (!result.ok) {
-    const json = await result.json();
+async function sendBatchRequest(url: string, changes: DataGridTypes.DataChange[], headers: Record<string, string>) {
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      body: JSON.stringify(changes),
+      headers: {
+        'Content-Type': 'application/json;charset=UTF-8',
+        ...headers,
+      },
+      credentials: 'include',
+    });
 
-    throw json.Message;
+    if (!response.ok) {
+      const errorMessage = await response.text();
+      throw new Error(`Batch save failed: ${errorMessage || response.statusText}`);
+    }
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    throw new Error(errorMessage);
   }
 }
 
 async function processBatchRequest(url: string, changes: DataGridTypes.DataChange[], component: ReturnType<DataGridRef['instance']>) {
-  await sendBatchRequest(url, changes);
+  const tokenData = await getAntiForgeryTokenValue();
+  await sendBatchRequest(url, changes, { [tokenData.headerName]: tokenData.token });
   await component.refresh(true);
   component.cancelEditData();
 }

apps/demos/Demos/DataGrid/BatchUpdateRequest/ReactJs/App.js

@@ -3,12 +3,51 @@ import DataGrid, { Column, Editing, Pager } from 'devextreme-react/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import 'whatwg-fetch';
 
-const URL = 'https://js.devexpress.com/Demos/NetCore/api/DataGridBatchUpdateWebApi';
+const BASE_PATH = 'https://js.devexpress.com/Demos/NetCore';
+const URL = `${BASE_PATH}/api/DataGridBatchUpdateWebApi`;
+async function fetchAntiForgeryToken() {
+  try {
+    const response = await fetch(`${BASE_PATH}/api/Common/GetAntiForgeryToken`, {
+      method: 'GET',
+      credentials: 'include',
+      cache: 'no-cache',
+    });
+    if (!response.ok) {
+      const errorMessage = await response.text();
+      throw new Error(
+        `Failed to retrieve anti-forgery token: ${errorMessage || response.statusText}`,
+      );
+    }
+    return await response.json();
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    throw new Error(errorMessage);
+  }
+}
+async function getAntiForgeryTokenValue() {
+  const tokenMeta = document.querySelector('meta[name="csrf-token"]');
+  if (tokenMeta) {
+    const headerName = tokenMeta.dataset.headerName || 'RequestVerificationToken';
+    const token = tokenMeta.getAttribute('content') || '';
+    return Promise.resolve({ headerName, token });
+  }
+  const tokenData = await fetchAntiForgeryToken();
+  const meta = document.createElement('meta');
+  meta.name = 'csrf-token';
+  meta.content = tokenData.token;
+  meta.dataset.headerName = tokenData.headerName;
+  document.head.appendChild(meta);
+  return tokenData;
+}
 const ordersStore = createStore({
   key: 'OrderID',
   loadUrl: `${URL}/Orders`,
-  onBeforeSend: (method, ajaxOptions) => {
-    ajaxOptions.xhrFields = { withCredentials: true };
+  async onBeforeSend(_method, ajaxOptions) {
+    const tokenData = await getAntiForgeryTokenValue();
+    ajaxOptions.xhrFields = {
+      withCredentials: true,
+      headers: { [tokenData.headerName]: tokenData.token },
+    };
   },
 });
 function normalizeChanges(changes) {
@@ -35,22 +74,29 @@ function normalizeChanges(changes) {
     }
   });
 }
-async function sendBatchRequest(url, changes) {
-  const result = await fetch(url, {
-    method: 'POST',
-    body: JSON.stringify(changes),
-    headers: {
-      'Content-Type': 'application/json;charset=UTF-8',
-    },
-    credentials: 'include',
-  });
-  if (!result.ok) {
-    const json = await result.json();
-    throw json.Message;
+async function sendBatchRequest(url, changes, headers) {
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      body: JSON.stringify(changes),
+      headers: {
+        'Content-Type': 'application/json;charset=UTF-8',
+        ...headers,
+      },
+      credentials: 'include',
+    });
+    if (!response.ok) {
+      const errorMessage = await response.text();
+      throw new Error(`Batch save failed: ${errorMessage || response.statusText}`);
+    }
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    throw new Error(errorMessage);
   }
 }
 async function processBatchRequest(url, changes, component) {
-  await sendBatchRequest(url, changes);
+  const tokenData = await getAntiForgeryTokenValue();
+  await sendBatchRequest(url, changes, { [tokenData.headerName]: tokenData.token });
   await component.refresh(true);
   component.cancelEditData();
 }