Post
Ask Question

How To Dynamically Bind ASP.NET Server Control From Database

Introduction

In this article, I will demonstrate how to dynamically bind asp.net server control from the database. I will bind DropdowList, RadioButtonList, CheckBoxList, ListBox, and BulletedList.

Step 1

Create database table in sql server 2014.

  1. CREATE TABLE [dbo].[Languages](  
  2.     [ID] [int] IDENTITY(1,1) NOT NULL,  
  3.     [Programming_Language] [nvarchar](50) NULL,  
  4.  CONSTRAINT [PK_Languages] PRIMARY KEY CLUSTERED   
  5. (  
  6.     [ID] ASC  
  7. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
  8. ) ON [PRIMARY]  
  9.   
  10. GO  
  11.   
  12.   
  13. CREATE procedure spGetAllProgrammingLanguage  
  14. as  
  15. begin  
  16. select ID,Programming_Language from [dbo].[Languages]  
  17. end  
ASP.NET

Step 2

Open Visual Studio 2015 click on New Project and create an empty web application project.

Screenshot for creating new project 1

ASP.NET

After clicking on New Project one window will appear; select Web from left panel, choose ASP.NET Web Application and give a meaningful name to your project then click on OK as shown in below screenshot.

Screenshot for creating new project 2

ASP.NET

 

After clicking on OK one more window will appear. Choose empty, check on the Web Forms checkbox and click on OK. 

Screenshot for creating new project 3

ASP.NET

Step 3

Double click on webconfig file and database connections. Write the  following line of code. 

  1. <connectionStrings>  
  2.   <add name="DBCS" connectionString="data source=DESKTOP-M021QJH\SQLEXPRESS; database=DemoDB; integrated security=true;"/>  
  3. </connectionStrings>  

Step 4

Right click on project and web form and give it a meaningful name.

Step 5

Add script and styles of bootstrap in the head section of web form. 

  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">  
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>  

Step 6

Design web form, and drag and drop DropdowList control

  1. <!DOCTYPE html>  
  2.   
  3. <html>  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <form id="form1" runat="server">  
  12.         <div class="container py-4">  
  13.             <h4 class="text-uppercase text-center">HOW TO DYNAMICALLY BIND ASP.NET DROPDOWNLIST CONTROL FROM DATABASE</h4>  
  14.             <div class="row">  
  15.                 <div class="col-md-6">  
  16.                     <div class="form-group">  
  17.                         <label>Choose Programming Language</label>  
  18.                         <asp:DropDownList ID="DropDownList1" runat="server" CssClass="custom-select"></asp:DropDownList>  
  19.                     </div>  
  20.                 </div>  
  21.             </div>  
  22.         </div>  
  23.     </form>  
  24. </body>  
  25. </html>   

Step 7

Right click on web form choose view code. Write following code to bind DropdowList control. 

  1. using System;  
  2. using System.Configuration;  
  3. using System.Data;  
  4. using System.Data.SqlClient;  
  5.   
  6. namespace ServerControlBinding_Demo  
  7. {  
  8.     public partial class DropDownList : System.Web.UI.Page  
  9.     {  
  10.         protected void Page_Load(object sender, EventArgs e)  
  11.         {  
  12.             if (!IsPostBack)  
  13.             {  
  14.                 BindDropdowList();  
  15.             }  
  16.         }  
  17.   
  18.         private void BindDropdowList()  
  19.         {  
  20.             string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;  
  21.             using (SqlConnection con = new SqlConnection(CS))  
  22.             {  
  23.                 SqlCommand cmd = new SqlCommand("spGetAllProgrammingLanguage", con);  
  24.                 cmd.CommandType = CommandType.StoredProcedure;  
  25.                 con.Open();  
  26.                 DropDownList1.DataSource = cmd.ExecuteReader();  
  27.                 DropDownList1.DataTextField = "Programming_Language";  
  28.                 DropDownList1.DataValueField = "ID";  
  29.                 DropDownList1.DataBind();  
  30.                 DropDownList1.Items.Insert(0, "Choose Programming Language");  
  31.             }  
  32.         }  
  33.     }  
  34. }   

Output for DropdowList

ASP.NET

Step 8

Design web form drag and drop RadioButtonList control 

  1. <!DOCTYPE html>  
  2.   
  3. <html>  
  4. <head runat="server">  
  5.     <title>RadioButtonLis</title>  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <form id="form1" runat="server">  
  12.         <div class="container py-4">  
  13.             <h5 class="text-uppercase text-center">HOW TO DYNAMICALLY BIND ASP.NET RADIOBUTTONLIST CONTROL FROM DATABASE</h5>  
  14.             <div class="row">  
  15.                 <div class="col-md-6">  
  16.                     <div class="form-group">  
  17.                         <label>Choose Programming Language</label>  
  18.                         <asp:RadioButtonList ID="RadioButtonList1" runat="server" CssClass="custom-radio"></asp:RadioButtonList>  
  19.                     </div>  
  20.                 </div>  
  21.             </div>  
  22.         </div>  
  23.     </form>  
  24. </body>  
  25. </html>  

Step 9

Write the following code to bind DropdowList control.

  1. using System;  
  2. using System.Data;  
  3. using System.Data.SqlClient;  
  4. using System.Configuration;  
  5.   
  6. namespace ServerControlBinding_Demo  
  7. {  
  8.     public partial class RadioButtonList : System.Web.UI.Page  
  9.     {  
  10.         protected void Page_Load(object sender, EventArgs e)  
  11.         {  
  12.             if (!IsPostBack)  
  13.             {  
  14.                 BindRadioButtonList();   
  15.             }  
  16.         }  
  17.   
  18.         private void BindRadioButtonList()  
  19.         {  
  20.             string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;  
  21.             using (SqlConnection con = new SqlConnection(CS))  
  22.             {  
  23.                 SqlCommand cmd = new SqlCommand("spGetAllProgrammingLanguage", con);  
  24.                 cmd.CommandType = CommandType.StoredProcedure;  
  25.                 con.Open();  
  26.                 RadioButtonList1.DataSource = cmd.ExecuteReader();  
  27.                 RadioButtonList1.DataTextField = "Programming_Language";  
  28.                 RadioButtonList1.DataValueField = "ID";  
  29.                 RadioButtonList1.DataBind();  
  30.   
  31.             }  
  32.         }  
  33.     }  
  34. }  

Output for RadioButtonList

ASP.NET

Step 10

Design web form drag and drop ListBox control 

  1. <!DOCTYPE html>  
  2.   
  3. <html>  
  4. <head runat="server">  
  5.     <title>ListBox</title>  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <form id="form1" runat="server">  
  12.         <div class="container py-5">  
  13.             <h4 class="text-uppercase text-center">HOW TO DYNAMICALLY BIND ASP.NET LISTBOX CONTROL FROM DATABASE</h4>  
  14.             <div class="row">  
  15.                 <div class="col-md-6">  
  16.                     <div class="form-group">  
  17.                         <label>Choose Programming Language</label>  
  18.                         <asp:ListBox ID="ListBox1" runat="server" CssClass="form-control"></asp:ListBox>  
  19.                     </div>  
  20.                 </div>  
  21.             </div>  
  22.         </div>  
  23.     </form>  
  24. </body>  
  25. </html>  

Step 11

Write the following code to bind ListBox control. 

  1. using System;  
  2. using System.Data;  
  3. using System.Data.SqlClient;  
  4. using System.Configuration;  
  5.   
  6. namespace ServerControlBinding_Demo  
  7. {  
  8.     public partial class ListBox : System.Web.UI.Page  
  9.     {  
  10.         protected void Page_Load(object sender, EventArgs e)  
  11.         {  
  12.             if (!IsPostBack)  
  13.             {  
  14.                 BindListBox();  
  15.             }  
  16.         }  
  17.         private void BindListBox()  
  18.         {  
  19.             string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;  
  20.             using (SqlConnection con = new SqlConnection(CS))  
  21.             {  
  22.                 SqlCommand cmd = new SqlCommand("spGetAllProgrammingLanguage", con);  
  23.                 cmd.CommandType = CommandType.StoredProcedure;  
  24.                 con.Open();  
  25.                 ListBox1.DataSource = cmd.ExecuteReader();  
  26.                 ListBox1.DataTextField = "Programming_Language";  
  27.                 ListBox1.DataValueField = "ID";  
  28.                 ListBox1.DataBind();  
  29.   
  30.             }  
  31.         }  
  32.     }  
  33. }  

Output for RadioButtonList

ASP.NET

Step 12

Design web form drag and drop CheckBoxList control

  1. <!DOCTYPE html>  
  2.   
  3. <html>  
  4. <head runat="server">  
  5.     <title>CheckBoxList</title>  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <form id="form1" runat="server">  
  12.         <div class="container py-5">  
  13.             <h5 class="text-uppercase text-center">HOW TO DYNAMICALLY BIND ASP.NET CHECKBOXLIST CONTROL FROM DATABASE</h5>  
  14.             <div class="row">  
  15.                 <div class="col-md-6">  
  16.                     <div class="form-group">  
  17.                         <label>Choose Programming Language</label>  
  18.                         <asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="custom-checkbox"></asp:CheckBoxList>  
  19.                     </div>  
  20.                 </div>  
  21.             </div>  
  22.         </div>  
  23.     </form>  
  24. </body>  
  25. </html>  

Step 13

Write the following code to bind CheckBoxList control. 

  1. using System;  
  2. using System.Data;  
  3. using System.Data.SqlClient;  
  4. using System.Configuration;  
  5.   
  6. namespace ServerControlBinding_Demo  
  7. {  
  8.     public partial class CheckBoxLIst : System.Web.UI.Page  
  9.     {  
  10.         protected void Page_Load(object sender, EventArgs e)  
  11.         {  
  12.             if (!IsPostBack)  
  13.             {  
  14.                 BindCheckBoxList();  
  15.             }  
  16.         }  
  17.         private void BindCheckBoxList()  
  18.         {  
  19.             string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;  
  20.             using (SqlConnection con = new SqlConnection(CS))  
  21.             {  
  22.                 SqlCommand cmd = new SqlCommand("spGetAllProgrammingLanguage", con);  
  23.                 cmd.CommandType = CommandType.StoredProcedure;  
  24.                 con.Open();  
  25.                 CheckBoxList1.DataSource = cmd.ExecuteReader();  
  26.                 CheckBoxList1.DataTextField = "Programming_Language";  
  27.                 CheckBoxList1.DataValueField = "ID";  
  28.                 CheckBoxList1.DataBind();  
  29.   
  30.             }  
  31.         }  
  32.     }  
  33. }  

Output for CheckBoxList

ASP.NET

Step 14

Design web form drag and drop BulletedList control, 

  1. <!DOCTYPE html>  
  2.   
  3. <html>  
  4. <head runat="server">  
  5.     <title>BulletedList</title>  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <form id="form1" runat="server">  
  12.         <div class="container py-5">  
  13.             <h5 class="text-uppercase text-center">HOW TO DYNAMICALLY BIND ASP.NET BULLETEDLIST CONTROL FROM DATABASE</h5>  
  14.             <div class="row">  
  15.                 <div class="col-md-6">  
  16.                     <div class="form-group">  
  17.                         <label>Choose Programming Language</label>  
  18.                         <asp:BulletedList ID="BulletedList1" runat="server"></asp:BulletedList>  
  19.                     </div>  
  20.                 </div>  
  21.             </div>  
  22.         </div>  
  23.     </form>  
  24. </body>  
  25. </html>  

Step 15

Write the following code to bind BulletedList control.

  1. using System;  
  2. using System.Data;  
  3. using System.Data.SqlClient;  
  4. using System.Configuration;  
  5.   
  6. namespace ServerControlBinding_Demo  
  7. {  
  8.     public partial class BulletedList : System.Web.UI.Page  
  9.     {  
  10.         protected void Page_Load(object sender, EventArgs e)  
  11.         {  
  12.             if (!IsPostBack)  
  13.             {  
  14.                 BindBulletedList();  
  15.             }  
  16.         }  
  17.   
  18.         private void BindBulletedList()  
  19.         {  
  20.             string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;  
  21.             using (SqlConnection con = new SqlConnection(CS))  
  22.             {  
  23.                 SqlCommand cmd = new SqlCommand("spGetAllProgrammingLanguage", con);  
  24.                 cmd.CommandType = CommandType.StoredProcedure;  
  25.                 con.Open();  
  26.                 BulletedList1.DataSource = cmd.ExecuteReader();  
  27.                 BulletedList1.DataTextField = "Programming_Language";  
  28.                 BulletedList1.DataValueField = "ID";  
  29.                 BulletedList1.DataBind();  
  30.   
  31.             }  
  32.         }  
  33.     }  
  34. }  

Output for BulletedList

ASP.NET

 

Conclusion

In this article, I have explained data binding with ASP.NET server control like DropdowList, RadioButtonList, CheckBoxList, ListBox, and BulletedList. I hope you have understood all the controls.


Similar Articles