<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<!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>AjaxPro implementation 2 Levels of linkage </title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="200" border="0" align="center" cellpadding="3" cellspacing="1" bordercolor="#FFFFFF" style="border-collapse: collapse">
<tr align="center">
<td height="20" colspan="2">
<strong>AjaxPro implementation 2 Levels of linkage </strong> </td>
</tr>
<tr class="tdbg" >
<td width="30%">
provinces </td>
<td width="70%" align="left">
<asp:DropDownList ID="ddlStateList" runat="server" DataTextField="StateName" DataValueField="StateId">
</asp:DropDownList></td>
</tr>
<tr class="tdbg" >
<td><strong> city </strong></td>
<td align="left">
<asp:DropDownList ID="ddlCityList" runat="server">
</asp:DropDownList></td>
</tr>
</table>
</div>
<script language="javascript" type="text/javascript" defer="defer">
function ShowCity(id)
{
var res=Test.GetCityList(parseInt(id)).value;
var ddl=document.getElementById("<%=ddlCityList.UniqueID %>");
ddl.length=0;
if(res)
{
//res The server returned it 1 a List<City> A collection of
for(var i=0;i<res.length;i++)
{
ddl.options.add(new Option(res[i].CityName,res[i].CityId));
// As you can see above, it can be called directly List<City> The elements in the collection and their attributes
}
}
}
</script>
</form>
</body>
</html>
<DIV class=cnblogs_Highlighter><PRE class=brush:csharp>using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
/**
* Writing instructions: this article shows how to use it AjaxPro Interacts with the server and is also shown in Js You can directly call the collection returned by the server and directly call the server class The properties of the
* Author: duke zhou
* Date: 2008-1-1
* Initial address: http://blog.csdn.net/zhoufoxcn/
**/
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
List<State> stateList = new List<State>(10);
stateList.Add(new State(0, " Select the city "));// The default option
stateList.Add(new State(1," Beijing "));
stateList.Add(new State(2, " tianjin "));
stateList.Add(new State(3, " Shanghai "));
stateList.Add(new State(4, " hubei "));
stateList.Add(new State(5, " hunan "));
stateList.Add(new State(6, " shanxi "));
ddlStateList.DataSource = stateList;
ddlStateList.DataBind();
ddlStateList.Attributes["onchange"] = "ShowCity(this.options[selectedIndex].value)";
}
AjaxPro.Utility.RegisterTypeForAjax(typeof(Test));// registered
}
[AjaxPro.AjaxMethod]
public List<City> GetCityList(int stateId)
{
// Oh, are I familiar with the city or district
List<City> cityList = new List<City>(12);
cityList.Add(new City(11, " Haidian district, ", 1));
cityList.Add(new City(12, " Chaoyang district ", 1));
cityList.Add(new City(13, " Dagang district ", 2));
cityList.Add(new City(14, " Nankai district ", 2));
cityList.Add(new City(15, " Putuo district ", 3));
cityList.Add(new City(16, " Huangpu district ", 3));
cityList.Add(new City(17, " huanggang ", 4));
cityList.Add(new City(18, " Jingzhou city ", 4));
cityList.Add(new City(19, " Changsha city ", 5));
cityList.Add(new City(20, " Yueyang city ", 5));
cityList.Add(new City(21, " Taiyuan city ", 6));
cityList.Add(new City(22, " datong ", 6));
List<City> tempList = new List<City>();
for (int i = 0; i < cityList.Count; i++)
{
if (cityList[i].StateId == stateId)
{
tempList.Add(cityList[i]);
}
}
return tempList;
}
}
/// <summary>
/// Province information
/// </summary>
public class State
{
private int stateId;
private string stateName;
/// <summary>
/// Province name
/// </summary>
public string StateName
{
get { return stateName; }
set { stateName = value; }
}
/// <summary>
/// Province number
/// </summary>
public int StateId
{
get { return stateId; }
set { stateId = value; }
}
public State(int stateId, string stateName)
{
this.stateId = stateId;
this.stateName = stateName;
}
}
/// <summary>
/// City information
/// </summary>
public class City
{
private int cityId;
private int stateId;
private string cityName;
/// <summary>
/// The city name
/// </summary>
public string CityName
{
get { return cityName; }
set { cityName = value; }
}
/// <summary>
/// Province number of the city
/// </summary>
public int StateId
{
get { return stateId; }
set { stateId = value; }
}
/// <summary>
/// City Numbers
/// </summary>
public int CityId
{
get { return cityId; }
set { cityId = value; }
}
public City(int cityId, string cityName, int stateId)
{
this.cityId = cityId;
this.cityName = cityName;
this.stateId = stateId;
}
}
</PRE>
</DIV>