Repository: syncfusion-content/ej2-asp-core-mvc-docs
Pull request #3904: Documentation(hotfix): Added URL and remotesave Adaptor in ASP.NET MVC
Author: login: Gayathri4135
Labels: name: documentation
description: Improvements or additions to documentation
Created: 2025-02-18T13:31:32Z | Merged: 2025-03-17T05:32:45Z



Diff:
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/remote-save-adaptor.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/remote-save-adaptor.md
new file mode 100644
index 0000000000..6b2419fd4f
--- /dev/null
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/remote-save-adaptor.md
@@ -0,0 +1,364 @@
+---
+layout: post
+title: RemoteSaveAdaptor in Syncfusion ##Platform_Name## Grid.
+description: Learn here all about how to bind data and perform CRUD action using RemoteSaveAdaptor in Syncfusion ##Platform_Name## Grid.
+platform: ej2-asp-core-mvc
+control: grid
+keywords: Adaptors, RemoteSaveAdaptor, remotesave adaptor, remotedata 
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# RemoteSaveAdaptor in Syncfusion ASP.NET MVC Grid
+
+The `RemoteSaveAdaptor` in Syncfusion ASP.NET MVC Grid allows efficient handling of sorting, filtering, searching, and paging primarily on the client-side, while delegating CRUD operations (Create, Read, Update, Delete) to the server-side for data persistence. This approach reduces unnecessary server interactions, improving performance and user experience.
+
+Ensure your server-side implementation in ASP.NET MVC handles CRUD operations. Below is an example of how you can set up your ASP.NET MVC controller to manage these operations:
+
+**Server-Side Implementation**
+
+To configure a server with Syncfusion ASP.NET MVC Grid, follow the below steps:
+
+**1. Project Creation:**
+
+Open Visual Studio and create an ASP.NET MVC project named **RemoteSaveAdaptor**. To create an ASP.NET MVC application, follow the documentation [link](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app) for detailed steps.
+
+**2. Model Class Creation:**
+
+Create a model class named **OrdersDetails.cs** inside the **Models** folder on the server-side. This model will represent the order data structure.
+
+```cs
+using System.ComponentModel.DataAnnotations;
+
+namespace RemoteSaveAdaptor_MVC.Models
+{
+  public class OrdersDetails
+  {
+    public static List<OrdersDetails> order = new List<OrdersDetails>();
+    public OrdersDetails()
+    {
+
+    }
+    public OrdersDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, DateTime ShippedDate, string ShipAddress)
+    {
+      this.OrderID = OrderID;
+      this.CustomerID = CustomerId;
+      this.EmployeeID = EmployeeId;
+      this.Freight = Freight;
+      this.ShipCity = ShipCity;
+      this.Verified = Verified;
+      this.OrderDate = OrderDate;
+      this.ShipName = ShipName;
+      this.ShipCountry = ShipCountry;
+      this.ShippedDate = ShippedDate;
+      this.ShipAddress = ShipAddress;
+    }
+
+    public static List<OrdersDetails> GetAllRecords()
+    {
+      if (order.Count() == 0)
+      {
+        int code = 10000;
+        for (int i = 1; i <= 2000; i++)
+        {
+          order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
+          order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
+          order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
+          order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
+          order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
+          code += 5;
+        }
+      }
+      return order;
+    }
+    [Key]
+    public int? OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public int? EmployeeID { get; set; }
+    public double? Freight { get; set; }
+    public string ShipCity { get; set; }
+    public bool Verified { get; set; }
+    public DateTime OrderDate { get; set; }
+    public string ShipName { get; set; }
+    public string ShipCountry { get; set; }
+    public DateTime ShippedDate { get; set; }
+    public string ShipAddress { get; set; }
+  }
+}
+
+```
+
+**3. API Controller Creation:**
+
+Create a file named `OrdersController.cs` under the **Controllers** folder. This controller will handle data retrieval and communication with the Syncfusion ASP.NET MVC Grid.
+
+```cs
+using RemoteSaveAdaptor_MVC.Models;
+using System.Web.Mvc;
+
+namespace RemoteSaveAdaptor_MVC.Controllers
+{
+    public class OrdersController : Controller
+    {
+        [HttpGet]
+        public JsonResult GetOrderData()
+        {
+            // Retrieve data from the data source (e.g., database).
+            var data = OrdersDetails.GetAllRecords();
+            return Json(data, JsonRequestBehavior.AllowGet);
+        }
+
+        [HttpPost]
+        public JsonResult Post()
+        {
+            var data = OrdersDetails.GetAllRecords();
+            // Get the total records count.
+            int totalRecordsCount = data.Count;
+
+            // Return data based on the request.
+            return Json(new { result = data, count = totalRecordsCount });
+        }}}
+```
+
+The below class is used to structure data sent during CRUD operations.
+
+```cs
+ public class CRUDModel<T> where T : class
+ {
+     public string action { get; set; }
+     public string keyColumn { get; set; }
+     public object key { get; set; }
+     public T value { get; set; }
+     public List<T> added { get; set; }
+     public List<T> changed { get; set; }
+     public List<T> deleted { get; set; }
+     public IDictionary<string, object> @params { get; set; }
+ }
+```
+
+**Insert Operation:**
+
+To insert a new record, utilize the `InsertUrl` property to specify the controller action mapping URL for the insert operation. Implement the `Insert` method in the API controller to handle the insertion of new records.The newly added record details are bound to the **newRecord** parameter.
+
+![Insert record](../images/adaptors/remotesave-adaptor-insert.png)
+
+```cs
+     /// <summary>
+     /// Inserts a new data item into the data collection.
+     /// </summary>
+     /// <returns>It returns the newly inserted record detail.</returns>
+     [HttpPost]
+     public JsonResult Insert(CRUDModel<OrdersDetails> newRecord)
+     {
+         if (newRecord.value != null)
+         {
+             var orders = OrdersDetails.GetAllRecords();
+             newRecord.value.OrderID = orders.Max(o => o.OrderID) + 1;
+             orders.Insert(0, newRecord.value);
+         }
+
+         return Json(newRecord.value);
+     }
+```
+
+**Update Operation:**
+
+For updating existing records, use the `UpdateUrl` property to specify the controller action mapping URL for the update operation. Implement the Update method in the API controller to handle record updates. The updated record details are bound to the **updatedRecord** parameter.
+
+![Update record](../images/adaptors/remotesave-adaptor-update.png)
+
+```cs
+  /// <summary>
+  /// Updates an existing order.
+  /// </summary>
+  /// <param name="updateRecord">The updated order details.</param>
+  /// <returns>It returns the updated order details.</returns>
+   public JsonResult Update(CRUDModel<OrdersDetails> updatedRecord)
+   {
+     var updatedOrder = updatedRecord.value;
+     if (updatedOrder != null)
+     {
+         var data = OrdersDetails.GetAllRecords().FirstOrDefault(o => o.OrderID == updatedOrder.OrderID);
+         if (data != null)
+         {
+             // Update the existing record.
+             data.CustomerID = updatedOrder.CustomerID;
+             data.ShipCity = updatedOrder.ShipCity;
+             data.ShipCountry = updatedOrder.ShipCountry;
+             data.Freight = updatedOrder.Freight;
+             // Update other properties similarly.
+         }
+     }
+     return Json(updatedRecord);
+ }
+```
+
+**Delete Operation**
+
+To delete existing records, use the `RemoveUrl` property to specify the controller action mapping URL for the delete operation. The primary key value of the deleted record is bound to the **deletedRecord** parameter.
+
+![Delete Record](../images/adaptors/remotesave-adaptor-delete.png)
+
+```cs
+        /// <summary>
+        /// Deletes an order.
+        /// </summary>
+        /// <param name="deletedRecord">It contains the specific record detail which is need to be removed.</param>
+        /// <returns>It returns the deleted record detail.</returns>
+        [HttpPost]
+        public JsonResult Remove(CRUDModel<OrdersDetails> deletedRecord)
+        {
+            if (deletedRecord.key != null)
+            {
+                int orderId = int.Parse(deletedRecord.key.ToString());
+                var orders = OrdersDetails.GetAllRecords();
+                // Get key value from the deletedRecord.
+                var data = orders.FirstOrDefault(o => o.OrderID == orderId);
+                if (data != null)
+                {
+                    // Remove the record from the data collection.
+                    orders.Remove(data);
+                }
+            }
+            return Json(deletedRecord);
+        }
+```
+
+## Connecting Syncfusion ASP.NET MVC Grid to an API Service
+
+To integrate the Syncfusion Grid into your ASP.NET MVC project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET MVC Package:
+
+To add `ASP.NET MVC` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET MVC namespace:
+
+Add `Syncfusion.EJ2` namespace reference in `Web.config` file under `Views` folder.
+
+```cs
+<namespaces>
+    <add namespace="Syncfusion.EJ2"/>
+</namespaces>
+```
+
+**Step 3:** Add stylesheet and script resources:
+
+To include the required styles and scripts, add the following references inside the `<head>` section of `~/Pages/Shared/_Layout.cshtml`:
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET MVC control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET MVC control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET MVC controls: -->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager:
+
+To ensure proper script execution, register the Syncfusion Script Manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml`.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<body>
+...
+    <!-- Syncfusion ASP.NET MVC Script Manager -->
+    @Html.EJS().ScriptManager()
+</body>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 5:** Add ASP.NET MVC Grid:
+
+Now, add the Syncfusion ASP.NET MVC Grid in `~/Views/Home/Index.cshtml` page.  The Grid will fetch data from a remote API and support various features such as paging, sorting, filtering, and CRUD operations.
+
+***CRUD Operations Mapping:*** CRUD operations in the Grid can be mapped to server-side controller actions using the following properties:
+
+* **InsertUrl**: Specifies the URL for inserting new data.
+* **RemoveUrl**: Specifies the URL for removing existing data.
+* **UpdateUrl**: Specifies the URL for updating existing data.
+* **CrudUrl**: Specifies a single URL for all CRUD operations.
+* **BatchUrl**: Specifies the URL for batch editing.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").EditSettings(edit => edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal)).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" }).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    col.Field("ShipCity").HeaderText("Ship City").Width("140").Add();
+}).Render()
+@section Scripts {
+    <script>
+    document.addEventListener("DOMContentLoaded", function () {
+            loadGridData();
+        });
+
+        function loadGridData() {
+            fetch('/Orders/GetOrderData') // Fetch from the backend API.
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error("Failed to fetch data.");
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    var dataManager = new ej.data.DataManager({
+                        json: data,
+                        insertUrl: '/Orders/Insert',
+                        updateUrl: '/Orders/Update',
+                        removeUrl: '/Orders/Remove',
+                        adaptor: new ej.data.RemoteSaveAdaptor()
+                    });
+
+                    var grid = document.querySelector('#Grid')?.ej2_instances?.[0];
+                    if (grid) {
+                        grid.dataSource = dataManager;
+                    } else {
+                        console.error("Grid instance not found!");
+                    }
+                })
+                .catch(error => console.error("Error:", error));
+        }
+    </script>
+}
+{% endhighlight %}
+{% endtabs %}
+
+**Step 7:** Run the Project
+
+Run the project in Visual Studio, and the Syncfusion ASP.NET MVC Grid will successfully fetch data from the API service.
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/url-adaptor.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/url-adaptor.md
new file mode 100644
index 0000000000..40173ee376
--- /dev/null
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/url-adaptor.md
@@ -0,0 +1,617 @@
+---
+layout: post
+title: UrlAdaptor in Syncfusion ##Platform_Name## Grid.
+description: Learn here all about Bind data and perform CRUD action with UrlAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Grid
+keywords: Adaptors, UrlAdaptor, url method adaptor, remotedata 
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# UrlAdaptor in Syncfusion ASP.NET MVC Grid
+
+The `UrlAdaptor` serves as the base adaptor for facilitating communication between remote data services and an UI control. It enables seamless data binding and interaction with custom API services or any remote service through URLs. The `UrlAdaptor` is particularly useful for the scenarios where a custom API service with unique logic for handling data and CRUD operations is in place. This approach allows for custom handling of data and CRUD operations, and the resultant data returned in the `result` and `count` format for display in the Syncfusion ASP.NET MVC Grid.
+
+This section describes a step-by-step process for retrieving data using `UrlAdaptor`, then binding it to the ASP.NET MVC Grid to facilitate data and CRUD operations.
+
+## Creating an API Service
+
+To configure a server with Syncfusion ASP.NET MVC Grid, follow the below steps:
+
+**1. Project Creation:**
+
+Open Visual Studio and create an ASP.NET MVC project named **UrlAdaptor**. To create an ASP.NET MVC application, follow the documentation [link](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app) for detailed steps.
+
+**2. Model Class Creation:**
+
+Create a model class named **Orders.cs** inside the **Models** folder on the server-side. This model will represent the order data structure.
+
+{% tabs %}
+{% highlight cs tabtitle="Orders.cs" %}
+
+namespace UrlAdaptor_MVC.Models
+{
+    public class Orders
+    {
+        public int OrderID { get; set; }
+        public string CustomerID { get; set; }
+        public int EmployeeID { get; set; }
+        public DateTime OrderDate { get; set; }
+        public string ShipCity { get; set; }
+        public decimal Freight { get; set; }
+
+        public static List<Orders> GetAllRecords()
+        {
+            return new List<Orders>()
+            {
+                new Orders() { OrderID = 10248, CustomerID = "VINET", EmployeeID = 5, OrderDate = DateTime.Now.AddDays(-10), ShipCity = "Reims", Freight = 32.38M },
+                new Orders() { OrderID = 10249, CustomerID = "TOMSP", EmployeeID = 6, OrderDate = DateTime.Now.AddDays(-8), ShipCity = "Münster", Freight = 11.61M },
+                new Orders() { OrderID = 10250, CustomerID = "HANAR", EmployeeID = 4, OrderDate = DateTime.Now.AddDays(-6), ShipCity = "Rio de Janeiro", Freight = 65.83M }
+            };
+        }
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**3. API Controller Creation:**
+
+Create a file named `GridController.cs` under the **Controllers** folder. This controller will handle data retrieval and communication with the Syncfusion ASP.NET MVC Grid.
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+
+using System.Web.Mvc;
+using Syncfusion.EJ2.Base;
+using UrlAdaptor_MVC.Models;
+
+namespace UrlAdaptor_MVC.Controllers
+{
+  public class GridController : Controller
+  {
+    private static List<Orders> order = Orders.GetAllRecords();
+    [HttpPost]
+    public ActionResult UrlDatasource(DataManagerRequest dm)
+    {
+        // Retrieve data source and convert to queryable.
+        IEnumerable<Orders> DataSource = order;
+        DataOperations operation = new DataOperations();
+
+        // Get total record count.
+        int count = DataSource.Count();
+
+        // Return result and total record count.
+        return dm.RequiresCounts ? Json(new { result = DataSource, count }) : Json(DataSource);
+    }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Connecting Syncfusion ASP.NET MVC Grid to an API Service
+
+To integrate the Syncfusion Grid into your ASP.NET MVC project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET MVC Package:
+
+To add `ASP.NET MVC` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET MVC namespace
+
+Add `Syncfusion.EJ2` namespace reference in `Web.config` under `Views` folder.
+
+```cs
+<namespaces>
+    <add namespace="Syncfusion.EJ2"/>
+</namespaces>
+```
+
+**Step 3:** Add stylesheet and script resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET MVC control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET MVC control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET MVC controls: -->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager
+
+To ensure proper script execution, register the Syncfusion Script Manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml` file as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<body>
+...
+    <!-- Syncfusion ASP.NET MVC Script Manager -->
+    @Html.EJS().ScriptManager()
+</body>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 5:** Add the Syncfusion ASP.NET MVC Grid
+
+Now, add the Syncfusion ASP.NET MVC Grid tag helper in `~/Views/Home/Index.cshtml` file.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Index.cshtml" %}
+
+// Replace `xxxx` with your actual localhost port number.
+@Html.EJS().Grid("Grid").DataSource(ds => ds.Url("https://localhost:xxxx/Grid/UrlDatasource").Adaptor("UrlAdaptor")).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    col.Field("ShipCity").HeaderText("ShipCity").Width("140").Add();
+}).Render()
+
+{% endhighlight %}
+{% endtabs %}
+
+
+**Step 7:** Run the Project
+
+Run the project in Visual Studio, and the Syncfusion ASP.NET MVC Grid will successfully fetch data from the API service.
+
+> * The Syncfusion ASP.NET MVC Grid provides built-in support for handling various data operations such as searching, sorting, filtering, aggregate and paging on the server-side. These operations can be handled using methods such as `PerformSearching`, `PerformFiltering`, `PerformSorting`, `PerformTake` and `PerformSkip` available in the [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) package. Let’s explore how to manage these data operations using the `UrlAdaptor`.
+> * In an API service project, add `Syncfusion.EJ2.MVC5` by opening the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install it.
+> * To access `DataManagerRequest`, import [Syncfusion.EJ2.Base](https://www.npmjs.com/package/@syncfusion/ej2-base) in `GridController.cs` file.
+
+## Handling Searching Operation
+
+To enable search functionality, ensure that your API endpoint supports custom searching criteria. Implement the searching logic on the server-side using the `PerformSearching`. This allows the custom data source to undergo searching based on the criteria specified in the incoming `DataManagerRequest` object.
+
+![UrlAdaptor searching](../images/adaptors/url-adaptors/url-adaptor-searching.png)
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+
+ [HttpPost]
+ public ActionResult UrlDatasource(DataManagerRequest DataManagerRequest)
+ {
+    // Retrieve data from the data source (e.g., database).
+    IEnumerable<Orders> DataSource = order;
+    DataOperations operation = new DataOperations(); // Initialize DataOperations instance.
+
+    // Handling Searching.
+    if (DataManagerRequest.Search != null && DataManagerRequest.Search.Count > 0)
+    {
+        DataSource = operation.PerformSearching(DataSource, DataManagerRequest.Search);
+    }
+
+    // Get the total records count.
+    int count = DataSource.Count();
+
+    // Return data based on the request.
+    return DataManagerRequest.RequiresCounts ? Json(new { result = DataSource, count }) : Json(DataSource);
+ }
+
+{% endhighlight %}
+{% highlight cshtml tabtitle="Index.cshtml" %}
+
+// Replace `xxxx` with your actual localhost port number.
+@Html.EJS().Grid("Grid").DataSource(ds => ds.Url("https://localhost:xxxx/Grid/UrlDatasource").Adaptor("UrlAdaptor")).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    col.Field("ShipCity").HeaderText("ShipCity").Width("140").Add();
+}).Toolbar(new List<string>() { "Search" }).Render()
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handling Filtering Operation
+
+To handle filtering operation, configure your API endpoint to support filter criteria. Implement the filtering logic on the server-side using the `PerformFiltering`. This allows the custom data source to undergo filtering based on the criteria specified in the incoming `DataManagerRequest` object.
+
+**Single column filtering**
+![Single column filtering](../images/adaptors/url-adaptors/url-adaptor-filtering.png)
+
+**Multi column filtering**
+![Multi column filtering](../images/adaptors/url-adaptors/url-adaptor-multi-filtering.png)
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+ [HttpPost]
+ public ActionResult UrlDatasource(DataManagerRequest DataManagerRequest)
+ {
+     // Retrieve data from the data source (e.g., database).
+     IEnumerable<Orders> DataSource = order;
+     DataOperations operation = new DataOperations(); // Initialize DataOperations instance.
+
+     // Handling filtering operation.
+     if (DataManagerRequest.Where != null && DataManagerRequest.Where.Count > 0)
+     {
+         DataSource = operation.PerformFiltering(DataSource, DataManagerRequest.Where, DataManagerRequest.Where[0].Operator);
+     }
+
+     // Get the total records count.
+     int count = DataSource.Count();
+
+     // Return data based on the request.
+     return DataManagerRequest.RequiresCounts ? Json(new { result = DataSource, count }) : Json(DataSource);
+ }
+{% endhighlight %}
+{% highlight cshtml tabtitle="Index.cshtml" %}
+
+// Replace `xxxx` with your actual localhost port number.
+@Html.EJS().Grid("Grid").DataSource(ds => ds.Url("https://localhost:xxxx/Grid/UrlDatasource").Adaptor("UrlAdaptor")).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    col.Field("ShipCity").HeaderText("ShipCity").Width("140").Add();
+}).AllowFiltering().Render()
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handling Sorting Operation
+
+To handle sorting operation, configure your API to support custom sorting criteria. Implement the sorting logic on the server-side using the `PerformSorting`. This allows the custom data source to undergo sorting based on the criteria specified in the incoming `DataManagerRequest` object.
+
+**Single column sorting**
+![Single column sorting](../images/adaptors/url-adaptors/url-adaptor-sorting.png)
+
+**Multi column sorting**
+![Multi column sorting](../images/adaptors/url-adaptors/url-adaptor-multi-sorting.png)
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+
+public ActionResult UrlDatasource(DataManagerRequest DataManagerRequest)
+{
+    // Retrieve data from the data source (e.g., database).
+    IEnumerable<Orders> DataSource = order;
+    DataOperations operation = new DataOperations(); // Initialize DataOperations instance.
+
+    // Handling Sorting operation.
+    if (DataManagerRequest.Sorted != null && DataManagerRequest.Sorted.Count > 0)
+    {
+        DataSource = operation.PerformSorting(DataSource, DataManagerRequest.Sorted);
+    }
+    // Get the total count of records.
+    int count = DataSource.Count();
+    
+    return DataManagerRequest.RequiresCounts ? Json(new { result = DataSource, count }) : Json(DataSource);
+}
+
+{% endhighlight %}
+{% highlight cshtml tabtitle="Index.cshtml" %}
+
+// Replace `xxxx` with your actual localhost port number.
+@Html.EJS().Grid("Grid").DataSource(ds => ds.Url("https://localhost:xxxx/Grid/UrlDatasource").Adaptor("UrlAdaptor")).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    col.Field("ShipCity").HeaderText("ShipCity").Width("140").Add();
+}).AllowSorting().Render()
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handling Paging Operation
+
+To handle paging operation, ensure that your API endpoint supports custom paging criteria. Implement the paging logic on the server-side using the `PerformTake` and `PerformSkip`. This allows the custom data source to undergo paging based on the criteria specified in the incoming `DataManagerRequest` object.
+
+![UrlAdaptor paging](../images/adaptors/url-adaptors/url-adaptor-paging.png)
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+ [HttpPost]
+ public ActionResult UrlDatasource(DataManagerRequest DataManagerRequest)
+ {
+     // Retrieve data from the data source (e.g., database).
+     IEnumerable<Orders> DataSource = order;
+     DataOperations operation = new DataOperations(); // Initialize DataOperations instance.
+
+     // Get the total records count.
+     int count = DataSource.Count();
+
+     // Handling paging operation.
+     if (DataManagerRequest.Skip != 0)
+     {
+         DataSource = operation.PerformSkip(DataSource, DataManagerRequest.Skip);
+     }
+     if (DataManagerRequest.Take != 0)
+     {
+         DataSource = operation.PerformTake(DataSource, DataManagerRequest.Take);
+     }
+
+     // Return data based on the request.
+     return DataManagerRequest.RequiresCounts ? Json(new { result = DataSource, count }) : Json(DataSource);
+ }
+
+{% endhighlight %}
+{% highlight cshtml tabtitle="Index.cshtml" %}
+
+// Replace `xxxx` with your actual localhost port number.
+@Html.EJS().Grid("Grid").DataSource(ds => ds.Url("https://localhost:xxxx/Grid/UrlDatasource").Adaptor("UrlAdaptor")).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    col.Field("ShipCity").HeaderText("ShipCity").Width("140").Add();
+}).AllowPaging().Render()
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handling CRUD Operations
+
+The Syncfusion ASP.NET MVC Grid seamlessly integrates CRUD (Create, Read, Update, Delete) operations with server-side controller actions through specific properties: `InsertUrl`, `RemoveUrl`, `UpdateUrl`,`CrudUrl`, and `BatchUrl`. These properties enable the Grid to communicate with the data service for every Grid action, facilitating server-side operations.
+
+**CRUD Operations Mapping**
+
+The following properties enable the Grid to interact with API endpoints for different CRUD actions:
+
+1. **InsertUrl**: Specifies the URL for inserting new data.
+2. **RemoveUrl**: Specifies the URL for removing existing data.
+3. **UpdateUrl**: Specifies the URL for updating existing data.
+4. **CrudUrl**: Specifies a single URL for all CRUD operations.
+5. **BatchUrl**: Specifies the URL for batch editing.
+
+To enable editing in ASP.NET MVC Grid, refer to the editing [Documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/grid/editing/edit). In the below example, the inline edit `Mode` is enabled and [Toolbar](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Toolbar) property is configured to display toolbar items for editing purposes.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Index.cshtml" %}
+
+// Replace `xxxx` with your actual localhost port number.
+@Html.EJS().Grid("Grid").DataSource(ds => ds.Url("https://localhost:xxxx/Grid/UrlDatasource")
+        .UpdateUrl("https://localhost:xxxx/Grid/Update")
+        .InsertUrl("https://localhost:xxxx/Grid/Insert")
+        .RemoveUrl("https://localhost:xxxx/Grid/Remove").Adaptor("UrlAdaptor")).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    col.Field("ShipCity").HeaderText("ShipCity").Width("140").Add();
+}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
+{% endhighlight %}
+{% endtabs %}
+
+> Normal/Inline editing is the default edit `Mode` for the Grid. To enable CRUD operations, ensure that the `IsPrimaryKey` property is set to **true** for a specific Grid column, ensuring that its value is unique.
+
+The below class is used to structure data sent during CRUD operations.
+
+```cs
+  public class CRUDModel<T>
+  {
+      public string action { get; set; }
+      public string keyColumn { get; set; }
+      public object key { get; set; }
+      public T value { get; set; }
+      public List<T> Added { get; set; }
+      public List<T> Changed { get; set; }
+      public List<T> Deleted { get; set; }
+      public IDictionary<string, object> @params { get; set; }
+  }
+```
+
+**Insert Operation:**
+
+To insert a new record, utilize the `InsertUrl` property to specify the controller action mapping URL for the insert operation.
+
+![Insert record](../images/adaptors/url-adaptors/url-adaptor-insert-record.png)
+
+```cs
+
+      /// <summary>
+      /// Inserts a new data item into the data collection.
+      /// </summary>
+      /// <returns>Returns void.</returns>
+      public ActionResult Insert(Orders value)
+      {
+          if (value != null)
+          {
+              // Assign a new OrderID if missing.
+              value.OrderID = order.Count > 0 ? order.Max(o => o.OrderID) + 1 : 1;
+              order.Insert(0, value);
+          }
+
+          // Ensure returning the expected format.
+          return Json(new { result = value, count = order.Count });
+      }
+```
+
+**Update Operation:**
+
+For updating existing records, utilize the `UpdateUrl` property to specify the controller action mapping URL for the update operation.
+
+![Update record](../images/adaptors/url-adaptors/url-adaptor-update-record.png)
+
+```cs
+
+/// <summary>
+/// Update a existing data item from the data collection.
+/// </summary>
+/// <returns>Returns void.</returns>
+[HttpPost]
+public ActionResult Update(Orders value)
+{
+    // Find existing record.
+    var data = order.FirstOrDefault(or => or.OrderID == value.OrderID);
+    if (data != null)
+    {
+        // Update existing record.
+        data.CustomerID = value.CustomerID;
+        data.ShipCountry = value.ShipCountry;
+        data.ShipCity = value.ShipCity;
+        // Update other properties similarly.
+    }
+    return Json(value);
+}
+```
+
+**Delete Operation**
+
+To delete existing records, use the `RemoveUrl` property to specify the controller action mapping URL for the delete operation.
+
+![Delete Record](../images/adaptors/url-adaptors/url-adaptor-delete-record.png)
+
+```cs
+/// <summary>
+/// Remove a specific data item from the data collection.
+/// </summary>
+/// <return>Returns void.</return>
+[HttpPost]
+public ActionResult Remove(CRUDModel<Orders> value)
+{
+    var data = order.FirstOrDefault(or => or.OrderID == int.Parse(value.key.ToString())); // Get key value from the deletedRecord.
+    if (data != null)
+    {
+        // Remove the record from the data collection.
+        order.Remove(data);
+    }
+    return Json(value);
+}
+```
+
+![UrlAdaptor CRUD operations](../images/adaptors/url-adaptors/adaptor-crud-operation.gif)
+
+**Single method for performing all CRUD Operations**
+
+Using the `CrudUrl` property, the controller action mapping URL can be specified to perform all the CRUD operation at server-side using a single method instead of specifying separate controller action method for CRUD (insert, update and delete) operations.
+
+The following code example describes the above behavior.
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+
+ [HttpPost]
+ public JsonResult CrudUpdate(CRUDModel<Orders> request)
+ {
+     // Perform update operation.
+     if (request.action == "update")
+     {
+         var existingRecord = order.FirstOrDefault(o => o.OrderID == request.value.OrderID);
+         if (existingRecord != null)
+         {
+             existingRecord.CustomerID = request.value.CustomerID;
+             existingRecord.ShipCity = request.value.ShipCity;
+             existingRecord.Freight = request.value.Freight;
+         }
+     }
+     // Perform insert operation.
+     else if (request.action == "insert")
+     {
+         var newId = order.Any() ? order.Max(o => o.OrderID) + 1 : 1;
+         request.value.OrderID = newId;
+         order.Add(request.value);
+     }
+     // Perform remove operation.
+     else if (request.action == "remove")
+     {
+         var key = int.Parse(request.key.ToString());  
+         var recordToRemove = order.FirstOrDefault(o => o.OrderID == key);
+         if (recordToRemove != null)
+         {
+             order.Remove(recordToRemove);
+         }
+     }
+     return Json(order);
+ }
+{% endhighlight %}
+{% highlight cshtml tabtitle="Index.cshtml" %}
+
+// Replace `xxxx` with your actual localhost port number.
+@Html.EJS().Grid("Grid").DataSource(ds => ds.Url("https://localhost:xxxx/Grid/UrlDatasource")
+         .CrudUrl("/Grid/CrudUpdate").Adaptor("UrlAdaptor")).AllowSorting().Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    col.Field("ShipCity").HeaderText("ShipCity").Width("140").Add();
+}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
+
+{% endhighlight %}
+{% endtabs %}
+
+**Batch Operation**
+
+To perform batch operation, define the edit `Mode` as **Batch** and specify the `BatchUrl` property in the `DataManager`. Use the **Add** toolbar button to insert new row in batch editing mode. To edit a cell, double-click the desired cell and update the value as required. To delete a record, simply select the record and press the **Delete** toolbar button. Now, all CRUD operations will be executed in single request. Clicking the **Update** toolbar button will update the newly added, edited, or deleted records from the Orders table using a single API POST request.
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+  [HttpPost]
+  public ActionResult BatchUpdate(CRUDModel<Orders> batchModel)
+  {
+      if (batchModel.Added != null)
+      {
+          foreach (var item in batchModel.Added)
+          {
+              item.OrderID = order.Count > 0 ? order.Max(o => o.OrderID) + 1 : 1;
+              order.Insert(0, item);
+          }
+      }
+      if (batchModel.Changed != null)
+      {
+          foreach (var item in batchModel.Changed)
+          {
+              var data = order.FirstOrDefault(or => or.OrderID == item.OrderID);
+              if (data != null)
+              {
+                  data.CustomerID = item.CustomerID;
+                  data.ShipCity = item.ShipCity;
+                  // Update other properties as needed.
+              }
+          }
+      }
+      if (batchModel.Deleted != null)
+      {
+          foreach (var item in batchModel.Deleted)
+          {
+              var data = order.FirstOrDefault(or => or.OrderID == item.OrderID);
+              if (data != null)
+              {
+                  order.Remove(data);
+              }
+          }
+      }
+      return Json(order);
+  }
+{% endhighlight %}
+{% highlight cshtml tabtitle="Index.cshtml" %}
+
+// Replace `xxxx` with your actual localhost port number.
+@Html.EJS().Grid("Grid").DataSource(ds => ds.Url("https://localhost:xxxx/Grid/UrlDatasource").BatchUrl("https://localhost:xxxx/Grid/BatchUpdate").Adaptor("UrlAdaptor")).AllowSorting().Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    col.Field("ShipCity").HeaderText("ShipCity").Width("140").Add();
+}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
+{% endhighlight %}
+{% endtabs %}
+
+![UrlAdaptor Batch Editing](../images/adaptors/url-adaptors/url-adaptor-batch-editing.gif)
\ No newline at end of file
diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html
index b38b0ac55d..20589bc621 100644
--- a/ej2-asp-mvc-toc.html
+++ b/ej2-asp-mvc-toc.html
@@ -1249,6 +1249,12 @@
 						<li><a href="/ej2-asp-mvc/grid/data-binding/remote-data">Remote Data</a></li>
 					</ul>
 				</li>
