asp.net下使用AjaxPro實現二級聯動代碼

來源：懂視網責編：小采時間：2020-11-27 22:42:59

asp.net下使用AjaxPro實現二級聯動代碼

asp.net下使用AjaxPro實現二級聯動代碼: 代碼如下:<%@ Page Language=C# AutoEventWireup=true CodeFile=Test.aspx.cs Inherits=Test %> <!DOCTYPE html PUBLIC -//W3C//Dtd XHTML 1.0 Transitional//EN http://www

推薦度：

點擊下載本文 文檔為doc格式

導讀asp.net下使用AjaxPro實現二級聯動代碼: 代碼如下:<%@ Page Language=C# AutoEventWireup=true CodeFile=Test.aspx.cs Inherits=Test %> <!DOCTYPE html PUBLIC -//W3C//Dtd XHTML 1.0 Transitional//EN http://www

代碼如下:


<%@ 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實現二級聯動</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實現二級聯動</strong> </td> 
</tr> 
<tr class="tdbg" > 
<td width="30%"> 
省份</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>城市</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是服務器返回的一個List<City>集合 
for(var i=0;i<res.length;i++) 
{ 
ddl.options.add(new Option(res[i].CityName,res[i].CityId)); 
//從上面可以看出可以直接調用List<City>集合中的元素和它們的屬性 
} 
} 
} 
</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; 

/** 
* 寫作說明：本文展示了如何利用AjaxPro與服務器交互，并且還展示了在Js中可以直接調用服務器返回的集合和直接調用服務器上class的屬性 
* 作者：周公 
* 日期：2008-1-1 
* 首發地址：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, "選擇城市"));//默認選項 
stateList.Add(new State(1,"北京")); 
stateList.Add(new State(2, "天津")); 
stateList.Add(new State(3, "上海")); 
stateList.Add(new State(4, "湖北")); 
stateList.Add(new State(5, "湖南")); 
stateList.Add(new State(6, "山西")); 
ddlStateList.DataSource = stateList; 
ddlStateList.DataBind(); 
ddlStateList.Attributes["onchange"] = "ShowCity(this.options[selectedIndex].value)"; 
} 
AjaxPro.Utility.RegisterTypeForAjax(typeof(Test));//注冊 
} 
[AjaxPro.AjaxMethod] 
public List<City> GetCityList(int stateId) 
{ 
//呵呵，都是我熟悉的城市或者區 
List<City> cityList = new List<City>(12); 
cityList.Add(new City(11, "海淀區", 1)); 
cityList.Add(new City(12, "朝陽區", 1)); 
cityList.Add(new City(13, "大港區", 2)); 
cityList.Add(new City(14, "南開區", 2)); 
cityList.Add(new City(15, "普陀區", 3)); 
cityList.Add(new City(16, "黃浦區", 3)); 
cityList.Add(new City(17, "黃岡市", 4)); 
cityList.Add(new City(18, "荊州市", 4)); 
cityList.Add(new City(19, "長沙市", 5)); 
cityList.Add(new City(20, "岳陽市", 5)); 
cityList.Add(new City(21, "太原市", 6)); 
cityList.Add(new City(22, "大同市", 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> 
/// 省份信息 
/// </summary> 
public class State 
{ 
private int stateId; 
private string stateName; 
/// <summary> 
/// 省份名 
/// </summary> 
public string StateName 
{ 
get { return stateName; } 
set { stateName = value; } 
} 
/// <summary> 
/// 省份編號 
/// </summary> 
public int StateId 
{ 
get { return stateId; } 
set { stateId = value; } 
} 
public State(int stateId, string stateName) 
{ 
this.stateId = stateId; 
this.stateName = stateName; 
} 
} 
/// <summary> 
/// 城市信息 
/// </summary> 
public class City 
{ 
private int cityId; 
private int stateId; 
private string cityName; 
/// <summary> 
/// 城市名稱 
/// </summary> 
public string CityName 
{ 
get { return cityName; } 
set { cityName = value; } 
} 
/// <summary> 
/// 城市所在省份編號 
/// </summary> 
public int StateId 
{ 
get { return stateId; } 
set { stateId = value; } 
} 
/// <summary> 
/// 城市編號 
/// </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> 

 
 




聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

asp.net下使用AjaxPro實現二級聯動代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽：聯動 asp 多級聯動

熱門焦點

asp.net下使用AjaxPro實現二級聯動代碼

asp.net下使用AjaxPro實現二級聯動代碼

asp.net下使用AjaxPro實現二級聯動代碼

最新推薦

猜你喜歡

熱門推薦