🧶 ASP.NET – Data Binding – Connect Data to Controls Easily (With Code Explanation)
🧲 Introduction – What Is Data Binding in ASP.NET?
Data Binding in ASP.NET allows you to connect UI elements like GridView, DropDownList, or Repeater to a data source such as a database, collection, or array—without manually populating them one by one.
It automates how data flows from back-end to front-end, and supports:
- One-time binding (load-only)
- Two-way binding (write and update)
- Code-behind or declarative binding
🎯 In this guide, you’ll learn:
- Types of data binding in ASP.NET
- Bind
GridView,DropDownList, andRepeatercontrols - How to use
DataSource,DataBind(), and templates - Code examples with full explanations and browser output
📂 ASP.NET Data Binding – File Overview
| File Name | Purpose |
|---|---|
DataBindingDemo.aspx | Binds static data to a GridView |
DropDownListDemo.aspx | Binds country list to a dropdown |
RepeaterDemo.aspx | Binds and templates product list |
DataBindingDemo.aspx.cs | Code-behind with data and logic |
📄 Example 1: GridView with Code-Behind Data Binding
✅ DataBindingDemo.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataBindingDemo.aspx.cs" Inherits="DataBindingDemo" %>
<html>
<body>
<form id="form1" runat="server">
<h3>🧶 GridView Data Binding</h3>
<asp:GridView ID="GridView1" runat="server" />
</form>
</body>
</html>
⚙️ Code-Behind – DataBindingDemo.aspx.cs
using System;
using System.Data;
public partial class DataBindingDemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add("Id");
dt.Columns.Add("Name");
dt.Rows.Add("1", "Apple");
dt.Rows.Add("2", "Banana");
dt.Rows.Add("3", "Cherry");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
}
🔍 Explanation
| Line | What It Does |
|---|---|
DataTable dt = new DataTable(); | Creates in-memory table to hold data |
dt.Columns.Add("Id") | Adds a column named “Id” |
dt.Rows.Add(...) | Adds rows of fruit data |
GridView1.DataSource = dt; | Assigns the data table to GridView |
GridView1.DataBind(); | Binds and displays data on the page |
🖥️ Output
🧶 GridView Data Binding
+----+--------+
| Id | Name |
+----+--------+
| 1 | Apple |
| 2 | Banana |
| 3 | Cherry |
+----+--------+
✅ Easy way to bind tabular data without writing SQL.
📄 Example 2: DropDownList Binding with Static List
✅ DropDownListDemo.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DropDownListDemo.aspx.cs" Inherits="DropDownListDemo" %>
<html>
<body>
<form id="form1" runat="server">
<h3>🌍 Choose Your Country</h3>
<asp:DropDownList ID="ddlCountry" runat="server" />
</form>
</body>
</html>
⚙️ Code-Behind – DropDownListDemo.aspx.cs
using System;
using System.Collections.Generic;
public partial class DropDownListDemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
List<string> countries = new List<string> { "India", "USA", "Canada", "Australia" };
ddlCountry.DataSource = countries;
ddlCountry.DataBind();
}
}
}
🔍 Explanation
| Line | What It Does |
|---|---|
List<string> | Creates a simple list of countries |
ddlCountry.DataSource = countries; | Binds the list to dropdown |
ddlCountry.DataBind(); | Populates the list on the form |
🖥️ Output
🌍 Choose Your Country
[India ▼]
✅ Simple way to fill dropdown from a C# list.
📄 Example 3: Repeater Control with Custom Layout
✅ RepeaterDemo.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RepeaterDemo.aspx.cs" Inherits="RepeaterDemo" %>
<html>
<body>
<form id="form1" runat="server">
<h3>📦 Product List</h3>
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li><%# Eval("Name") %> - $<%# Eval("Price") %></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
⚙️ Code-Behind – RepeaterDemo.aspx.cs
using System;
using System.Data;
public partial class RepeaterDemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add("Name");
dt.Columns.Add("Price");
dt.Rows.Add("Keyboard", "49.99");
dt.Rows.Add("Mouse", "19.99");
dt.Rows.Add("Monitor", "199.00");
Repeater1.DataSource = dt;
Repeater1.DataBind();
}
}
}
🔍 Explanation
| Line | What It Does |
|---|---|
<HeaderTemplate> / <FooterTemplate> | Defines HTML before/after items |
<%# Eval("Name") %> | Outputs the value from column “Name” |
<%# Eval("Price") %> | Outputs the value from column “Price” |
🖥️ Output
📦 Product List
• Keyboard - $49.99
• Mouse - $19.99
• Monitor - $199.00
✅ Repeater gives you full HTML control and flexibility.
📌 Summary – Recap & Takeaways
🔍 Key Learnings:
- Use
DataSourceandDataBind()to connect data to controls GridView= auto table,DropDownList= single-select UIRepeater= flexible layout with full HTML control- Data can come from
DataTable,List, or databases
✅ Data Binding reduces manual control population and simplifies UI logic.
❓ Frequently Asked Questions (FAQs)
❓ What types of data can I bind to controls?
✅ Any IEnumerable source: DataTable, List<T>, arrays, SqlDataReader, etc.
❓ Is DataBind() required for all bindings?
✅ Yes—calling .DataBind() tells the control to render the data.
❓ Can I bind directly from SQL without code?
✅ Yes, using SqlDataSource in markup (see 📝 Data Source article).
❓ Which control gives most layout flexibility?
✅ Repeater, because it doesn’t auto-render tables or rows—you define everything.
Share Now :