+				<li>Connecting to Adaptors
+					<ul>
+					  <li><a href="/ej2-asp-mvc/grid/connecting-to-adaptors/url-adaptor">Url Adaptor</a></li>
+					  <li><a href="/ej2-asp-mvc/grid/connecting-to-adaptors/remote-save-adaptor">Remote Save Adaptor</a></li>  
+					</ul>
+				</li>
 				<li><a href="/ej2-asp-mvc/grid/data-annotation">Data Annotation</a></li>
 				<li><a href="/ej2-asp-mvc/grid/adaptive">Adaptive View</a></li>
 				<li><a href="/ej2-asp-mvc/grid/columns/columns">Columns</a>


Reviews:
user: login: farveensulthana
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-15T10:12:25Z
user: login: farveensulthana
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T05:32:14Z

Review comments:
diff_hunk: @@ -0,0 +1,610 @@
+---
+layout: post
+title: UrlAdaptor in Syncfusion ##Platform_Name## Grid.
+description: Learn here all about Bind data and perform CRUD action with UrlAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Grid
+keywords: Adaptors, UrlAdaptor, url method adaptor, remotedata 
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# UrlAdaptor in Syncfusion ASP.NET MVC Grid
+
+The `UrlAdaptor` serves as the base adaptor for facilitating communication between remote data services and an UI control. It enables seamless data binding and interaction with custom API services or any remote service through URLs. The `UrlAdaptor` is particularly useful for the scenarios where a custom API service with unique logic for handling data and CRUD operations is in place. This approach allows for custom handling of data and CRUD operations, and the resultant data returned in the `result` and `count` format for display in the Syncfusion ASP.NET MVC Grid.
+
+This section describes a step-by-step process for retrieving data using `UrlAdaptor`, then binding it to the ASP.NET MVC Grid to facilitate data and CRUD operations.
+
+## Creating an API Service
+
+To configure a server with Syncfusion ASP.NET MVC Grid, follow the below steps:
+
+**1. Project Creation:**
+
+Open Visual Studio and create an ASP.NET MVC project named **UrlAdaptor**. To create an ASP.NET MVC application, follow the documentation [link](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app) for detailed steps.
+
+**2. Model Class Creation:**
+
+Create a model class named **Orders.cs** inside the **Models** folder on the server-side. This model will represent the order data structure.
+
+{% tabs %}
+{% highlight cs tabtitle="Orders.cs" %}
+
+namespace UrlAdaptor_MVC.Models
+{
+    public class Orders
+    {
+        public int OrderID { get; set; }
+        public string CustomerID { get; set; }
+        public int EmployeeID { get; set; }
+        public DateTime OrderDate { get; set; }
+        public string ShipCity { get; set; }
+        public decimal Freight { get; set; }
+
+        public static List<Orders> GetAllRecords()
+        {
+            return new List<Orders>()
+            {
+                new Orders() { OrderID = 10248, CustomerID = "VINET", EmployeeID = 5, OrderDate = DateTime.Now.AddDays(-10), ShipCity = "Reims", Freight = 32.38M },
+                new Orders() { OrderID = 10249, CustomerID = "TOMSP", EmployeeID = 6, OrderDate = DateTime.Now.AddDays(-8), ShipCity = "Münster", Freight = 11.61M },
+                new Orders() { OrderID = 10250, CustomerID = "HANAR", EmployeeID = 4, OrderDate = DateTime.Now.AddDays(-6), ShipCity = "Rio de Janeiro", Freight = 65.83M }
+            };
+        }
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**3. API Controller Creation:**
+
+Create a file named `GridController.cs` under the **Controllers** folder. This controller will handle data retrieval and communication with the Syncfusion ASP.NET MVC Grid.
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+
+using System.Web.Mvc;
+using Syncfusion.EJ2.Base;
+using UrlAdaptor_MVC.Models;
+
+namespace UrlAdaptor_MVC.Controllers
+{
+  public class GridController : Controller
+  {
+    private static List<Orders> order = Orders.GetAllRecords();
+    [HttpPost]
+    public ActionResult UrlDatasource(DataManagerRequest dm)
+    {
+        // Retrieve data source and convert to queryable.
+        IEnumerable<Orders> DataSource = order;
+        DataOperations operation = new DataOperations();
+
+        // Get total record count.
+        int count = DataSource.Count();
+
+        // Return result and total record count.
+        return dm.RequiresCounts ? Json(new { result = DataSource, count }) : Json(DataSource);
+    }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Connecting Syncfusion ASP.NET MVC Grid to an API Service
+
+To integrate the Syncfusion Grid into your ASP.NET MVC project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET MVC Package:
+
+To add `ASP.NET MVC` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET MVC namespace
+
+Add `Syncfusion.EJ2` namespace reference in `Web.config` under `Views` folder.
+
+```cs
+<namespaces>
+    <add namespace="Syncfusion.EJ2"/>
+</namespaces>
+```
+
+**Step 3:** Add stylesheet and script resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET MVC control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET MVC control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET MVC controls: -->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager
+
+To ensure proper script execution, register the Syncfusion Script Manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml` file as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<body>
+...
+    <!-- Syncfusion ASP.NET MVC Script Manager -->
+    @Html.EJS().ScriptManager()
+</body>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 5:** Add the Syncfusion ASP.NET MVC Grid
+
+Now, add the Syncfusion ASP.NET MVC Grid tag helper in `~/Views/Home/Index.cshtml` file.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Index.cshtml" %}
+// Replace `xxxx` with your actual localhost port number.
+@Html.EJS().Grid("Grid").DataSource(ds => ds.Url("https://localhost:xxxx/Grid/UrlDatasource").Adaptor("UrlAdaptor")).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    col.Field("ShipCity").HeaderText("ShipCity").Width("140").Add();
+}).Render()
+{% endhighlight %}
+{% endtabs %}
+
+
+**Step 7:** Run the Project
+
+Run the project in Visual Studio, and the Syncfusion ASP.NET MVC Grid will successfully fetch data from the API service.
+
+> * The Syncfusion ASP.NET MVC Grid provides built-in support for handling various data operations such as searching, sorting, filtering, aggregate and paging on the server-side. These operations can be handled using methods such as `PerformSearching`, `PerformFiltering`, `PerformSorting`, `PerformTake` and `PerformSkip` available in the [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) package. Let’s explore how to manage these data operations using the `UrlAdaptor`.
+> * In an API service project, add `Syncfusion.EJ2.MVC5` by opening the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install it.
+> * To access `DataManagerRequest`, import [Syncfusion.EJ2.Base](https://www.npmjs.com/package/@syncfusion/ej2-base) in `GridController.cs` file.
+
+## Handling Searching Operation
+
+To enable search functionality, ensure that your API endpoint supports custom searching criteria. Implement the searching logic on the server-side using the `PerformSearching`. This allows the custom data source to undergo searching based on the criteria specified in the incoming `DataManagerRequest` object.
+
+![UrlAdaptor searching](../images/adaptors/url-adaptors/url-adaptor-searching.png)
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+ [HttpPost]
+ public ActionResult UrlDatasource(DataManagerRequest DataManagerRequest)
+ {
+    // Retrieve data from the data source (e.g., database).
+    IEnumerable<Orders> DataSource = order;
+    DataOperations operation = new DataOperations(); // Initialize DataOperations instance.
+
+    // Handling Searching.
+    if (DataManagerRequest.Search != null && DataManagerRequest.Search.Count > 0)
+    {
+        DataSource = operation.PerformSearching(DataSource, DataManagerRequest.Search);
+    }
+
+    // Get the total records count.
+    int count = DataSource.Count();
+
+    // Return data based on the request.
+    return DataManagerRequest.RequiresCounts ? Json(new { result = DataSource, count }) : Json(DataSource);
+ }
+{% endhighlight %}
+{% highlight ts tabtitle="Index.cshtml" %}
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/url-adaptor.md
user: login: farveensulthana
body: why ts tabtitle used for mvc platform. Check in all places 
created_at: 2025-03-15T10:07:23Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,610 @@
+---
+layout: post
+title: UrlAdaptor in Syncfusion ##Platform_Name## Grid.
+description: Learn here all about Bind data and perform CRUD action with UrlAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Grid
+keywords: Adaptors, UrlAdaptor, url method adaptor, remotedata 
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# UrlAdaptor in Syncfusion ASP.NET MVC Grid
+
+The `UrlAdaptor` serves as the base adaptor for facilitating communication between remote data services and an UI control. It enables seamless data binding and interaction with custom API services or any remote service through URLs. The `UrlAdaptor` is particularly useful for the scenarios where a custom API service with unique logic for handling data and CRUD operations is in place. This approach allows for custom handling of data and CRUD operations, and the resultant data returned in the `result` and `count` format for display in the Syncfusion ASP.NET MVC Grid.
+
+This section describes a step-by-step process for retrieving data using `UrlAdaptor`, then binding it to the ASP.NET MVC Grid to facilitate data and CRUD operations.
+
+## Creating an API Service
+
+To configure a server with Syncfusion ASP.NET MVC Grid, follow the below steps:
+
+**1. Project Creation:**
+
+Open Visual Studio and create an ASP.NET MVC project named **UrlAdaptor**. To create an ASP.NET MVC application, follow the documentation [link](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app) for detailed steps.
+
+**2. Model Class Creation:**
+
+Create a model class named **Orders.cs** inside the **Models** folder on the server-side. This model will represent the order data structure.
+
+{% tabs %}
+{% highlight cs tabtitle="Orders.cs" %}
+
+namespace UrlAdaptor_MVC.Models
+{
+    public class Orders
+    {
+        public int OrderID { get; set; }
+        public string CustomerID { get; set; }
+        public int EmployeeID { get; set; }
+        public DateTime OrderDate { get; set; }
+        public string ShipCity { get; set; }
+        public decimal Freight { get; set; }
+
+        public static List<Orders> GetAllRecords()
+        {
+            return new List<Orders>()
+            {
+                new Orders() { OrderID = 10248, CustomerID = "VINET", EmployeeID = 5, OrderDate = DateTime.Now.AddDays(-10), ShipCity = "Reims", Freight = 32.38M },
+                new Orders() { OrderID = 10249, CustomerID = "TOMSP", EmployeeID = 6, OrderDate = DateTime.Now.AddDays(-8), ShipCity = "Münster", Freight = 11.61M },
+                new Orders() { OrderID = 10250, CustomerID = "HANAR", EmployeeID = 4, OrderDate = DateTime.Now.AddDays(-6), ShipCity = "Rio de Janeiro", Freight = 65.83M }
+            };
+        }
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**3. API Controller Creation:**
+
+Create a file named `GridController.cs` under the **Controllers** folder. This controller will handle data retrieval and communication with the Syncfusion ASP.NET MVC Grid.
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+
+using System.Web.Mvc;
+using Syncfusion.EJ2.Base;
+using UrlAdaptor_MVC.Models;
+
+namespace UrlAdaptor_MVC.Controllers
+{
+  public class GridController : Controller
+  {
+    private static List<Orders> order = Orders.GetAllRecords();
+    [HttpPost]
+    public ActionResult UrlDatasource(DataManagerRequest dm)
+    {
+        // Retrieve data source and convert to queryable.
+        IEnumerable<Orders> DataSource = order;
+        DataOperations operation = new DataOperations();
+
+        // Get total record count.
+        int count = DataSource.Count();
+
+        // Return result and total record count.
+        return dm.RequiresCounts ? Json(new { result = DataSource, count }) : Json(DataSource);
+    }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Connecting Syncfusion ASP.NET MVC Grid to an API Service
+
+To integrate the Syncfusion Grid into your ASP.NET MVC project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET MVC Package:
+
+To add `ASP.NET MVC` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET MVC namespace
+
+Add `Syncfusion.EJ2` namespace reference in `Web.config` under `Views` folder.
+
+```cs
+<namespaces>
+    <add namespace="Syncfusion.EJ2"/>
+</namespaces>
+```
+
+**Step 3:** Add stylesheet and script resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET MVC control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET MVC control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET MVC controls: -->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager
+
+To ensure proper script execution, register the Syncfusion Script Manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml` file as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<body>
+...
+    <!-- Syncfusion ASP.NET MVC Script Manager -->
+    @Html.EJS().ScriptManager()
+</body>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 5:** Add the Syncfusion ASP.NET MVC Grid
+
+Now, add the Syncfusion ASP.NET MVC Grid tag helper in `~/Views/Home/Index.cshtml` file.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Index.cshtml" %}
+// Replace `xxxx` with your actual localhost port number.
+@Html.EJS().Grid("Grid").DataSource(ds => ds.Url("https://localhost:xxxx/Grid/UrlDatasource").Adaptor("UrlAdaptor")).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    col.Field("ShipCity").HeaderText("ShipCity").Width("140").Add();
+}).Render()
+{% endhighlight %}
+{% endtabs %}
+
+
+**Step 7:** Run the Project
+
+Run the project in Visual Studio, and the Syncfusion ASP.NET MVC Grid will successfully fetch data from the API service.
+
+> * The Syncfusion ASP.NET MVC Grid provides built-in support for handling various data operations such as searching, sorting, filtering, aggregate and paging on the server-side. These operations can be handled using methods such as `PerformSearching`, `PerformFiltering`, `PerformSorting`, `PerformTake` and `PerformSkip` available in the [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) package. Let’s explore how to manage these data operations using the `UrlAdaptor`.
+> * In an API service project, add `Syncfusion.EJ2.MVC5` by opening the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install it.
+> * To access `DataManagerRequest`, import [Syncfusion.EJ2.Base](https://www.npmjs.com/package/@syncfusion/ej2-base) in `GridController.cs` file.
+
+## Handling Searching Operation
+
+To enable search functionality, ensure that your API endpoint supports custom searching criteria. Implement the searching logic on the server-side using the `PerformSearching`. This allows the custom data source to undergo searching based on the criteria specified in the incoming `DataManagerRequest` object.
+
+![UrlAdaptor searching](../images/adaptors/url-adaptors/url-adaptor-searching.png)
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+ [HttpPost]
+ public ActionResult UrlDatasource(DataManagerRequest DataManagerRequest)
+ {
+    // Retrieve data from the data source (e.g., database).
+    IEnumerable<Orders> DataSource = order;
+    DataOperations operation = new DataOperations(); // Initialize DataOperations instance.
+
+    // Handling Searching.
+    if (DataManagerRequest.Search != null && DataManagerRequest.Search.Count > 0)
+    {
+        DataSource = operation.PerformSearching(DataSource, DataManagerRequest.Search);
+    }
+
+    // Get the total records count.
+    int count = DataSource.Count();
+
+    // Return data based on the request.
+    return DataManagerRequest.RequiresCounts ? Json(new { result = DataSource, count }) : Json(DataSource);
+ }
+{% endhighlight %}
+{% highlight ts tabtitle="Index.cshtml" %}
+
+// Replace `xxxx` with your actual localhost port number.
+@Html.EJS().Grid("Grid").DataSource(ds => ds.Url("https://localhost:xxxx/Grid/UrlDatasource").Adaptor("UrlAdaptor")).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    col.Field("ShipCity").HeaderText("ShipCity").Width("140").Add();
+}).Toolbar(new List<string>() { "Search" }).Render()
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handling Filtering Operation
+
+To handle filtering operation, configure your API endpoint to support filter criteria. Implement the filtering logic on the server-side using the `PerformFiltering`. This allows the custom data source to undergo filtering based on the criteria specified in the incoming `DataManagerRequest` object.
+
+**Single column filtering**
+![Single column filtering](../images/adaptors/url-adaptors/url-adaptor-filtering.png)
+
+**Multi column filtering**
+![Multi column filtering](../images/adaptors/url-adaptors/url-adaptor-multi-filtering.png)
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+ [HttpPost]
+ public ActionResult UrlDatasource(DataManagerRequest DataManagerRequest)
+ {
+     // Retrieve data from the data source (e.g., database).
+     IEnumerable<Orders> DataSource = order;
+     DataOperations operation = new DataOperations(); // Initialize DataOperations instance.
+
+     // Handling filtering operation.
+     if (DataManagerRequest.Where != null && DataManagerRequest.Where.Count > 0)
+     {
+         DataSource = operation.PerformFiltering(DataSource, DataManagerRequest.Where, DataManagerRequest.Where[0].Operator);
+     }
+
+     // Get the total records count.
+     int count = DataSource.Count();
+
+     // Return data based on the request.
+     return DataManagerRequest.RequiresCounts ? Json(new { result = DataSource, count }) : Json(DataSource);
+ }
+{% endhighlight %}
+{% highlight ts tabtitle="Index.cshtml" %}
+
+// Replace `xxxx` with your actual localhost port number.
+@Html.EJS().Grid("Grid").DataSource(ds => ds.Url("https://localhost:xxxx/Grid/UrlDatasource").Adaptor("UrlAdaptor")).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    col.Field("ShipCity").HeaderText("ShipCity").Width("140").Add();
+}).AllowFiltering().Render()
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handling Sorting Operation
+
+To handle sorting operation, configure your API to support custom sorting criteria. Implement the sorting logic on the server-side using the `PerformSorting`. This allows the custom data source to undergo sorting based on the criteria specified in the incoming `DataManagerRequest` object.
+
+**Single column sorting**
+![Single column sorting](../images/adaptors/url-adaptors/url-adaptor-sorting.png)
+
+**Multi column sorting**
+![Multi column sorting](../images/adaptors/url-adaptors/url-adaptor-multi-sorting.png)
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+public ActionResult UrlDatasource(DataManagerRequest DataManagerRequest)
+{
+    // Retrieve data from the data source (e.g., database).
+    IEnumerable<Orders> DataSource = order;
+    DataOperations operation = new DataOperations(); // Initialize DataOperations instance.
+
+    // Handling Sorting operation.
+    if (DataManagerRequest.Sorted != null && DataManagerRequest.Sorted.Count > 0)
+    {
+        DataSource = operation.PerformSorting(DataSource, DataManagerRequest.Sorted);
+    }
+    // Get the total count of records.
+    int count = DataSource.Count();
+    
+    return DataManagerRequest.RequiresCounts ? Json(new { result = DataSource, count }) : Json(DataSource);
+}
+{% endhighlight %}
+{% highlight ts tabtitle="Index.cshtml" %}
+
+// Replace `xxxx` with your actual localhost port number.
+@Html.EJS().Grid("Grid").DataSource(ds => ds.Url("https://localhost:xxxx/Grid/UrlDatasource").Adaptor("UrlAdaptor")).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    col.Field("ShipCity").HeaderText("ShipCity").Width("140").Add();
+}).AllowSorting().Render()
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handling Paging Operation
+
+To handle paging operation, ensure that your API endpoint supports custom paging criteria. Implement the paging logic on the server-side using the `PerformTake` and `PerformSkip`. This allows the custom data source to undergo paging based on the criteria specified in the incoming `DataManagerRequest` object.
+
+![UrlAdaptor paging](../images/adaptors/url-adaptors/url-adaptor-paging.png)
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+ [HttpPost]
+ public ActionResult UrlDatasource(DataManagerRequest DataManagerRequest)
+ {
+     // Retrieve data from the data source (e.g., database).
+     IEnumerable<Orders> DataSource = order;
+     DataOperations operation = new DataOperations(); // Initialize DataOperations instance.
+
+     // Get the total records count.
+     int count = DataSource.Count();
+
+     // Handling paging operation.
+     if (DataManagerRequest.Skip != 0)
+     {
+         DataSource = operation.PerformSkip(DataSource, DataManagerRequest.Skip);
+     }
+     if (DataManagerRequest.Take != 0)
+     {
+         DataSource = operation.PerformTake(DataSource, DataManagerRequest.Take);
+     }
+
+     // Return data based on the request.
+     return DataManagerRequest.RequiresCounts ? Json(new { result = DataSource, count }) : Json(DataSource);
+ }
+{% endhighlight %}
+{% highlight ts tabtitle="Index.cshtml" %}
+
+// Replace `xxxx` with your actual localhost port number.
+@Html.EJS().Grid("Grid").DataSource(ds => ds.Url("https://localhost:xxxx/Grid/UrlDatasource").Adaptor("UrlAdaptor")).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    col.Field("ShipCity").HeaderText("ShipCity").Width("140").Add();
+}).AllowPaging().Render()
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handling CRUD Operations
+
+The Syncfusion ASP.NET MVC Grid seamlessly integrates CRUD (Create, Read, Update, Delete) operations with server-side controller actions through specific properties: `InsertUrl`, `RemoveUrl`, `UpdateUrl`,`CrudUrl`, and `BatchUrl`. These properties enable the Grid to communicate with the data service for every Grid action, facilitating server-side operations.
+
+**CRUD Operations Mapping**
+
+The following properties enable the Grid to interact with API endpoints for different CRUD actions:
+
+1. **InsertUrl**: Specifies the URL for inserting new data.
+2. **RemoveUrl**: Specifies the URL for removing existing data.
+3. **UpdateUrl**: Specifies the URL for updating existing data.
+4. **CrudUrl**: Specifies a single URL for all CRUD operations.
+5. **BatchUrl**: Specifies the URL for batch editing.
+
+To enable editing in ASP.NET MVC Grid, refer to the editing [Documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/grid/editing/edit). In the below example, the inline edit `Mode` is enabled and [Toolbar](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Toolbar) property is configured to display toolbar items for editing purposes.
+
+{% tabs %}
+{% highlight ts tabtitle="Index.cshtml" %}
+
+// Replace `xxxx` with your actual localhost port number.
+@Html.EJS().Grid("Grid").DataSource(ds => ds.Url("https://localhost:xxxx/Grid/UrlDatasource")
+        .UpdateUrl("https://localhost:xxxx/Grid/Update")
+        .InsertUrl("https://localhost:xxxx/Grid/Insert")
+        .RemoveUrl("https://localhost:xxxx/Grid/Remove").Adaptor("UrlAdaptor")).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+    col.Field("ShipCity").HeaderText("ShipCity").Width("140").Add();
+}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
+{% endhighlight %}
+{% endtabs %}
+
+> Normal/Inline editing is the default edit `Mode` for the Grid. To enable CRUD operations, ensure that the `isPrimaryKey` property is set to **true** for a specific Grid column, ensuring that its value is unique.
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/url-adaptor.md
user: login: farveensulthana
body: IsPrimaryKey casing is wrong
created_at: 2025-03-15T10:10:26Z
author_association: CONTRIBUTOR

