Skip to content

Documentation - Need to revamp persisting-data-in-server file #4004

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: hotfix/hotfix-v28.2.3
Choose a base branch
from
Open

Documentation - Need to revamp persisting-data-in-server file #4004

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2d9e652
Documentation - Need to revamp persisting-data-in-server file
Gayathri4135 Mar 14, 2025
202d916
Modified the md file
Gayathri4135 Mar 16, 2025
fc39607
Merge branch 'hotfix/hotfix-v28.2.3' into EJ2-persisting-data-in-server
Gayathri4135 Mar 16, 2025
c7e9e54
Merge branch 'hotfix/hotfix-v28.2.3' into EJ2-persisting-data-in-server
Gayathri4135 Mar 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
266 changes: 19 additions & 247 deletions ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/persisting-data-in-server.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,268 +8,40 @@ publishingplatform: ##Platform_Name##
documentation: ug
---

# Persisting data in server in ASP.NET Core Grid

# Persisting Data in Server
The Syncfusion ASP.NET Core Grid allows data edited within the grid to be persisted in a database using RESTful web services. All CRUD (Create, Read, Update, Delete) operations within the grid are handled by the [DataManager](../../data), which can bind server-side data and send updates to the server. This capability is essential for maintaining data integrity and ensuring that changes made in the UI are reflected in the backend.

Edited data can be persisted in the database using the RESTful web services.
> For your information, the `ODataAdaptor` persists data in the server as per OData protocol.

All the CRUD operations in the grid are done through **DataManager**. The **DataManager** has an option to bind all the CRUD related data in server-side.
Syncfusion provides multiple adaptors to handle different server protocols and APIs, enabling smooth integration with RESTful services. Below are the various adaptors you can use to persist data in the Syncfusion ASP.NET Core Grid.

N> For your information, the ODataAdaptor persists data in the server as per OData protocol.
**Using URL adaptor**

In the below section, we have explained how to get the edited data details on the server-side using the **UrlAdaptor**.
The `UrlAdaptor` is the base adaptor that facilitates communication between remote data services and the UI component. It allows seamless data binding and interaction with custom API services or any remote service through URLs. The `UrlAdaptor` is particularly useful when a custom API service has unique logic for handling data and CRUD operations.

