From 16d05d1ce07f766d2b2309ba2ccb5d819bceca7a Mon Sep 17 00:00:00 2001 From: Mikhail Preyskurantov <5574159+mpreyskurantov@users.noreply.github.com> Date: Mon, 19 Jan 2026 18:49:32 +0200 Subject: [PATCH 1/2] DataValidation: RemoteValidation/CheckUniqueEmailAddress - post->get --- .../Angular/app/app.component.ts | 15 ++++++++------ .../DataGrid/DataValidation/React/App.tsx | 20 +++++++------------ .../DataGrid/DataValidation/ReactJs/App.js | 18 +++++++---------- .../Demos/DataGrid/DataValidation/Vue/App.vue | 19 +++++++----------- .../DataGrid/DataValidation/jQuery/index.js | 12 +++++------ 5 files changed, 36 insertions(+), 48 deletions(-) diff --git a/apps/demos/Demos/DataGrid/DataValidation/Angular/app/app.component.ts b/apps/demos/Demos/DataGrid/DataValidation/Angular/app/app.component.ts index 27215f7f17d8..9d9c4a17bf38 100644 --- a/apps/demos/Demos/DataGrid/DataValidation/Angular/app/app.component.ts +++ b/apps/demos/Demos/DataGrid/DataValidation/Angular/app/app.component.ts @@ -28,8 +28,10 @@ export class AppComponent { pattern = /^\(\d{3}\) \d{3}-\d{4}$/i; + baseUrl = 'https://js.devexpress.com/Demos/NetCore'; + constructor(private httpClient: HttpClient) { - const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridEmployeesValidation'; + const url = `${this.baseUrl}/api/DataGridEmployeesValidation`; this.dataSource = AspNetData.createStore({ key: 'ID', @@ -44,12 +46,13 @@ export class AppComponent { } asyncValidation = async (params: Record & { data: Record }) => { - const emailValidationUrl = 'https://js.devexpress.com/Demos/NetCore/RemoteValidation/CheckUniqueEmailAddress'; + const emailValidationUrl = `${this.baseUrl}/RemoteValidation/CheckUniqueEmailAddress`; - const result = await lastValueFrom(this.httpClient.post(emailValidationUrl, { - id: params.data.ID, - email: params.value, - }, { + const result = await lastValueFrom(this.httpClient.get(emailValidationUrl, { + params: { + id: params.data.ID, + email: params.value, + }, responseType: 'json', })); diff --git a/apps/demos/Demos/DataGrid/DataValidation/React/App.tsx b/apps/demos/Demos/DataGrid/DataValidation/React/App.tsx index 657714aaff53..f204d280b890 100644 --- a/apps/demos/Demos/DataGrid/DataValidation/React/App.tsx +++ b/apps/demos/Demos/DataGrid/DataValidation/React/App.tsx @@ -6,8 +6,9 @@ import DataGrid, { import type { IAsyncRuleProps } from 'devextreme-react/data-grid'; import { createStore } from 'devextreme-aspnet-data-nojquery'; -const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridEmployeesValidation'; -const emailValidationUrl = 'https://js.devexpress.com/Demos/NetCore/RemoteValidation/CheckUniqueEmailAddress'; +const baseUrl = 'https://js.devexpress.com/Demos/NetCore'; +const url = `${baseUrl}/api/DataGridEmployeesValidation`; +const emailValidationUrl = `${baseUrl}/RemoteValidation/CheckUniqueEmailAddress`; const dataSource = createStore({ key: 'ID', @@ -21,17 +22,10 @@ const dataSource = createStore({ }); const asyncValidation: IAsyncRuleProps['validationCallback'] = async (params) => { - const response = await fetch(emailValidationUrl, { - method: 'POST', - headers: { - 'Content-Type': 'application/json;', - }, - body: JSON.stringify({ - id: params.data.ID, - email: params.value, - }), - }); - + const response = await fetch(`${emailValidationUrl}?${new URLSearchParams({ + id: params.data.ID, + email: params.value, + })}`); const result = await response.json(); return result; diff --git a/apps/demos/Demos/DataGrid/DataValidation/ReactJs/App.js b/apps/demos/Demos/DataGrid/DataValidation/ReactJs/App.js index fa9e93575455..8821cf94a11a 100644 --- a/apps/demos/Demos/DataGrid/DataValidation/ReactJs/App.js +++ b/apps/demos/Demos/DataGrid/DataValidation/ReactJs/App.js @@ -10,9 +10,9 @@ import DataGrid, { } from 'devextreme-react/data-grid'; import { createStore } from 'devextreme-aspnet-data-nojquery'; -const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridEmployeesValidation'; -const emailValidationUrl = - 'https://js.devexpress.com/Demos/NetCore/RemoteValidation/CheckUniqueEmailAddress'; +const baseUrl = 'https://js.devexpress.com/Demos/NetCore'; +const url = `${baseUrl}/api/DataGridEmployeesValidation`; +const emailValidationUrl = `${baseUrl}/RemoteValidation/CheckUniqueEmailAddress`; const dataSource = createStore({ key: 'ID', loadUrl: url, @@ -24,16 +24,12 @@ const dataSource = createStore({ }, }); const asyncValidation = async (params) => { - const response = await fetch(emailValidationUrl, { - method: 'POST', - headers: { - 'Content-Type': 'application/json;', - }, - body: JSON.stringify({ + const response = await fetch( + `${emailValidationUrl}?${new URLSearchParams({ id: params.data.ID, email: params.value, - }), - }); + })}`, + ); const result = await response.json(); return result; }; diff --git a/apps/demos/Demos/DataGrid/DataValidation/Vue/App.vue b/apps/demos/Demos/DataGrid/DataValidation/Vue/App.vue index 9a52b5285f85..fe374a4e9541 100644 --- a/apps/demos/Demos/DataGrid/DataValidation/Vue/App.vue +++ b/apps/demos/Demos/DataGrid/DataValidation/Vue/App.vue @@ -48,8 +48,9 @@ import { import { type ValidationCallbackData } from 'devextreme-vue/common'; import { createStore } from 'devextreme-aspnet-data-nojquery'; -const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridEmployeesValidation'; -const emailValidationUrl = 'https://js.devexpress.com/Demos/NetCore/RemoteValidation/CheckUniqueEmailAddress'; +const baseUrl = 'https://js.devexpress.com/Demos/NetCore'; +const url = `${baseUrl}/api/DataGridEmployeesValidation`; +const emailValidationUrl = `${baseUrl}/RemoteValidation/CheckUniqueEmailAddress`; const dataSource = createStore({ key: 'ID', @@ -65,16 +66,10 @@ const dataSource = createStore({ const pattern = /^\(\d{3}\) \d{3}-\d{4}$/i; const asyncValidation = async (params: ValidationCallbackData) => { - const response = await fetch(emailValidationUrl, { - method: 'POST', - headers: { - 'Content-Type': 'application/json;', - }, - body: JSON.stringify({ - id: params.data.ID, - email: params.value, - }), - }); + const response = await fetch(`${emailValidationUrl}?${new URLSearchParams({ + id: params.data.ID, + email: params.value, + })}`); const result = await response.json(); diff --git a/apps/demos/Demos/DataGrid/DataValidation/jQuery/index.js b/apps/demos/Demos/DataGrid/DataValidation/jQuery/index.js index 44489dddd089..a2e9378248ac 100644 --- a/apps/demos/Demos/DataGrid/DataValidation/jQuery/index.js +++ b/apps/demos/Demos/DataGrid/DataValidation/jQuery/index.js @@ -1,5 +1,6 @@ $(() => { - const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridEmployeesValidation'; + const baseUrl = 'https://js.devexpress.com/Demos/NetCore'; + const url = `${baseUrl}/api/DataGridEmployeesValidation`; $('#gridContainer').dxDataGrid({ dataSource: DevExpress.data.AspNet.createStore({ @@ -50,14 +51,13 @@ $(() => { message: 'Email address is not unique', validationCallback(params) { return $.ajax({ - url: 'https://js.devexpress.com/Demos/NetCore/RemoteValidation/CheckUniqueEmailAddress', - type: 'POST', + url: `${baseUrl}/RemoteValidation/CheckUniqueEmailAddress`, + type: 'GET', dataType: 'json', - contentType: 'application/json', - data: JSON.stringify({ + data: { id: params.data.ID, email: params.value, - }), + }, }); }, }], From 4dee04fd2681ff185b80f29ea846749e7d5c08a0 Mon Sep 17 00:00:00 2001 From: Mikhail Preyskurantov <5574159+mpreyskurantov@users.noreply.github.com> Date: Tue, 20 Jan 2026 10:02:26 +0200 Subject: [PATCH 2/2] CardView/DataValidation: RemoteValidation/CheckUniqueEmailAddress - post->get, like prev DataGrid --- .../DataValidation/Angular/app/app.component.ts | 9 +++++---- .../Demos/CardView/DataValidation/React/App.tsx | 14 ++++---------- .../Demos/CardView/DataValidation/ReactJs/App.js | 12 ++++-------- .../Demos/CardView/DataValidation/Vue/App.vue | 14 ++++---------- .../Demos/CardView/DataValidation/jQuery/index.js | 7 +++---- 5 files changed, 20 insertions(+), 36 deletions(-) diff --git a/apps/demos/Demos/CardView/DataValidation/Angular/app/app.component.ts b/apps/demos/Demos/CardView/DataValidation/Angular/app/app.component.ts index 676f6d0a582c..4f6437f25f3f 100644 --- a/apps/demos/Demos/CardView/DataValidation/Angular/app/app.component.ts +++ b/apps/demos/Demos/CardView/DataValidation/Angular/app/app.component.ts @@ -55,10 +55,11 @@ export class AppComponent { emailValidationCallback = async (params) => { const emailValidationUrl = 'https://js.devexpress.com/Demos/NetCore/RemoteValidation/CheckUniqueEmailAddress'; - const result = await lastValueFrom(this.httpClient.post(emailValidationUrl, { - id: params.data.id, - email: params.value, - }, { + const result = await lastValueFrom(this.httpClient.get(emailValidationUrl, { + params: { + id: params.data.id, + email: params.value, + }, responseType: 'json', })); diff --git a/apps/demos/Demos/CardView/DataValidation/React/App.tsx b/apps/demos/Demos/CardView/DataValidation/React/App.tsx index ae77b7391743..92ab393580c6 100644 --- a/apps/demos/Demos/CardView/DataValidation/React/App.tsx +++ b/apps/demos/Demos/CardView/DataValidation/React/App.tsx @@ -21,16 +21,10 @@ function calculateFullName({ firstName, lastName }: Employee) { const emailValidationUrl = 'https://js.devexpress.com/Demos/NetCore/RemoteValidation/CheckUniqueEmailAddress'; async function emailValidationCallback(options: ValidationCallbackData): Promise { - const response = await fetch(emailValidationUrl, { - method: 'POST', - headers: { - 'Content-Type': 'application/json;', - }, - body: JSON.stringify({ - id: options.data.id, - email: options.value, - }), - }); + const response = await fetch(`${emailValidationUrl}?${new URLSearchParams({ + id: options.data.id, + email: options.value, + })}`); return response.json(); } diff --git a/apps/demos/Demos/CardView/DataValidation/ReactJs/App.js b/apps/demos/Demos/CardView/DataValidation/ReactJs/App.js index 69dbfc51045e..4a7046b1ee98 100644 --- a/apps/demos/Demos/CardView/DataValidation/ReactJs/App.js +++ b/apps/demos/Demos/CardView/DataValidation/ReactJs/App.js @@ -25,16 +25,12 @@ function calculateFullName({ firstName, lastName }) { const emailValidationUrl = 'https://js.devexpress.com/Demos/NetCore/RemoteValidation/CheckUniqueEmailAddress'; async function emailValidationCallback(options) { - const response = await fetch(emailValidationUrl, { - method: 'POST', - headers: { - 'Content-Type': 'application/json;', - }, - body: JSON.stringify({ + const response = await fetch( + `${emailValidationUrl}?${new URLSearchParams({ id: options.data.id, email: options.value, - }), - }); + })}`, + ); return response.json(); } function hireDateValidationCallback(options) { diff --git a/apps/demos/Demos/CardView/DataValidation/Vue/App.vue b/apps/demos/Demos/CardView/DataValidation/Vue/App.vue index c8c6134b2b14..461893dbb7c1 100644 --- a/apps/demos/Demos/CardView/DataValidation/Vue/App.vue +++ b/apps/demos/Demos/CardView/DataValidation/Vue/App.vue @@ -194,16 +194,10 @@ const emailValidationUrl = 'https://js.devexpress.com/Demos/NetCore/RemoteValida async function emailValidationCallback( params: ValidationCallbackData, ): Promise { - const response = await fetch(emailValidationUrl, { - method: 'POST', - headers: { - 'Content-Type': 'application/json;', - }, - body: JSON.stringify({ - id: params.data.id, - email: params.value, - }), - }); + const response = await fetch(`${emailValidationUrl}?${new URLSearchParams({ + id: params.data.id, + email: params.value, + })}`); const result = await response.json(); diff --git a/apps/demos/Demos/CardView/DataValidation/jQuery/index.js b/apps/demos/Demos/CardView/DataValidation/jQuery/index.js index 2477906b297d..4d3a87b8ee13 100644 --- a/apps/demos/Demos/CardView/DataValidation/jQuery/index.js +++ b/apps/demos/Demos/CardView/DataValidation/jQuery/index.js @@ -114,13 +114,12 @@ $(() => { validationCallback(params) { return $.ajax({ url: 'https://js.devexpress.com/Demos/NetCore/RemoteValidation/CheckUniqueEmailAddress', - type: 'POST', + type: 'GET', dataType: 'json', - contentType: 'application/json', - data: JSON.stringify({ + data: { id: params.data.id, email: params.value, - }), + }, }); }, }],