`
380071587
  • 浏览: 440506 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

用AjaxPro实现二级联动

 
阅读更多

在实际asp.net项目中经常会遇到无刷新二级或者N级(N>=2)联动情况,其实N级联动和二级联动的原理都是一样的,实现这种办法有很多,一种是纯脚本实现(动态生成Array数组),一种是采用微软的Ajax.net中的UpdatePanel来实现,今天我给大家来展示如何采用AjaxPro来实现,相关文章请参考http://blog.csdn.net/zhoufoxcn/archive/2008/01/05/2026908.aspx《AjaxPro与服务器端交互过程中如何传值》一文。

前台aspx页面:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Test.aspx.cs"Inherits="Test"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DtdXHTML1.0Transitional//EN""http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>AjaxPro实现二级联动</title>
</head>
<body>
<formid="form1"runat="server">
<div>
<tablewidth="200"border="0"align="center"cellpadding="3"cellspacing="1"bordercolor="#FFFFFF"style="border-collapse:collapse">
<tralign="center">
<tdheight="20"colspan="2">
<strong>AjaxPro实现二级联动</strong>&nbsp;</td>
</tr>
<trclass="tdbg">
<tdwidth="30%">
省份
</td>
<tdwidth="70%"align="left">
<asp:DropDownListID="ddlStateList"runat="server"DataTextField="StateName"DataValueField="StateId">
</asp:DropDownList></td>
</tr>
<trclass="tdbg">
<td><strong>城市</strong></td>
<tdalign="left">
<asp:DropDownListID="ddlCityList"runat="server">
</asp:DropDownList></td>
</tr>
</table>

</div>
<scriptlanguage="javascript"type="text/javascript"defer="defer">
functionShowCity(id)
{
varres
=Test.GetCityList(parseInt(id)).value;
varddl
=document.getElementById("<%=ddlCityList.UniqueID%>");
ddl.length
=0;
if(res)
{
//res是服务器返回的一个List<City>集合
for(vari=0;i<res.length;i++)
{
ddl.options.add(
newOption(res[i].CityName,res[i].CityId));
//从上面可以看出可以直接调用List<City>集合中的元素和它们的属性
}
}
}
</script>
</form>
</body>
</html>
后台.cs代码,注意为了省事,我把两个实体类也一同归并到一个.cs文件中了。
Test.cs
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Collections.Generic;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;


/**
*写作说明:本文展示了如何利用AjaxPro与服务器交互,并且还展示了在Js中可以直接调用服务器返回的集合和直接调用服务器上class的属性
*作者:周公
*日期:2008-1-1
*首发地址:
http://blog.csdn.net/zhoufoxcn/
*
*/
publicpartialclassTest:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
if(!Page.IsPostBack)
{
List
<State>stateList=newList<State>(10);
stateList.Add(
newState(0,"选择城市"));//默认选项
stateList.Add(newState(1,"北京"));
stateList.Add(
newState(2,"天津"));
stateList.Add(
newState(3,"上海"));
stateList.Add(
newState(4,"湖北"));
stateList.Add(
newState(5,"湖南"));
stateList.Add(
newState(6,"山西"));
ddlStateList.DataSource
=stateList;
ddlStateList.DataBind();
ddlStateList.Attributes[
"onchange"]="ShowCity(this.options[selectedIndex].value)";
}
AjaxPro.Utility.RegisterTypeForAjax(
typeof(Test));//注册
}
[AjaxPro.AjaxMethod]
publicList<City>GetCityList(intstateId)
{
//呵呵,都是我熟悉的城市或者区
List<City>cityList=newList<City>(12);
cityList.Add(
newCity(11,"海淀区",1));
cityList.Add(
newCity(12,"朝阳区",1));
cityList.Add(
newCity(13,"大港区",2));
cityList.Add(
newCity(14,"南开区",2));
cityList.Add(
newCity(15,"普陀区",3));
cityList.Add(
newCity(16,"黄浦区",3));
cityList.Add(
newCity(17,"黄冈市",4));
cityList.Add(
newCity(18,"荆州市",4));
cityList.Add(
newCity(19,"长沙市",5));
cityList.Add(
newCity(20,"岳阳市",5));
cityList.Add(
newCity(21,"太原市",6));
cityList.Add(
newCity(22,"大同市",6));
List
<City>tempList=newList<City>();
for(inti=0;i<cityList.Count;i++)
{
if(cityList[i].StateId==stateId)
{
tempList.Add(cityList[i]);
}
}
returntempList;
}
}
///<summary>
///省份信息
///</summary>
publicclassState
{
privateintstateId;
privatestringstateName;
///<summary>
///省份名
///</summary>
publicstringStateName
{
get{returnstateName;}
set{stateName=value;}
}

///<summary>
///省份编号
///</summary>
publicintStateId
{
get{returnstateId;}
set{stateId=value;}
}
publicState(intstateId,stringstateName)
{
this.stateId=stateId;
this.stateName=stateName;
}
}
///<summary>
///城市信息
///</summary>
publicclassCity
{
privateintcityId;
privateintstateId;
privatestringcityName;
///<summary>
///城市名称
///</summary>
publicstringCityName
{
get{returncityName;}
set{cityName=value;}
}

///<summary>
///城市所在省份编号
///</summary>
publicintStateId
{
get{returnstateId;}
set{stateId=value;}
}

///<summary>
///城市编号
///</summary>
publicintCityId
{
get{returncityId;}
set{cityId=value;}
}

publicCity(intcityId,stringcityName,intstateId)
{
this.cityId=cityId;
this.cityName=cityName;
this.stateId=stateId;
}

}

程序运行效果:
未选择的效果:

选择北京的效果:

选择周公的家乡湖北黄冈的效果:

具体代码很简单,也做了注释,如果还是不懂,请看我的另一篇文章吧。

分享到:
评论

相关推荐

    asp.net下使用AjaxPro实现二级联动代码

    本文展示了如何利用AjaxPro与服务器交互,并且还展示了在Js中可以直接调用服务器返回的集合和直接调用服务器上class的属性

    ajaxPro二级联动示例

    二级联动的示例,代码非常简单

    ajaxpro三级联动

    ajaxpro三级联动,代码简单,vs2005加Access

    Ajax实现二级联动效果

    利用AjaxPro.dll组件实现简单的省份、城市的二级联动效果。

    Asp.net MVC开源泉文章发布系统(三层MVC模式) 实例

    主要功能: 1、文章管理:发布、修改、删除文章,还能对文章进行置顶、推荐、审核...4、用AjaxPro.2.dll实现二级栏目联动,并解决了栏目取值问题。(但修改文章时二级栏目在页面加载时无法从数据库取值的问题还没解决)

    HuGo版文章发布系统(三层MVC模式)

    4、用AjaxPro.2.dll实现二级栏目联动,并解决了栏目取值问题。(但修改文章时二级栏目在页面加载时无法从数据库取值的问题还没解决) 5、本站采用forms身份和角色验证,实现管理员和普通用户两类不同的权限。 6、...

    asp.netMVC文章发布系统

    4、用AjaxPro.2.dll实现二级栏目联动,并解决了栏目取值问题。(但修改文章时二级栏目在页面加载时无法从数据库取值的问题还没解决) 5、本站采用forms身份和角色验证,实现管理员和普通用户两类不同的权限。 6、...

    HuGo版文章发布系统源码三层MVC模式

    4、用AjaxPro.2.dll实现二级栏目联动,并解决了栏目取值问题。(但修改文章时二级栏目在页面加载时无法从数据库取值的问题还没解决) 5、本站采用forms身份和角色验证,实现管理员和普通用户两类不同的权限。 6、...

    asp.net知识库

    使用.ashx文件处理IHttpHandler实现发送文本及二进制数据的方法 制作一个简单的多页Tab功能 一完美的关于请求的目录不存在而需要url重写的解决方案! 在C#中实现MSN消息框的功能 XmlHttp实现无刷新三联动ListBox 鼠标...

Global site tag (gtag.js) - Google Analytics