Data Binding

• Aug 01, 2019
• 3 minutes to read

All data-aware DevExpress MVC extensions expose the Bind method, allowing you to easily bind them to a data source (typically, it is a data Model passed from a Controller). There are also some additional methods facilitating data binding to certain declarative data sources. The table below lists data-aware extensions and corresponding available data binding methods.

Data-Aware Extension Name	Method to Bind to Data Model	Declarative Binding Methods
GridView	GridViewExtension.Bind	GridViewExtension.BindToEF GridViewExtension.BindToLINQ GridViewExtension.BindToXML GridViewExtension.BindToCustomData
TreeList	TreeListExtension.Bind	TreeListExtension.BindToXML TreeListExtension.BindToSiteMap TreeListExtension.BindToVirtualData
PivotGrid	PivotGridExtension.Bind	PivotGridExtension.BindToOLAP PivotGridExtension.BindToEF PivotGridExtension.BindToLINQ
Menu	MenuExtension.Bind	MenuExtension.BindToXML MenuExtension.BindToSiteMap
NavBar	NavBarExtension.Bind	NavBarExtension.BindToXML NavBarExtension.BindToSiteMap
PopupControl	PopupControlExtension.Bind	PopupControlExtension.BindToXML PopupControlExtension.BindToSiteMap
TabControl	TabControlExtension.Bind	TabControlExtension.BindToXML TabControlExtension.BindToSiteMap
TreeView	TreeViewExtension.Bind	TreeViewExtension.BindToXML TreeViewExtension.BindToSiteMap
Data Editor Extensions	EditorExtension.Bind	List Editors: CheckBoxListExtension.BindList ComboBoxExtension.BindList ListBoxExtension.BindList RadioButtonListExtension.BindList TrackBarExtension.BindList

 

The following code demonstrates how to bind the Chart extension to a Model.

Model code:

C#

namespace MyProject.Models {
    public class ChartPoint {
        public int X { get; set; }
        public int Y { get; set; }
    }
}

VB.NET

Namespace MyProject.Models
    Public Class ChartPoint
        Private m_X As Integer
        Private mY As Integer

        Public Property X() As Integer
            Get
                Return mX
            End Get
            Set
                mX = Value
            End Set
        End Property

        Public Property Y() As Integer
            Get
                Return mY
            End Get
            Set
                mY = Value
            End Set
        End Property        
    End Class
End Namespace

View Code (Razor):

C#

@Html.DevExpress().Chart(settings => {
    settings.Name = "chart";
    settings.Series.Add(s => {
        s.Name = "My Data";
        s.SetDataMembers("X", "Y");
        s.Views().SplineSeriesView(v =>{ });
    });
}).Bind(Model).GetHtml()

VB.NET

@Html.DevExpress().Chart(Sub(settings)
    settings.Name = "chart"
    settings.Series.Add(Sub(s) 
        s.Name = "My Data"
        s.SetDataMembers("X", "Y")
        s.Views().SplineSeriesView(Sub(settings)
        End Sub)
    End Sub)
End Sub).Bind(Model).GetHtml()

Controller code:

C#

using System.Collections.Generic;
using System.Web.Mvc;
using MyProject.Models;

namespace MyProject.Controllers {
    public class HomeController : Controller {
        public ActionResult Index() {
            return View(GetPoints());
        }

        private List<ChartPoint> GetPoints() {
            var m = new List<ChartPoint>();
            m.Add(new ChartPoint { X = 1, Y = 1 });
            m.Add(new ChartPoint { X = 2, Y = 5 });
            m.Add(new ChartPoint { X = 3, Y = 3 });
            m.Add(new ChartPoint { X = 4, Y = 9 });
            m.Add(new ChartPoint { X = 5, Y = 10 });
            return m;
        }
    }
}

VB.NET

Imports System.Collections.Generic
Imports System.Web.Mvc
Imports MyProject.Models

Namespace MyProject.Controllers
    Public Class HomeController  Inherits Controller
        Public Function Index() As ActionResult
            return View(GetPoints())
        End Function

        Private Function GetPoints() As List<ChartPoint>
            Dim m As List<ChartPoint> = New List<ChartPoint>()
            m.Add(New ChartPoint With { .X = 1, .Y = 1 })
            m.Add(New ChartPoint With { .X = 2, .Y = 5 })
            m.Add(New ChartPoint With { .X = 3, .Y = 3 })
            m.Add(New ChartPoint With { .X = 4, .Y = 9 })
            m.Add(New ChartPoint With { .X = 5, .Y = 10 })
            Return m
        End Function
    End Class
End Namespace

 

For specifics of binding DevExpress MVC data editors (listed in Data Editors Extensions), refer to the Binding Data Editors to Data topic.