Card View - Simple Array

You can use the DevExtreme CardView to display/edit data from an array of objects. Use the dataSource and keyExpr properties to specify the bound array and its associated key field.

Use the columns property to specify a list of data fields to display within the CardView as fields. If the columns property is not specified, the component creates columns for all data fields available in objects from the bound array.

Backend API

@using DevExtreme.NETCore.Demos.Models.CardView.SimpleArray @model IEnumerable<Customer> @(Html.DevExtreme().CardView<Customer>() .ID("cardView") .DataSource(Model, "ID") .CardsPerRow(Mode.Auto) .CardMinWidth(320) .Columns(c => { c.AddFor(m => m.Company); c.AddFor(m => m.Address); c.AddFor(m => m.City); c.AddFor(m => m.State); c.AddFor(m => m.Zipcode); c.AddFor(m => m.Phone); }) )

using Microsoft.AspNetCore.Mvc; using DevExtreme.NETCore.Demos.Models.CardView.ColumnChooser; using DevExtreme.NETCore.Demos.Models.CardView.ColumnHeaderFilter; using DevExtreme.NETCore.Demos.Models.CardView.ColumnReordering; using DevExtreme.NETCore.Demos.Models.CardView.DataValidation; using DevExtreme.NETCore.Demos.Models.CardView.FilterPanel; using DevExtreme.NETCore.Demos.Models.CardView.Overview; using DevExtreme.NETCore.Demos.Models.CardView.PopupEditing; using DevExtreme.NETCore.Demos.Models.CardView.SearchPanel; using DevExtreme.NETCore.Demos.Models.CardView.Selection; using DevExtreme.NETCore.Demos.Models.CardView.SimpleArray; using DevExtreme.NETCore.Demos.Models.CardView.Sorting; using DevExtreme.NETCore.Demos.Models.SampleData; namespace DevExtreme.NETCore.Demos.Controllers { public class CardViewController : Controller { public ActionResult SimpleArray() { return View(SimpleArraySampleData.Customers); } } }