【Ajax实现无刷新三联动下拉框】

singlepine 2005-10-19 08:26:45
----------------------------1.html代码
<HTML>
<HEAD>
<title>Ajax实现无刷新三联动下拉框</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<SCRIPT language="javascript">
//城市------------------------------
function cityResult()
{
var city=document.getElementById("DropDownList1");
AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
}

function get_city_Result_CallBack(response)
{
if (response.value != null)
{
document.all("DropDownList2").length=0;
　　　　 var piArray = response.value.split(",");
　　　　 for(var i=0;i<piArray.length;i++)
　　　　 {
　　　　　　 var ary1 = piArray[i].toString().split("|");
　　　　　　 document.all("DropDownList2").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
　　　　 }
}
return
}
//市区----------------------------------------
function areaResult()
{
var area=document.getElementById("DropDownList2");
AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
}
function get_area_Result_CallBack(response)
{
if (response.value != null)
{
document.all("DropDownList3").length=0;
　　　　 var piArray = response.value.split(",");
　　　　 for(var i=0;i<piArray.length;i++)
　　　　 {
　　　　　　 var ary1 = piArray[i].toString().split("|");
　　　　　　 document.all("DropDownList3").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
　　　　 }
}
return
}
</SCRIPT>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" style="Z-INDEX: 104; LEFT: 96px; POSITION: absolute; TOP: 32px" cellSpacing="1"
cellPadding="1" width="300" border="1">
<TR>
<TD>省市</TD>
<TD>
<asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList></TD>
</TR>
<TR>
<TD>城市</TD>
<TD>
<asp:DropDownList id="DropDownList2" runat="server"></asp:DropDownList></TD>
</TR>
<TR>
<TD>市区</TD>
<TD>
<asp:DropDownList id="DropDownList3" runat="server"></asp:DropDownList></TD>
</TR>
</TABLE>
</form>
</body>
</HTML>

--------------------2.cs代码
public class AjaxDropDownList : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DropDownList DropDownList1;
protected System.Web.UI.WebControls.DropDownList DropDownList2;
protected System.Web.UI.WebControls.DropDownList DropDownList3;

private void Page_Load(object sender, System.EventArgs e)
{
if(!Page.IsPostBack)
{
this.DropDownList1.DataSource=AjaxMethod.GetPovinceList();
this.DropDownList1.DataTextField="province";
this.DropDownList1.DataValueField="provinceID";
this.DropDownList1.DataBind();

Ajax.Utility.RegisterTypeForAjax(typeof(AjaxMethod));
this.DropDownList1.Attributes.Add("onchange","cityResult();");
this.DropDownList2.Attributes.Add("onchange","areaResult();");
}
}

Web Form Designer generated code#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/**//// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion
}
-----------------------------------------------3.AjaxMethod
public class AjaxMethod
{
public static string ConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];

GetDataSet#region GetDataSet
public static DataSet GetDataSet(string sql)
{
SqlDataAdapter sda =new SqlDataAdapter(sql,ConnectionString);
DataSet ds=new DataSet();
sda.Fill(ds);
return ds;
}
#endregion

GetPovinceList#region GetPovinceList
public static DataSet GetPovinceList()
{
string sql="select * from povince";
return GetDataSet(sql);
}
#endregion

GetCityList#region GetCityList
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public static string GetCityList(int povinceid)
{
string sql="select * from city where father="+povinceid;
DataSet ds=GetDataSet(sql);
string str="";
for(int m=0;m<ds.Tables[0].Rows.Count;m++)
{
str+=","+ds.Tables[0].Rows[m]["cityID"].ToString()+"|"+ds.Tables[0].Rows[m]["city"].ToString();
}
str=str.Substring(1,str.Length-1);
return str;
}
#endregion

GetAreaList#region GetAreaList
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public static string GetAreaList(int cityid)
{
string sql="select * from area where father="+cityid;
DataSet ds=GetDataSet(sql);
string str="";
for(int m=0;m<ds.Tables[0].Rows.Count;m++)
{
str+=","+ds.Tables[0].Rows[m]["areaID"].ToString()+"|"+ds.Tables[0].Rows[m]["area"].ToString();
}
str=str.Substring(1,str.Length-1);
return str;
}
#endregion
}
...全文
2842 36 打赏 收藏 转发到动态 举报
写回复
用AI写文章
36 条回复
切换为时间正序
请发表友善的回复…
发表回复
huangbznet 2006-06-06
  • 打赏
  • 举报
 回复
学习一下
wahva 2006-05-18
  • 打赏
  • 举报
 回复
马上用到
xueyi0108 2006-05-11
  • 打赏
  • 举报
 回复
mark
hreoghost 2006-03-30
  • 打赏
  • 举报
 回复
