Skip to main content
BuyLog In
ASP.NET Bootstrap Controls
Search in…
Docs > Card View > Binding to Data > Connecting Bootstrap Card View to a Data Source
All docs
V24.1
ASP.NET Bootstrap Controls
Overview
Getting Started
Demos and Sample Applications
Project Configuration
Security Considerations
Grid View
Card View
Binding to Data
Connecting Bootstrap Card View to a Data Source
Binding to Large Data (Database Server Mode)
Built-in Card Cache
Columns
Data Summaries
Filtering
Sorting
Data Editing
Scheduler
Spreadsheet
Rich Text Editor
Charts
Sparkline
Data Editors
Site Navigation
Site Layout
File Manager
Redistribution and Deployment
.NET Framework API Reference
Client API Reference
Download CHM

Connecting Bootstrap Card View to a Data Source

  • 2 minutes to read

The Bootstrap Card View control can display data from a database, an array or collection, as well as the public properties of collection elements. The way you communicate with a data source determines how efficiently your application runs and how well it scales. There is no data access strategy that is suitable for all situations. In fact, each approach has its own advantages and disadvantages.

The most common way of accessing data in Web Forms pages is to retrieve it from a database using a data source control. To bind the Card View to a data source, click its smart tag and select an existing data source (if any) from the list, or create a new one.

BootstrapCardView_BindToData_SmartTag

For testing purposes, you can use demo databases supplied with DevExpress Bootstrap components. The databases are installed in the following folder, by default:

C:\Users\Public\Documents\DevExpress Demos 24.1\Components\ASP.NET\CS\BootstrapDemos\App_Data\

After the Card View has been bound to a data source, it is suggested that you disable its ASPxCardView.AutoGenerateColumns option and create columns for all the fields in the bound data source. Any existing columns are deleted first. New columns are created in the same order in which bound fields appear in the data source.

Finally, you should set the ASPxGridBase.KeyFieldName property to the name of the data source key field.

The following sample code shows how the Card View can be connected to a data source in code.

cardView.DataSource = SqlDataSource1;
cardView.KeyFieldName = "ID";
cardView.DataBind();