I am using asp.net c# to make a project. I need to make a part where i have a dropdown list which contains car models,which I get from my database. Afterwards I need to change a panel's content each time a new value is selected in the dropdown list(without refreshing the whole page).
I tried using the following code:
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" DataTextField="MODEL" Height="39px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" Width="151px">
</asp:DropDownList>
<asp:ScriptManager id="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<br />
<div id="finalDisplay" runat="server"></div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger controlid="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
I belive the structure which should be used here is updatePanel. So I need my div with id finalDisplay to display all the comments which are also stored on a database. Here is my code for it:
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
//get car id from database
string model = DropDownList1.SelectedValue.ToString();
string sql1 = "SELECT CAR_ID FROM CARS WHERE MODEL='" + model + "'";
string[] attr1 = { "CAR_ID"};
List<String> cid = getList(sql1, attr1);
string car_id = cid[0].ToString().Trim();
//get all comments stored in the database for that car
string sql2 = "SELECT USER_ID,CONTENT FROM COMMENTS where car_id='" + car_id + "'";
string[] attr2 = { "CONTENT" };
List<String> contents = getList(sql2, attr2);
string class_names= "usernames";
string class_contents= "contents";
for (int i = 0; i < contents.Count-1; i++) {
string uid = contents[i];
string tmp_sql = "Select user_name from users where user_id='" + uid + "'";
string[] tmp_attr={"USER_NAME"};
List<String> tmp_list=getList(tmp_sql,tmp_attr);
finalDisplay.InnerHtml += "<p class="+class_names+">" + tmp_list[0] + ":</p>";
finalDisplay.InnerHtml += "<p class="+class_contents+">" + contents[i + 1] + "</p>";
i = i + 1;
}
}
In the div with id finalDisplay nothing happens,it's empty. What am I doing wrong? It's my first time using ajax(if this is even ajax).
Move the DropDownList
inside of the UpdatePanel
.