CLR Objects

• Jan 26, 2021
• 3 minutes to read

You can bind DevExtreme ASP.NET MVC 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 }
    })
)

Razor VB

@(Html.DevExtreme().Chart() _
    .DataSource({
        New With {.Day = "Monday", .Oranges = 3},
        New With {.Day = "Tuesday", .Oranges = 2},
        New With {.Day = "Wednesday", .Oranges = 3},
        New With {.Day = "Thursday", .Oranges = 4},
        New With {.Day = "Friday", .Oranges = 6},
        New With {.Day = "Saturday", .Oranges = 11},
        New With {.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.

View

Razor C#

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

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

Razor VB

@ModelType List(Of DevExtreme.MVC.Demos.Models.Store)

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

Model

C#

namespace DevExtreme.MVC.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",
            }
        };
    }
}

VB

Namespace DevExtreme.MVC.Demos.Models.SampleData
    Partial Public Class SampleData
        Public Shared Stores As Store() = {
            New Store With {
                .ID = 1,
                .CompanyName = "SuprMart",
                .Address = "702 SW 8th Street",
                .City = "Bentonville"
            },
            New Store With {
                .ID = 2,
                .CompanyName = "El'Depot",
                .Address = "2455 Paces Ferry Road NW",
                .City = "Atlanta"
            },
            New Store With {
                .ID = 3,
                .CompanyName = "K&S Music",
                .Address = "1000 Nicllet Mall",
                .City = "Minneapolis"
            }
        }
    End Class
End Namespace

Controller

C#

using DevExtreme.MVC.Demos.Models.SampleData;
​
namespace DevExtreme.MVC.Demos.Controllers {
    public class MultiViewController : Controller {
        public ActionResult Overview() {
            return View(SampleData.Stores);
        }
    }
}

VB

Imports DevExtreme.MVC.Demos.Models.SampleData

Namespace DevExtreme.MVC.Demos.Controllers
    Public Class MultiViewController
        Inherits Controller
        Public Function Overview() As ActionResult
            Return View(SampleData.Stores)
        End Function
    End Class
End Namespace

View Demo

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

C#

.DataSource(Model.YourCollection, "KeyFieldName")

VB

.DataSource(Model.YourCollection, "KeyFieldName")