List Controls in ASP.NET - Part 3
Introduction
In Part – 2 article of
this series, we have discussed how to bind the database to list controls but we
have not still checked how to determine which list item is selected. In this
article we will discuss how to determine selected list item.
Determining the Selected List Item
Displaying options with the List controls is all very nice, but
at some point we need to be able to determine which option a user has selected.
The List controls support three properties that we can use to determine the
selected list item:
· SelectedItem: Gets
the first selected list item.
· SelectedValue: Gets
or sets the value of the first selected list item.
In the example given below, the page in enable us to select an
item from the DropDownList control and display the value of the
selected item's Text property.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub btnSelect_Click(ByVal sender As Object, ByVal e As EventArgs)
lblSelectedProduct.Text = ddlProducts.SelectedItem.Text
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList
id="ddlProducts"
DataSourceID="SqlDataSource1"
DataTextField="NAME"
DataValueField="ID"
Runat="server" />
<asp:Button
id="btnSelect"
Text="Select"
OnClick="btnSelect_Click"
Runat="server" />
<hr />
<asp:Label
id="lblSelectedProduct"
Runat="server" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT [ID],
[NAME] FROM [PRODUCT_LIST]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
The SelectedItem property is used to retrieve the
selected ListItem control from the DropDownList control.
The value of the selected item's Text property
is displayed in the Label control.
We can
use these properties when we want to associate a List control with another DataBound control.
For example, the page given below contains a DropDownList control
that displays a list of product list based on product id and a GridViewcontrol
that displays a list of products that match the selected id in listbox.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
.gridView
{
margin-top:20px;
}
.gridView td, .gridView th
{
padding:10px;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList
id="ddlProductDetails"
DataSourceID="SqlDataSource1"
DataTextField="NAME"
DataValueField="ID"
Runat="server" />
<asp:Button
id="btnSelect"
Text="Select"
Runat="server" />
<asp:GridView
id="grdProductDetails"
DataSourceID="SqlDataSource2"
CssClass="gridView"
Runat="server" />
<br />
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT [ID],
[NAME] FROM [PRODUCT_LIST]"></asp:SqlDataSource>
<br />
<br />
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT [ID],
[NAME], [COMP_NAME], [PRICE] FROM [DTLS_PRODUCT] WHERE ID=@ID">
<SelectParameters>
<asp:ControlParameter
Name="ID"
ControlID="ddlProductDetails"
PropertyName="SelectedValue" />
</SelectParameters>
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
The DropDownList control is bound to the SqlDataSource1
to SqlDataSource control, and the GridView control
is bound to the SqlDataSource2 to SqlDataSource control.
The SqlDataSource1 SqlDataSource control includes a ControlParameter, which
represents the SelectedValue property of the DropDownList control.
When we select a product name from theDropDownList control,
the selected value changes and the GridView control
displays a list of matching ID in SqlDataSource2.
Note: Continue in Next Part.
Comments
Post a Comment