# Ajax Binding

You can configure the Grid component for Ajax binding.

When configured for Ajax binding, the Grid for ASP.NET MVC sends Ajax requests for paging, sorting, filtering, grouping, and saving data. For a runnable example, refer to the [Grid Ajax binding demo](https://demos.telerik.com/aspnet-mvc/grid/remote-data-binding).

The Ajax-bound mode has the following features:

* The Grid retrieves only the data (in JSON format) representing the current page. As a result, only the Grid is updated.
* All Grid templates (column, detail) are executed client-side. They follow the [Kendo UI for jQuery template](https://docs.telerik.com/kendo-ui/framework/templates/overview) definition rules and may contain embedded JavaScript code.

## Configuring Ajax Binding to Database Data

To configure the Grid for ASP.NET MVC for Ajax binding to the **Products** table in a sample database, follow these steps:

1. Create a new ASP.NET MVC web application. Follow the [Getting Started with Telerik UI for ASP.NET MVC](https://www.telerik.com/aspnet-mvc/documentation/getting-started-mvc/first-steps) article to add Telerik UI for ASP.NET MVC to the application.

If you have installed the [Telerik UI for ASP.NET MVC Visual Studio Extensions](https://www.telerik.com/aspnet-mvc/documentation/vs-integration/introduction), create a Telerik UI for ASP.NET MVC application using the [New Project Wizard](https://www.telerik.com/aspnet-mvc/documentation/vs-integration/new-project-wizard).

1. Add a new `Entity Framework Data Model`. Right-click the `~/Models` folder in the solution explorer and pick **Add new item**. Choose **Data** > **ADO.NET Entity Data Model** in the **Add New Item** dialog. Name the model `SampleModel` and click **Next**. This starts the **Entity Data Model Wizard**.

2. Pick the **EF Designer from database** option and click **Next**. Configure a connection to the Northwind database. Click **Next**.

   ![UI for ASP.NET MVC Choosing the connection](https://www.telerik.com/aspnet-mvc/documentation/assets/1b29022c17fddc909b4d7bd3de4fbdce/grid-binding-choose-data-connection.png)

3. Choose the **Products** table in the **Which database objects do you want to include in your model?** section. Leave all other options as they are by default. Click **Finish**.

   ![UI for ASP.NET MVC Choosing the Product table in the database objects](https://www.telerik.com/aspnet-mvc/documentation/assets/9b3c6e48269198e2986c090f51010f6a/grid-binding-choose-database-objects.png)

4. Open the `HomeController.cs` and add a new action method which will return the Products as JSON. The Grid makes Ajax requests to this action.

   ```C#
   public ActionResult Products_Read()
   {
   }
   ```

5. Add a new parameter of type `Kendo.Mvc.UI.DataSourceRequest` to the action. It will contain the current Grid request information—page, sort, group, and filter. Decorate that parameter with the `Kendo.Mvc.UI.DataSourceRequestAttribute`. This attribute will populate the `DataSourceRequest` object from the posted data. Now import the `Kendo.Mvc.UI` namespace.

   ```C#
   public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)
   {
   }
   ```

6. Use the `ToDataSourceResult` extension method to convert the Products to a `Kendo.Mvc.UI.DataSourceResult` object. This extension method will page, filter, sort, or group your data using the information provided by the `DataSourceRequest` object. To use the `ToDataSourceResult` extension method, import the `Kendo.Mvc.Extensions` namespace.

   ```C#
   public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)
   {
       using (var northwind = new SampleEntities())
       {
           IQueryable<Product> products = northwind.Products;
           DataSourceResult result = products.ToDataSourceResult(request);
           return Json(result);
       }
   }
   ```

7. Return `DataSourceResult` as JSON. Alternatively, you can use an asynchronous action and return `ToDataSourceResultAsync` as JSON.

   ```C#
   public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)
   {
       using (var northwind = new SampleEntities())
       {
           IQueryable<Product> products = northwind.Products;
           DataSourceResult result = products.ToDataSourceResult(request);
           return Json(result);
       }
   }
   ```

   The asynchronous `ToDataSourceResultAsync` counterpart:

   ```C#
   public async Task<ActionResult> Products_Read([DataSourceRequest]DataSourceRequest request)
   {
       using (var northwind = new SampleEntities())
       {
           IQueryable<Product> products = northwind.Products;
           DataSourceResult result = await products.ToDataSourceResultAsync(request);
           return Json(result);
       }
   }
   ```

8. In the view, configure the Grid to use the action method created in the previous steps.

   ```Razor HtmlHelper
       @(Html.Kendo().Grid<TelerikMvcApp1.Models.Product>()
           .Name("grid")
           .DataSource(dataSource => dataSource //Configure the Grid data source.
               .Ajax() //Specify that Ajax binding is used.
               .Read(read => read.Action("Products_Read", "Home")) // Set the action method which will return the data in JSON format.
           )
           .Columns(columns =>
           {
               //Create a column bound to the ProductID property.
               columns.Bound(product => product.ProductID);
               //Create a column bound to the ProductName property.
               columns.Bound(product => product.ProductName);
               //Create a column bound to the UnitsInStock property.
               columns.Bound(product => product.UnitsInStock);
           })
           .Pageable() // Enable paging
               .Sortable() // Enable sorting
       )
   ```

9. Build and run the application.

   ![UI for ASP.NET MVC The final result is a Grid bound to data](https://www.telerik.com/aspnet-mvc/documentation/assets/98099910b435cdd4f60822e6936fd52e/grid-binding-mvc.png)

To download a Visual Studio project, refer to the [Grid Ajax binding sample repository on GitHub](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/GridAjaxBindingDatabase).

## See Also

* [DataSource Overview](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/datasource/overview)
* [Grid FAQs](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/faq)
* [Custom Ajax Binding by the Grid HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/grid/customajaxbinding)
* [Knowledge Base Articles](https://www.telerik.com/aspnet-mvc/documentation/knowledge-base)
* [Server-Side API](https://www.telerik.com/aspnet-mvc/documentation/api/grid)