怎樣用AjaxPro實現二級聯動_AJAX教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
推薦：如何用AjaxPro實現定時刷新效果在看本文之前，建議查看本人的系列文章： 《AjaxPro與服務器端交互過程中如何傳值》 《用AjaxPro實現二級聯動》，以便對AjaxPro有個初步印象。 說明：在Web開發中，有時候需要經常更新某一部分內容，如果不采用Ajax技術，就需要使用傳統的html技術，在head/h
在實際asp.net項目中經常會遇到無刷新二級或者N級(N>=2)聯動情況，其實N級聯動和二級聯動的原理都是一樣的，實現這種辦法有很多，一種是純腳本實現（動態生成Array數組），一種 是采用微軟的Ajax.net中的UpdatePanel來實現，今天我給大家來展示如何采用AjaxPro來實現，相關文章請參考《AjaxPro與服務器端交互過程中如何傳值》一文。
前臺aspx頁面：
<%@ 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>
<!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>
Test.cs
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;
}
}
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;
}
}
程序運行效果：
未選擇的效果：
選擇北京的效果：
選擇周公的家鄉湖北黃岡的效果：
分享：怎樣用AjaxPro實現無刷新翻頁效果及數據庫分頁在看本文之前，建議查看本人的系列文章： 《AjaxPro與服務器端交互過程中如何傳值》 《用AjaxPro實現二級聯動》 《用AjaxPro實現定時刷新效果》 以便對AjaxPro有個初步印象。 題外話：經不住一些朋友的一再要求，一氣寫了這么幾篇Ajax方面的文章，這其中大部
相關AJAX教程：
- 相關鏈接：
- 教程說明：
AJAX教程-怎樣用AjaxPro實現二級聯動
。