Post
Ask Question

How To Bind DropDownList From Back End To Front End

Go to Visual Studio and select new project. After that select Web from installed template and ASP .NET Empty Web Application. After that write the application name as in the following figure and click OK.

ASP .NET Empty Web Application

Go to Solution Explorer, click with right mouse button and select Add New Item. After that select Web Form as in the following. Then write the form name with extension .aspx and click Add,

Web Form

Go to dropdownlist  aspx and write the following code for design the page and create data source for binding Dropdownlist from back end to front end (in this example I am binding Bus Number).
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BusInfo.aspx.cs" Inherits="IARE_Bus.BusInfo" %>  
  2.     <!DOCTYPE html>  
  3.     <html xmlns="http://www.w3.org/1999/xhtml">  
  4.   
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <style type="text/css">  
  8. .auto-style1 {  
  9.     width: 100%;  
  10. }  
  11.         </style>  
  12.     </head>  
  13.   
  14.     <body style="height: 209px; width: 490px">  
  15.         <form id="form1" runat="server">  
  16.             <div>  
  17.                 <table class="auto-style1">  
  18.                     <tr>  
  19.                         <td> Select Bus Number</td>  
  20.                         <td>  
  21.                             <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="BusInfos" DataTextField="Bus_No" DataValueField="Bus_No"> </asp:DropDownList>  
  22.                         </td>  
  23.                     </tr>  
  24.                     <tr>  
  25.                         <td>  
  26.                             <asp:Label ID="Label1" runat="server" Text="Bus Starting Point"></asp:Label>  
  27.                         </td>  
  28.                         <td>  
  29.                             <asp:TextBox ID="TextSPoint" runat="server"></asp:TextBox>  
  30.                         </td>  
  31.                     </tr>  
  32.                     <tr>  
  33.                         <td>  
  34.                             <asp:Label ID="Label2" runat="server" Text="Bus Final Destination"></asp:Label>  
  35.                         </td>  
  36.                         <td>  
  37.                             <asp:TextBox ID="TextEPoint" runat="server"></asp:TextBox>  
  38.                         </td>  
  39.                     </tr>  
  40.                     <tr>  
  41.                         <td>  
  42.                             <asp:Label ID="Label3" runat="server" Text="Bus Route Via"></asp:Label>  
  43.                         </td>  
  44.                         <td>  
  45.                             <asp:TextBox ID="TextVia" runat="server"></asp:TextBox>  
  46.                         </td>  
  47.                     </tr>  
  48.                     <tr>  
  49.                         <td>  
  50.                             <asp:Label ID="Label4" runat="server" Text="Driver Name Is :"></asp:Label>  
  51.                         </td>  
  52.                         <td>  
  53.                             <asp:TextBox ID="TextDriver" runat="server"></asp:TextBox>  
  54.                         </td>  
  55.                     </tr>  
  56.                     <tr>  
  57.                         <td>  
  58.                             <asp:Label ID="lbldsply" runat="server"></asp:Label>  
  59.                         </td>  
  60.                         <td>  
  61.                             <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Save" /> </td>  
  62.                     </tr>  
  63.                 </table>  
  64.             </div>  
  65.         </form>  
  66.     </body>  
  67.   
  68. </html>  
Design

Or also we can bind dropdownlist from back end to front end as in the following step,

Go to choose data source then choose data source as <New data Source …>. After that click OK, then choose SQL database to new appearing window and click on OK. Now click on New Connection in new appeared window. Then Add Connection window will appear as in the following figure. After that click on OK button. (Now datasource has created).

click on OK button

Now go to Dropdownlist.spx.cs and write the following code:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9. namespace DropDownListBinding  
  10. {  
  11.     public partial class WebDropdownlist: System.Web.UI.Page  
  12.     {  
  13.         SqlConnection con = new SqlConnection("integrated security=true;initial catalog=Iare;data source=.");  
  14.         SqlCommand cmd;  
  15.         SqlParameter P1;  
  16.         protected void Page_Load(object sender, EventArgs e)  
  17.         {}  
  18.         protected void Button1_Click(object sender, EventArgs e)  
  19.         {  
  20.             string s = "insert into BusInfo values(@p1,@p2,@p3,@p4,@p5)";  
  21.             con.Open();  
  22.             cmd = new SqlCommand(s, con);  
  23.             cmd.CommandType = CommandType.Text;  
  24.             cmd.Parameters.AddWithValue("@p1", TextSPoint.Text);  
  25.             cmd.Parameters.AddWithValue("@p2", TextEPoint.Text);  
  26.             cmd.Parameters.AddWithValue("@p3", TextVia.Text);  
  27.             cmd.Parameters.AddWithValue("@p4", TextDriver.Text);  
  28.             cmd.Parameters.AddWithValue("@p5", DropDownList1.SelectedItem.Value);  
  29.             cmd.ExecuteNonQuery();  
  30.             con.Close();  
  31.             lbldsply.Text = "Bus Information has Saved";  
  32.         }  
  33.     }  
  34. }  
Now run the application and your screen is like the following figure .

run the application

Now enter the Bus details and click Save button. After that go and check your database.

 


Similar Articles