学习```
guandianxi123 2005-10-22
  • 打赏
  • 举报
 回复
可否获取下拉列表的文本,而非数字编号.

还有如果服务控件Button 提交后,再运行DropDownList1选择项改变时,出现网页错误,怎么解决一下这个问题呢?

-^_^-

-^_^-

-^_^-
singlepine 2005-10-22
  • 打赏
  • 举报
 回复
还有如果服务控件Button 提交后,再运行DropDownList1选择项改变时,出现网页错误,怎么解决一下这个问题呢?

-----------------
提示错误是因为把Ajax.Utility.RegisterTypeForAjax(typeof(AjaxMethod));放到了if(!Page.IsPostBack){}的里面,放到外面就可以了,现在从我blog中重新copy就可以了.
guandianxi123 2005-10-21
  • 打赏
  • 举报
 回复
小山,如何获取联动控件的内容.比如,提交时获取省,市,区的值.

-^_^-

-^_^-

-^_^-
singlepine 2005-10-21
  • 打赏
  • 举报
 回复
to:guandianxi123()
我已经在blog中做出了演示效果，去看一下吧
真相重于对错 2005-10-20
  • 打赏
  • 举报
 回复
同意小山，任何事物都有优缺点，上来先说这个东西没用，典型的初学者言论
singlepine 2005-10-20
  • 打赏
  • 举报
 回复
to：RoninBlade(RoninBlade)
^_^
我是把access的数据库导入到sql server中用的，用的不是access数据库。^_^

--------------------------------
to：sp1234(我需要一月有40天)
^_^
我并不是在这里鼓吹ajax有多好，大家一定要用什么的，我只是把自己用ajax实现的一个无刷新三联动例子分享给大家，分享而已，如果大家有需要的时候可以参考一下，不需要那就不以用理就是了。

任何东西都有它的优点和缺点，择有而用就可以了。
sugarsupper 2005-10-20
  • 打赏
  • 举报
 回复
可以用无栓新产生无限级联动,针对树形表,虽然有延时,不过在分类方面上还是优点多的
Scarroot 2005-10-20
  • 打赏
  • 举报
 回复
mark
jimu8130 2005-10-20
  • 打赏
  • 举报
 回复
学习
clxxj 2005-10-20
  • 打赏
  • 举报
 回复
顶，高手能否帮我看看这个刷新的问题？
http://community.csdn.net/Expert/topic/4337/4337823.xml?temp=.2486078
RoninBlade 2005-10-20
  • 打赏
  • 举报
 回复
运行成功，但是要把sql语句修改一下，加上''，不知道lz是不是能运行成功。
以专业开发人员为伍 2005-10-20
  • 打赏
  • 举报
 回复
我在 http://community.csdn.net/Expert/topic/4325/4325950.xml?temp=7.22903E-03 举出一个相对的例子，哪里完全是asp.net机制。
aspdotnet2005 2005-10-20
  • 打赏
  • 举报
 回复
收藏！！！！thanks
以专业开发人员为伍 2005-10-20
  • 打赏
  • 举报
 回复
你所说的一些问题是都可以解决的,比如在 刷新延迟的时候完全可以屏蔽住页面上的一些关键的控件,再给用户一些提示
-----------------------------------------------------------------------------------------
之所以说Ajax是否合适，这是相对的。相对于你是真正用到了asp.net机制，还是只是把它当作刚做jsp或者asp的人习惯看待的那样完全依赖html和javascript来做的倾向于静态、用不着面向对象、用不着面向组件开发的极其简单应用。
真相重于对错 2005-10-20
  • 打赏
  • 举报
 回复
并不是一点都不去使用Ajax，真理越辩越明。

已经有太多的问题暴露出来了，对页面的状态机制的破坏怎么解决，如果页面上有一个服务器控件回发的时候那些Ajax怎么办，向楼主这样的代码很随意破毁了一些控件的内容（控件使用手册上很多属性、方法的解释全乱了，不对了）的时候怎么办，刷新延迟时没有状态条给客户怎么办.....当我们撒手不管程序员的时候他们破毁了表面上本来很明确一致的程序设计和维护更新逻辑造成后来的程序员面对大堆这类乱麻的时候谁来负责？！！
================================
不同意，ajax只是让你自己来控制这一切，当然一个完全依赖asp.net框架没有理解后台原理初学者是要慎用ajax
pwqzc 2005-10-20
  • 打赏
  • 举报
 回复
晕死
你就是用了个ajaxfornet组件啊
我的没有用组件
可以看看http://community.csdn.net/Expert/topic/4325/4325821.xml?temp=.8682978
数据来自数据库
而且更为简单
其实也是ajax
只是没有用那个组件罢了
加载更多回复（16）
web2.0+C#+Ajax实现无刷新三联动下拉框
web2.0+C#+Ajax实现无刷新三联动下拉框
ajax实现无刷新三联动下拉框
ajax实现无刷新三联动下拉框,全国各省份，地区和市县。
web自动化-键盘&对话框&下拉框&显示等待&隐式等待
本课程主要讲解web自动化-键盘 下拉框 对话框 显示等待 隐式等待,主要内容如下: 1. 键盘操作案例 2. 下拉框操作 3. 对话框处理 4. 滚动条操作 5. 显示等待 6. 隐式等待 7. 强制...
Ajax实现无刷新三联动下拉框
Ajax实现无刷新三联动下拉框，代码，实现过程
.NET中实现客户端联动菜单 (无刷新)
Ajax实现无刷新三联动下拉框 1.html代码 <title>Ajax实现无刷新三联动下拉框 <SCRIPT language="javascript"> //城市------------------------------ function cityResult() { var city=...
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章