How To Bind DropDownList From Back End To Front End

Sandeep Kumar
8y
8.2k
0
2

Article

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.

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,

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).

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BusInfo.aspx.cs" Inherits="IARE_Bus.BusInfo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 100%;
}
</style>
</head>
<body style="height: 209px; width: 490px">
<form id="form1" runat="server">
<div>
<table class="auto-style1">
<tr>
<td> Select Bus Number</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="BusInfos" DataTextField="Bus_No" DataValueField="Bus_No"> </asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Bus Starting Point"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextSPoint" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Bus Final Destination"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextEPoint" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Bus Route Via"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextVia" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label4" runat="server" Text="Driver Name Is :"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextDriver" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lbldsply" runat="server"></asp:Label>
</td>
<td>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Save" /> </td>
</tr>
</table>
</div>
</form>
</body>
</html>

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).

Now go to Dropdownlist.spx.cs and write the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
namespace DropDownListBinding
{
public partial class WebDropdownlist: System.Web.UI.Page
{
SqlConnection con = new SqlConnection("integrated security=true;initial catalog=Iare;data source=.");
SqlCommand cmd;
SqlParameter P1;
protected void Page_Load(object sender, EventArgs e)
{}
protected void Button1_Click(object sender, EventArgs e)
{
string s = "insert into BusInfo values(@p1,@p2,@p3,@p4,@p5)";
con.Open();
cmd = new SqlCommand(s, con);
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@p1", TextSPoint.Text);
cmd.Parameters.AddWithValue("@p2", TextEPoint.Text);
cmd.Parameters.AddWithValue("@p3", TextVia.Text);
cmd.Parameters.AddWithValue("@p4", TextDriver.Text);
cmd.Parameters.AddWithValue("@p5", DropDownList1.SelectedItem.Value);
cmd.ExecuteNonQuery();
con.Close();
lbldsply.Text = "Bus Information has Saved";
}
}
}