Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy
    Your search did not match any results.
    List

    Web API Service

    Documentation

    This example demonstrates the List UI component loading data from a Web API service.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    ASP.NET Core

    ASP.NET MVC

    @(Html.DevExtreme().List() .ItemTemplate(@<text> <div><%- ProductName %></div> <div><b><%- formatCurrency(UnitPrice) %></b></div> </text>) .DataSource(d => d.Mvc().Controller("ListData").LoadAction("Get")) .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); } } }