<div class="content"> <h4>Please select a Province or State to ship to</h4> <asp:DropDownList onChange="LoadStates(this)" ID="countries" Runat="server" /> <asp:DropDownList ID="states" Runat="server" /> <asp:Button ID="submit" Runat="server" Text="Submit" /> </div> </form> </body> </HTML><script language="javascript"> //states dropdown var statesList = document.getElementById("<%=states.ClientID%>");//called by the onChange javascript event on the dropdown function LoadStates(countries) { var countryId = countries.options[countries.selectedIndex].value; if (countryId > 0) { //DropDownLink is defined by Ajax.Net because that's the name of the type we registered DropDownLink.GetStates(countryId, LoadStates_CallBack); } else { //clear the states dropdown states.options.length = 0; } } //callback we told Ajax.Net to pass the response tos function LoadStates_CallBack(response) { //if the server side code threw an exception if (response.error != null) { alert(response.error); //we should probably do better than this return; }
var states = response.value; //if the response wasn't what we expected if (states == null || typeof(states) != "object") { return; }
statesList.options.length = 0; //reset the states dropdown //note that this is JavaScript casing and the L in length is lowercase for arrays for (var i = 0; i < states.Rows.length; ++i) { statesList.options[statesList.options.length] = new Option(states.Rows[i].State, states.Rows[i].Id); } } </script>
using System; using System.Data; using System.Web.UI; using System.Web.UI.WebControls;namespace AjaxSampleCS.Sample1 { public class DropDownLink : Page { protected DropDownList countries; protected DropDownList states; protected Button submit; private void Page_Load(object sender, EventArgs e) {
//Make methods ed with the AjaxMethod attribute of this class //available to client-side calls. Ajax.Utility.RegisterTypeForAjax(typeof(DropDownLink)); if (!Page.IsPostBack) { countries.DataSource = DAL.GetShippingCountries(); countries.DataTextField = "Country"; countries.DataValueField = "Id"; countries.DataBind(); countries.Items.Insert(0, new ListItem("Please Select", "0")); } } [Ajax.AjaxMethod()] public DataView GetStates(int countryId) { return DAL.GetCountryStates(countryId); } private void submit_Click(object sender, EventArgs e) { //Rember that the states dropdown was populate client-side //that means it's values aren't preserved in the viewstate //the only way to get the selected value is the tried and tested Request.Form string selectedStateId = Request.Form[states.UniqueID]; Response.Write("You selected province/state id: " + selectedStateId); //this also means that if we want to redisplay the form with the user's selected value, //we need to do some extra work //should do some user validation... states.DataSource = DAL.GetCountryStates(Convert.ToInt32(countries.SelectedIndex)); states.DataTextField = "State"; states.DataValueField = "Id"; states.DataBind(); states.SelectedIndex = states.Items.IndexOf(states.Items.FindByValue(selectedStateId)); } #region Web Form Designer generated code protected override void OnInit(EventArgs e) { // // CODEGEN: This call is required by the ASP.NET Web Form Designer. // InitializeComponent(); base.OnInit(e); } /// <summary> /// Required method for Designer support - do not modify /// the contents of this method with the code editor. /// </summary> private void InitializeComponent() { this.submit.Click += new EventHandler(this.submit_Click); this.Load += new EventHandler(this.Page_Load); } #endregion } }
记得用JS，不能用visible=true/false，刷新服务器
<%@ Register TagPrefix="Common" TagName="Header" Src="~/common/header.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Linked DropDownList</title>
<link rel="stylesheet" type="text/css" href="../common/ajax.css">
</HEAD>
<body>
<form id="form" method="post" runat="server">
<Common:Header runat="server" ID="Header1"/>
<div class="content">
<h4>Please select a Province or State to ship to</h4>
<asp:DropDownList onChange="LoadStates(this)" ID="countries" Runat="server" />
<asp:DropDownList ID="states" Runat="server" />
<asp:Button ID="submit" Runat="server" Text="Submit" />
</div>
</form>
</body>
</HTML><script language="javascript">
//states dropdown
var statesList = document.getElementById("<%=states.ClientID%>");//called by the onChange javascript event on the dropdown
function LoadStates(countries)
{
var countryId = countries.options[countries.selectedIndex].value;
if (countryId > 0)
{
//DropDownLink is defined by Ajax.Net because that's the name of the type we registered
DropDownLink.GetStates(countryId, LoadStates_CallBack);
}
else
{
//clear the states dropdown
states.options.length = 0;
}
}
//callback we told Ajax.Net to pass the response tos
function LoadStates_CallBack(response)
{
//if the server side code threw an exception
if (response.error != null)
{
alert(response.error); //we should probably do better than this
return;
}
var states = response.value;
//if the response wasn't what we expected
if (states == null || typeof(states) != "object")
{
return;
}
statesList.options.length = 0; //reset the states dropdown
//note that this is JavaScript casing and the L in length is lowercase for arrays
for (var i = 0; i < states.Rows.length; ++i)
{
statesList.options[statesList.options.length] = new Option(states.Rows[i].State, states.Rows[i].Id);
}
}
</script>
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;namespace AjaxSampleCS.Sample1
{
public class DropDownLink : Page
{
protected DropDownList countries;
protected DropDownList states;
protected Button submit; private void Page_Load(object sender, EventArgs e)
{
//Make methods ed with the AjaxMethod attribute of this class
//available to client-side calls.
Ajax.Utility.RegisterTypeForAjax(typeof(DropDownLink));
if (!Page.IsPostBack)
{
countries.DataSource = DAL.GetShippingCountries();
countries.DataTextField = "Country";
countries.DataValueField = "Id";
countries.DataBind(); countries.Items.Insert(0, new ListItem("Please Select", "0"));
}
} [Ajax.AjaxMethod()]
public DataView GetStates(int countryId)
{
return DAL.GetCountryStates(countryId);
} private void submit_Click(object sender, EventArgs e)
{ //Rember that the states dropdown was populate client-side
//that means it's values aren't preserved in the viewstate
//the only way to get the selected value is the tried and tested Request.Form
string selectedStateId = Request.Form[states.UniqueID];
Response.Write("You selected province/state id: " + selectedStateId); //this also means that if we want to redisplay the form with the user's selected value,
//we need to do some extra work //should do some user validation...
states.DataSource = DAL.GetCountryStates(Convert.ToInt32(countries.SelectedIndex));
states.DataTextField = "State";
states.DataValueField = "Id";
states.DataBind();
states.SelectedIndex = states.Items.IndexOf(states.Items.FindByValue(selectedStateId)); } #region Web Form Designer generated code
protected override void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.submit.Click += new EventHandler(this.submit_Click);
this.Load += new EventHandler(this.Page_Load);
}
#endregion }
}