Dropdown binding with database in asp .net website

Dropdown binding with database in asp .net website

Hello Friend , we learned how to bind a gridview and datagridview in asp .net website and desktop application respectively. Which is much easier. Now we learn how to bind a dropdown with database values like list of available employees to select under which new employee will join.

Lets get started.

We will use the previous example of Gridview in web application and use of session and we will just remove the gridview and place a dropdown at the place of gridview.

Here is the body part of the design source:

<form id=”form1″ runat=”server”>
<asp:LinkButton ID=”lnkbtnLogout” runat=”server” OnClick=”lnkbtnLogout_Click”>Logout</asp:LinkButton>
<br />
Employee: &nbsp;&nbsp;&nbsp;<asp:DropDownList ID=”ddlEmployee” runat=”server”
AppendDataBoundItems=”true” AutoPostBack=”true”
<asp:ListItem Text=”Select” Value=”0″></asp:ListItem>
<br />
<asp:Label ID=”lblDatatextfield” runat=”server” Text=”select some value “></asp:Label>
<br />
<asp:Label ID=”lblDataValueField” runat=”server” Text=”select some value “></asp:Label>

There are three points:

  1. AppendDataBoundItems which allow to append items to the existing dropdown if the datasource updated at any postback or any event.
  2. ListItem which is used to add items as static. We have added “Select” for user interface.
    <asp:ListItem Text=”Select”></asp:ListItem>
  3. onselectedindexchanged is a an event and it fires whenever we change the item of the dropdown and if there is a property name AutoPostBack is set to true. To add onselectedindexchanged event to our code we need to switch to design view as shown in the example:
selected index change of dropdown in asp .net website
selected index change of dropdown in asp .net website

Double click on the dropdown and this will add a procedure to the code ddlEmployee_SelectedIndexChanged.

Now the dropdown binding coding part:

ddlEmployee.DataSource = dt;
ddlEmployee.DataTextField = “username”;
ddlEmployee.DataValueField = “id”;

There are two new terms:

  1. DataTextField: is used to assign the text part which is to be visible to the user at front side. And the DataTextField can be accessed by using the code ddlEmployee.SelectedItem.Text
  2. DataValueField: is used to assign the value part for coding purpose which will not visible to the user and mostly the id (primary key) field is assigned to that filed. And DataValueField can be accessed by using code ddlEmployee.SelectedValue.

Now we will add some code to ddlEmployee_SelectedIndexChanged procedure to see the reflection of the datatextfield and datavaluefield variations by changing the item selection at the user end.

protected void ddlEmployee_SelectedIndexChanged(object sender, EventArgs e)
lblDatatextfield.Text = ddlEmployee.SelectedItem.Text.ToString();
lblDataValueField.Text = ddlEmployee.SelectedValue.ToString();
catch { }

One more important thing as we added autopostback=”true” , AppendDataBoundItems=”true” and  the binding of dropdown is in the page load whenever the page_load event will occur the dropdown will load again the same data. This is a general problem of the use of dropdown. So you need to use a special condition in page_load as:

if (!IsPostBack)

Now whenever the page postbacks the website will not load the dropdown, it will only load when there is a fresh call of pageload.

Now see the result by building the project.

Download the project dropdown binding with database .

Happy coding

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: