Grids | DataValidation: RemoteValidation/CheckUniqueEmailAddress - post->get (#32241)

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',
     }));
 

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<boolean> {
-  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();
 }

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) {

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<boolean> {
-  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();
 

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,
-              }),
+              },
             });
           },
         }],

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<string, unknown> & { data: Record<string, unknown> }) => {
-    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',
     }));
 

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;

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;
 };

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();
 

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,
-            }),
+            },
           });
         },
       }],