CLR Objects

• Sep 09, 2024
• 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.

Razor C#

@(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.

Razor C#

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

@(Html.DevExtreme().MultiView()
    //...
    .DataSource(Model)
)

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",
            }
        };
    }
}

Controller

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:

Razor C#

.DataSource(Model.YourCollection, "KeyFieldName")