<! 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 achieves level-2 Association </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 achieves level-2 Association </strong> </td>
</Tr>
<Tr class = "tdbg">
& Lt; td width = "30%" & gt;
Province </td>
& Lt; td width = "70%" align = "left" & gt;
<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 is a List <City> set returned by the server.
For (var I = 0; I <res. length; I ++)
{
Ddl. options. add (new Option (res [I]. CityName, res [I]. CityId ));
// From the above we can see that the elements and their attributes in the List <City> set can be directly called.
}
}
}
</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 Description: This article shows how to use AjaxPro to interact with the server. It also shows how to directly call the set returned by the server in Js and the attributes of directly calling the class on the server.
* Author: Zhou Gong
* Date:
* First 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 city"); // 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); // register
}
[AjaxPro. AjaxMethod]
Public List <City> GetCityList (int stateId)
{
// Haha, they are all familiar cities or zones
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 City", 4 ));
CityList. Add (new City (18, "Jingzhou", 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 City", 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 ID
/// </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>
/// City name
/// </Summary>
Public string CityName
{
Get {return cityName ;}
Set {cityName = value ;}
}
/// <Summary>
/// Province ID of the city
/// </Summary>
Public int StateId
{
Get {return stateId ;}
Set {stateId = value ;}
}
/// <Summary>
/// City id
/// </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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
