I am having a very basic application containing 1 label and two drop down lists. You select a player name from the first drop-down and immediately the corresponding country will be displayed in the other drop down list. Here is the markup:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestDropDownList.aspx.cs" Inherits="Demos_TestDropDownList" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server"></asp:Label>
<br />
<br />
<asp:DropDownList ID="DropDownList1" runat="server"
onselectedindexchanged="DropDownList1_SelectedIndexChanged"
AutoPostBack="true">
</asp:DropDownList>
<br />
<br />
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true" Width="110">
</asp:DropDownList>
</div>
</form>
</body>
</html>
and here is the code behind file:
public partial class Demos_TestDropDownList : System.Web.UI.Page
{
DataRow CreateRow(DataTable dt, string name, string country)
{
DataRow dr = dt.NewRow();
dr["Name"] = name;
dr["Country"] = country;
return dr;
}
DataRow CreateRow(DataTable dt, string country)
{
DataRow dr = dt.NewRow();
dr["Country"] = country;
return dr;
}
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// creating the data table
DataTable dt = new DataTable("Player Details");
// adding two columns Name and Country
dt.Columns.Add("Name", typeof(String));
dt.Columns.Add("Country", typeof(String));
// create 3 rows
dt.Rows.Add(CreateRow(dt, "Rafael Nadal", "Spain"));
dt.Rows.Add(CreateRow(dt, "Li Na", "China"));
dt.Rows.Add(CreateRow(dt, "Roger Federer", "Switzerland"));
// create a data view
DataView dv = new DataView(dt);
DropDownList1.DataSource = dv;
DropDownList1.DataTextField = "Name";
DropDownList1.DataValueField = "Country";
DropDownList1.DataBind();
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Label1.Text = DropDownList1.SelectedItem.Text;
// creating the data table
DataTable dt = new DataTable("Particular Player Details");
// adding 1 column Country
dt.Columns.Add("Country", typeof(String));
if (Label1.Text.CompareTo("Li Na") == 0)
{
dt.Rows.Add(CreateRow(dt, "China"));
}
if (Label1.Text.CompareTo("Rafael Nadal") == 0)
{
dt.Rows.Add(CreateRow(dt, "Spain"));
}
if (Label1.Text.CompareTo("Roger Federer") == 0)
{
dt.Rows.Add(CreateRow(dt, "Switzerland"));
}
// create a data view
DataView dv = new DataView(dt);
DropDownList2.DataSource = dv;
DropDownList2.DataTextField = "Country";
DropDownList2.DataValueField = "Country";
DropDownList2.DataBind();
}
}
Currently the whole page refreshes when I select some name from the first drop down list. I don't want that to happen. I heard from my colleague that we have to use AJAX so I have started learning that now. Any help / resources shall be appreciated.
Thanks
3 Answers 3
you can create a web method to return the country Id,
[WebMethod]
public static string GetCountryId(string playerId)
{//get country id here
return countryId.ToString();
}
and in your page you can use ajax to call this method and get returned data,
$.ajax({
type: "POST",
url: "PageName.aspx/GetCountryId",
data: {playerId:$("#DropDownList1:selected").val()},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(countryId) {
//change second drop down here according to the returned countryId using javascript
$("#DropDownList2").val(countryId) ;
}
});
and here is a good tutorial http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/
Comments
You need to learn asp.net Ajax Extension API. Please take a look at these tutorials:
Comments
Since you're using ASP.NET check out these tutorials asp.net tutorials