Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

CLR Objects

  • 2 minutes to read

You can bind DevExtreme-based ASP.NET Core controls to a collection of CLR objects: Array, List, or IEnumerable.

These collections …

  • can come from a controller (via Model or ViewData);
  • can be embedded in Razor files (directly in an HTML helper declaration or in a @functions block).

A collection is passed to the client as an ArrayStore. Note that collection data should be JSON-serializable.

#Example: Bind a Control to an Array

The example code shows how to bind the Chart control to an array.

@(Html.DevExtreme().Chart()
    //...
    .DataSource(new[] {
        new { Day = "Monday", Oranges = 3 },
        new { Day = "Tuesday", Oranges = 2 },
        new { Day = "Wednesday", Oranges = 3 },
        new { Day = "Thursday", Oranges = 4 },
        new { Day = "Friday", Oranges = 6 },
        new { Day = "Saturday", Oranges = 11 },
        new { Day = "Sunday", Oranges = 4 }
    })
)

View Demo

#Example: Bind a Control to a Model

The example code shows how to bind the MultiView control to Model.

@model List<DevExtreme.NETCore.Demos.Models.Store>

@(Html.DevExtreme().MultiView()
    //...
    .DataSource(Model)
)
using System;
using System.Collections.Generic;
using System.Linq;

namespace DevExtreme.NETCore.Demos.Models.SampleData {
    public partial class SampleData {
        public static Store[] Stores = new[] {
            new Store {
                ID = 1,
                CompanyName = "SuprMart",
                Address = "702 SW 8th Street",
                City = "Bentonville",
            },
            new Store {
                ID = 2,
                CompanyName = "El'Depot",
                Address = "2455 Paces Ferry Road NW",
                City = "Atlanta",
            },
            new Store {
                ID = 3,
                CompanyName = "K&S Music",
                Address = "1000 Nicllet Mall",
                City = "Minneapolis",
            }
        };
    }
}
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
​
namespace DevExtreme.NETCore.Demos.Controllers {
    public class MultiViewController : Controller {
        public ActionResult Overview() {
            return View(SampleData.Stores);
        }
    }
}

View Demo

The DataSource method overload accepts the string[] key parameter, so your code can look as follows:

.DataSource(Model.YourCollection, "KeyFieldName")