In this example, we will explain how to bind a DropDownList in ASP.NET using VB.Net and C#.

To better understand this tutorial, you should be familiar with the following topics:

DataBase

First, let’s create a database table called “ProgrammingLanguages”:

Table-Programming-Language-Design

Then add a few records to that table:

Table-Programming-Language-Data-full

Now create a visual studio project, and then add a Label and DropDownList to the Default page.

In this example, we will use the following properties of the DropdownList control:

DataSource: To set the data source for the control.

DataValueField: Used to set the filed from the data source that will provide the value of the DropDownList items.

DataTextField: To set the field from the data source that will provide the text content of the DropDownList items. This property is what will be visible to the users.

HTML

<asp:Label ID="lbl" runat="server" Text="Programming Language:"></asp:Label>
<asp:DropDownList ID="ddl_Languages" runat="server" Height="17px" Width="300px">
</asp:DropDownList>

When the page loads, the DropDownList will be populated with the table ProgrammingLanguages from the SQL Server Database TutorialsPanel using the code below:

VB.NET

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        Dim sqlconn As New SqlConnection("Data Source=YourDataServer;Initial Catalog=TutorialsPanel;Integrated Security=True;Pooling=False")
        Dim da As New SqlDataAdapter
        Dim cmd As New SqlCommand("Select * FROM ProgrammingLanguage Order by LanguageName ASC")
        Dim dtLanguages As New DataTable
        da.SelectCommand = cmd
        da.SelectCommand.Connection = sqlconn

        da.Fill(dtLanguages)
        ddl_Languages.DataSource = dtLanguages
        ddl_Languages.DataTextField = "LanguageName"
        ddl_Languages.DataValueField = "ID"
        ddl_Languages.DataBind()

    End If
End Sub

C#

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                SqlConnection sqlconn = new SqlConnection("Data Source=YourDataServer;Initial Catalog=TutorialsPanel;Integrated Security=True;Pooling=False");
                SqlDataAdapter da = new SqlDataAdapter();
                SqlCommand cmd = new SqlCommand("Select * FROM ProgrammingLanguage Order by LanguageName");
                DataTable dtLanguages = new DataTable();

                da.SelectCommand = cmd;
                da.SelectCommand.Connection = sqlconn;
                da.Fill(dtLanguages);
                ddl_Languages.DataSource = dtLanguages;
                ddl_Languages.DataTextField = "LanguageName";
                ddl_Languages.DataValueField = "ID";
                ddl_Languages.DataBind();
  }
        }

Now let’s show an alert when the user selects an item from the DropDownList. To do so, we can need to put the code in the SelectedIndexChanged event block:

VB.NET

Protected Sub ddl_Languages_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ddl_Languages.SelectedIndexChanged
        Dim msg As String = ddl_Languages.SelectedItem.Text
        ScriptManager.RegisterClientScriptBlock(TryCast(sender, Control), Me.GetType(), "alert", "alert('" + msg + "')", True)
    End Sub

C#

protected void ddl_Languages_SelectedIndexChanged(object sender, EventArgs e)
{
    string msg = ddl_Languages.SelectedItem.Text;

    ScriptManager.RegisterClientScriptBlock(sender as Control, this.GetType(), "alert", "alert('" + msg + "')", true);
}

Don’t forget to set the AutoPostBack Property of the DropDownList to True:

Bind-DropDownList-control-in-ASP-Property

To prevent the page from a full postback when selecting an item from the DropDownList, add an Ajax UpdatePanel Control to trigger partial feedback:

HTML

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
      <asp:Label ID="lbl" runat="server" Text="Programming Language:"></asp:Label>
  <asp:DropDownList ID="ddl_Languages" runat="server" Height="17px" Width="301px" AutoPostBack="True">
  </asp:DropDownList>
          </ContentTemplate>
      <Triggers>
              <asp:AsyncPostBackTrigger ControlID="ddl_Languages" 
                  EventName="SelectedIndexChanged" />
          </Triggers>
  </asp:UpdatePanel>

Now run the application.

 Note: Response. Write will not work during an asynchronous PostBack. Instead, we use the RegisterClientScriptBlock method to show the JavaScript alert.

Related Articles

Last modified: July 11, 2019

Comments

Write a Reply or Comment

Your email address will not be published.