Web API Service

Documentation

To access a Web API service from the client, use the createStore method which is part of the DevExtreme.AspNet.Data extension. This extension also allows you to process data for DevExtreme components on the server. The server-side implementation is available under the ListDataController.cs tab in the ASP.NET MVC version of this demo.

See more Hide details

Prev Demo Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Send Feedback

Thank you!
We appreciate your feedback.

Backend API

@(Html.DevExtreme().List() .ItemTemplate(@<text> <div><%- ProductName %></div> <div><b><%- formatCurrency(UnitPrice) %></b></div> </text>) .DataSource(d => d.WebApi().Controller("ListData").Key("ProductID")) .DataSourceOptions(d => d .PageSize(1) .Sort("ProductName") .Group("Category.CategoryName") .Filter("[ 'UnitPrice', '>', '15' ]") ) .Grouped(true) .CollapsibleGroups(true) .ItemDeleteMode(ListItemDeleteMode.SlideItem) .SelectionMode(ListSelectionMode.Multiple) .ShowSelectionControls(true) .PageLoadMode(ListPageLoadMode.ScrollBottom) .Height(600) ) <script> var formatCurrency = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 2 }).format; </script>

using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ListController : Controller { public ActionResult WebApi() { return View(); } public ActionResult ListEditingAndAPI() { return View(); } public ActionResult GroupedList() { return View(SampleData.ListGroupedData); } public ActionResult ItemTemplate() { return View(SampleData.ListProducts); } public ActionResult ListWithSearchBar() { return View(SampleData.ListProducts); } public ActionResult ListSelection() { return View(SampleData.ListPlainData.Take(50)); } public ActionResult ItemDragging() { return View(); } } }

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using System.Web.Http; using DevExtreme.MVC.Demos.Models.Northwind; namespace DevExtreme.MVC.Demos.Controllers.ApiControllers { public class ListDataController : ApiController { NorthwindContext _nwind = new NorthwindContext(); [HttpGet] public HttpResponseMessage Get(DataSourceLoadOptions loadOptions) { return Request.CreateResponse( DataSourceLoader.Load(_nwind.Products.Include("Category"), loadOptions) ); } } }