## Using URL adaptor
For further details on configuration, refer to the [URL adaptor Documentation]( https://ej2.syncfusion.com/aspnetcore/documentation/grid/connecting-to-adaptors/url-adaptor).

* You can use the **UrlAdaptor** of **DataManager** when binding data source from remote data.
* In the initial load of grid, data are fetched from remote data and bound to the grid using **url** property of **DataManager**.
* You can map The CRUD operation in grid can be mapped to server-side Controller actions using the properties **InsertUrl**, **RemoveUrl**, **UpdateUrl**, **CrudUrl** and **BatchUrl**.
**Using OData v4 adaptor**

The following code example describes the above behavior.
The `ODataV4Adaptor` in the Syncfusion ASP.NET Core Grid facilitates seamless integration with OData V4 services, allowing for efficient data fetching and manipulation. You can perform CRUD operations using the `ODataV4Adaptor` in your Syncfusion ASP.NET Core Grid.

{% if page.publishingplatform == "aspnet-core" %}
For further details on configuration, refer to the [OData v4 adaptor Documentation]( https://ej2.syncfusion.com/aspnetcore/documentation/grid/connecting-to-adaptors/odatav4-adaptor).

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/grid/edit/urladaptor/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Urladaptor.cs" %}
{% include code-snippet/grid/edit/urladaptor/urladaptor.cs %}
{% endhighlight %}
{% endtabs %}
**Using Web API adaptor**

{% elsif page.publishingplatform == "aspnet-mvc" %}
The `WebApiAdaptor` extends the capabilities of the `ODataAdaptor` and is designed to interact with Web APIs created with OData endpoints. This adaptor ensures seamless communication between the Syncfusion Grid and OData-based Web APIs, enabling efficient data retrieval and manipulation.

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/grid/edit/urladaptor/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Urladaptor.cs" %}
{% include code-snippet/grid/edit/urladaptor/urladaptor.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}
For further details on configuration, refer to the [Web API Adaptor documentation]( https://ej2.syncfusion.com/aspnetcore/documentation/grid/connecting-to-adaptors/web-api-adaptor).

**Using Remote Save adaptor**

The `RemoteSaveAdaptor` in the Syncfusion ASP.NET Core Grid allows you to perform grid actions such as sorting, filtering, searching, and paging primarily on the client side, while handling CRUD operations (updating, inserting, and removing data) on the server side for data persistence. This approach optimizes your experience by minimizing unnecessary server interactions.

Also, when using the **UrlAdaptor**, you need to return the data as JSON from the controller action and the JSON object must contain a property as **result** with dataSource as its value and one more property **count** with the dataSource total records count as its value.
For further details on configuration, refer to the[Remote Save Adaptor Documentation]( https://ej2.syncfusion.com/aspnetcore/documentation/grid/connecting-to-adaptors/remote-save-adaptor).

The following code example describes the above behavior.
**WebMethodAdaptor**

{% if page.publishingplatform == "aspnet-core" %}
The `WebMethodAdaptor` facilitates data binding from remote services using web methods. This adaptor sends query parameters encapsulated within an object named value, allowing efficient communication between the client-side application and the server.

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/grid/edit/urladaptor/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Data.cs" %}
{% include code-snippet/grid/edit/urladaptor/data.cs %}
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/grid/edit/urladaptor/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Data.cs" %}
{% include code-snippet/grid/edit/urladaptor/data.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}



### Insert record

Using the **InsertUrl** property, you can specify the controller action mapping URL to perform insert operation on the server-side.

The following code example describes the above behavior.

{% if page.publishingplatform == "aspnet-core" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/grid/edit/urladaptor/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Insert.cs" %}
{% include code-snippet/grid/edit/urladaptor/insert.cs %}
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/grid/edit/urladaptor/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Insert.cs" %}
{% include code-snippet/grid/edit/urladaptor/insert.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}



N> If you get posted data as **null** at the server side, then it might be due to the model state failure. You can check this using **ModelState.IsValid** and get the failure error details using **ModelState.Values** property.

The newly added record details are bound to the **value** parameter. Refer to the following screenshot.

![insert](../images/insert.jpg)

### Update record

Using the **UpdateUrl** property, the controller action mapping URL can be specified to perform save/update operation on the server-side.

The following code example describes the previous behavior.

{% if page.publishingplatform == "aspnet-core" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/grid/edit/urladaptor/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Update.cs" %}
{% include code-snippet/grid/edit/urladaptor/update.cs %}
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/grid/edit/urladaptor/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Update.cs" %}
{% include code-snippet/grid/edit/urladaptor/update.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}



N> If you get posted data as **null** at the server side, then it might be due to the model state failure. You can check this using **ModelState.IsValid** and get the failure error details using **ModelState.Values** property.

The updated record details are bound to the **value** parameter. Refer to the following screenshot.

![update](../images/update.jpg)

### Delete record

Using the **RemoveUrl** property, the controller action mapping URL can be specified to perform delete operation on the server-side.

The following code example describes the previous behavior.

{% if page.publishingplatform == "aspnet-core" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/grid/edit/urladaptor/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Delete.cs" %}
{% include code-snippet/grid/edit/urladaptor/delete.cs %}
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/grid/edit/urladaptor/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Delete.cs" %}
{% include code-snippet/grid/edit/urladaptor/delete.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}



N> If you get posted data as **null** at the server side, then it might be due to the model state failure. You can check this using **ModelState.IsValid** and get the failure error details using **ModelState.Values** property.

The deleted record primary key value is bound to the **key** parameter. Refer to the following screenshot.

![delete](../images/delete.jpg)

### CRUD URL

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 action parameter of **CrudUrl** is used to get the corresponding CRUD action.

The following code example describes the above behavior.

{% if page.publishingplatform == "aspnet-core" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/grid/edit/crudurl/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Crudurl.cs" %}
{% include code-snippet/grid/edit/crudurl/crudurl.cs %}
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/grid/edit/crudurl/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Crudurl.cs" %}
{% include code-snippet/grid/edit/crudurl/crudurl.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}



Refer to the following screenshot to know about the action parameter.

![crudupdate](../images/crudupdate.jpg)

N> If you specify **InsertUrl** along with **CrudUrl**, then while adding **InsertUrl** only will be invoked.
<br/> If you get posted data as **null** at the server side, then it might be due to the model state failure. You can check this using **ModelState.IsValid** and get the failure error details using **ModelState.Values** property.

### Batch URL

The **BatchUrl** property supports only for batch editing mode. You can specify the controller action mapping URL to perform batch operation on the server-side.

The following code example describes the above behavior.

{% if page.publishingplatform == "aspnet-core" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/grid/edit/batchurl/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="Batchurl.cs" %}
{% include code-snippet/grid/edit/batchurl/batchurl.cs %}
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/grid/edit/batchurl/razor %}
{% endhighlight %}
{% highlight c# tabtitle="Batchurl.cs" %}
{% include code-snippet/grid/edit/batchurl/batchurl.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}



N> If you get posted data as **null** at the server side, then it might be due to the model state failure. You can check this using **ModelState.IsValid** and get the failure error details using **ModelState.Values** property.

```typescript
public ActionResult BatchUpdate([FromBody]string action, List<EditableOrder> added, List<EditableOrder> changed, List<EditableOrder> deleted, int? key)
{
//Save the batch changes in database
}
```

![batch](../images/batch.jpg)
For further details on configuration, refer to the [Web API Adaptor documentation](https://ej2.syncfusion.com/aspnetcore/documentation/grid/connecting-to-adaptors/web-method-adaptor).