Your search did not match any results.

Web API Service


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.

Backend API
@(Html.DevExtreme().List() .ItemTemplate(@<text> <div><%- ProductName %></div> <div><b><%- formatCurrency(UnitPrice) %></b></div> </text>) .DataSource(d => d.Mvc().Controller("ListData").LoadAction("Get").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.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ListController : Controller { public ActionResult WebAPI() { return View(); } } }
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models.Northwind; using Microsoft.AspNetCore.Mvc; using Microsoft.EntityFrameworkCore; using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers { [Route("api/[controller]")] public class ListDataController : Controller { NorthwindContext _nwind; public ListDataController(NorthwindContext nwind) { _nwind = nwind; } [HttpGet] public object Get(DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load(_nwind.Products.Include(p => p.Category), loadOptions); } } }