PR comments:
user: login: SyncfusionBuild
created_at: 2025-02-18T13:32:28Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [EJ2-MVC-Adaptors-hotfix](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/3999/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-02-18T13:34:58Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [EJ2-MVC-Adaptors-hotfix](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/3999/)<br/>Technical Error(s): 0<br/>Spelling Error(s): 0<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/3999/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/3999/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/3999/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/3999/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/3999/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/3999/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/3999/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/3999/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/3999/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-14T11:44:23Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [EJ2-MVC-Adaptors-hotfix](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4481/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-14T11:56:53Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [EJ2-MVC-Adaptors-hotfix](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4481/)<br/>Technical Error(s): 0<br/>Spelling Error(s): 0<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4481/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4481/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4481/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4481/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4481/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4481/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4481/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4481/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4481/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-14T12:01:43Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [EJ2-MVC-Adaptors-hotfix](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4482/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-14T12:04:13Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [EJ2-MVC-Adaptors-hotfix](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4482/)<br/>Technical Error(s): 0<br/>Spelling Error(s): 0<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4482/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4482/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4482/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4482/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4482/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4482/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4482/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4482/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4482/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-14T12:06:48Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [EJ2-MVC-Adaptors-hotfix](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4483/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-14T12:08:27Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [EJ2-MVC-Adaptors-hotfix](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4483/)<br/>Technical Error(s): 0<br/>Spelling Error(s): 0<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4483/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4483/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4483/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4483/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4483/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4483/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4483/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4483/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4483/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-16T04:12:30Z
body: **Build Status: INQUEUE :clock3:<br/>Build Location: [EJ2-MVC-Adaptors-hotfix](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4494/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-16T04:17:30Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [EJ2-MVC-Adaptors-hotfix](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4494/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-16T04:21:40Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [EJ2-MVC-Adaptors-hotfix](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4494/)<br/>Technical Error(s): 0<br/>Spelling Error(s): 0<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4494/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4494/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4494/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4494/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4494/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4494/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4494/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4494/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4494/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR