Zen Axelsson Zen Axelsson - 6 months ago 14
HTML Question

How do I show an associated value with a dropdown list item (after choosing it from the list)?

I am programming in ASP.NET, visual studio. I have a dropdown list created in HTML form. If I dropdown the list, it displays the record from associated column in the table. But what I want is to show the corresponding value / record with that list item.

For example in the table, I have column

id
,
productname
and
price
. After choosing a particular product name (from drop down list), the associated price with it must be displayed in front of it (in a label).

However, By default, I want the drop down list to shows nothing in the beginning.

UPDATE:

Store.aspx:

<form id="form1" runat="server">
<div>
Welcome
<asp:Label ID="Label3" runat="server" ></asp:Label>
<br />
<br />
Products: <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" ></asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [productdata]"></asp:SqlDataSource>

&nbsp;Price:
<asp:Label ID="Label1" runat="server" ></asp:Label>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Add to Cart" />
<br />
<br />
Items in cart: <asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList>

<br />
<br />

Total Price: <asp:Label ID="Label2" runat="server"></asp:Label>

</div>
</form>


Store.aspx.cs:

public partial class Store : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Label3.Text = Request.QueryString["name"];//show welcome text
String cs = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
if (!IsPostBack)
{
using (SqlConnection sc = new SqlConnection(cs))
{
SqlCommand sqlcom = new SqlCommand("Select id, productname, price from productdata", sc);
sc.Open();
DropDownList1.DataTextField = "productname";//show in the dropdown list
DropDownList1.DataValueField = "price"; //show in the label
DropDownList1.DataSource = sqlcom.ExecuteReader();
DropDownList1.DataBind();
}
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
String cs = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
SqlDataReader rd;
using (SqlConnection sc = new SqlConnection(cs))
{
SqlCommand sqlcom = new SqlCommand("Select id, productname, price from productdata where id=" + Convert.ToUInt32(DropDownList1.SelectedValue), sc);
sc.Open();

rd = sqlcom.ExecuteReader();
if (rd.Read())
{
Label1.Text = rd[2].ToString();
}
sc.Close();

}

}
}


Database:

CREATE TABLE [dbo].[productdata] (
[Id] INT NOT NULL,
[productname] VARCHAR (50) NULL,
[price] FLOAT (53) NULL,
PRIMARY KEY CLUSTERED ([Id] ASC)
);

Answer

This Edit according to using AutoPostBack=True and if (!IsPostBack) in Page_Load thanks to Arindam:

For simply solution using postback event:

First you should add OnSelectedIndexChanged event for dropdownlist

<asp:DropDownList ID="DropDownList1" runat="server" 
     OnSelectedIndexChanged="GetPrice" AutoPostBack="true">
</asp:DropDownList>

Then in code behind you just get selected value and fill to the label price

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        Label3.Text = Request.QueryString["name"];//show welcome text
        String cs = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        using (SqlConnection sc = new SqlConnection(cs))
        {
            SqlCommand sqlcom = new SqlCommand("Select id, productname, price from productdata", sc);
            sc.Open();
            DropDownList1.DataTextField = "productname";//show in the dropdown list
            DropDownList1.DataValueField = "price"; //show in the label
            DropDownList1.DataSource = sqlcom.ExecuteReader();
            DropDownList1.DataBind();
        }
    }
}
protected void GetPrice(object sender, EventArgs e)
{
    Label1.Text = DropDownList1.SelectedValue;
}
  1. You have to use AutoPostBack=True so that when you change index of dropdownlist, it will trigger a postback to server so the function GetPrice(...) will be called.

  2. Every time the page postback, it will call function Page_Load(...) first, so you must use propertive IsPostBack to check if case1_this is the first time the page is loaded, or case2_a postback event, and you only set the ddl datasource at case1 because if you set datasource, by default the dropdownlist will reset to select first item in list.

When you go advance, you should consider using Javascript and Jquery to solve this, so the page will not load again like this postback solution.

And one more thing, you should name your controls well, don't make them default like that. It's one of two hard things in programming.

Comments