您的位置：首页 > 其它

使用ICallbackEventHandler接口实现的轻量级下拉框联动

2008-08-06 10:01 603 查看

基于Asp.Net，用回发实现的下拉框联动，

这是基于DotNet里一个接口：ICallbackEventHandler，通过实现这个接口，让页面有了可以无刷新回发的能力

从而可以实现我们的目的：联动

另外，这个方法也比使用AJAXPro控件来的简单，因为它不用引入控件。

<%@ Page Language="C#" %>
<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>
<!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>
<title>Untitled Page</title>
<script language="C#" runat="server">
public void Page_Load(object sender, EventArgs e)
{
lstProvince.Attributes.Add("onchange", "CallServer(this.value);");

// 取得省份数据，并绑定到省份下拉框
ListItem l_item;
l_item = new ListItem("山东", "1");
lstProvince.Items.Add(l_item);
l_item = new ListItem("江西", "2");
lstProvince.Items.Add(l_item);
l_item = new ListItem("福建", "3");
lstProvince.Items.Add(l_item);
}

public string m_CallbackResult; // 用于传递要返回的Html

// 下面实现接口要求的2个方法

//实现接口后，ajax回发时，会先调用这个方法
public void RaiseCallbackEvent(string eventArgument)
{
// 根据提交过来的省份ID获取城市数据
string[] l_arrCity;
switch (eventArgument)
{
case "1":
l_arrCity = new string[] { "济南", "青岛", "烟台" };
break;
case "2":
l_arrCity = new string[] { "南昌", "吉安", "九江", "赣州","宜春" };
break;
case "3":
l_arrCity = new string[] { "福州", "厦门", "泉州", "三明" };
break;
default:
return;
}

// 先清空全部选项
lstCity.Items.Clear();

// 重新绑定城市下拉框
foreach (string l_item in l_arrCity)
lstCity.Items.Add(l_item);

// 获取城市下拉框生成的html，并返回它给调用的js
System.IO.TextWriter l_txtWriter = new System.IO.StringWriter();
System.Web.UI.HtmlTextWriter l_writer = new HtmlTextWriter(l_txtWriter);
lstCity.RenderControl(l_writer);
m_CallbackResult = l_txtWriter.ToString(); // 把html存入RaiseCallbackEvent，在下面的方法里返回
}

// 执行完RaiseCallbackEvent方法，紧接着会执行这个方法，返回一个字符串，也就是js会收到的东东
public string GetCallbackResult()
{
return m_CallbackResult;
}
</script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function CallServer(arg){
<%=ClientScript.GetCallbackEventReference(this, "arg", "JsRecieve", null) %>
}

function JsRecieve(ret){
document.getElementById("spnCity").innerHTML = ret;
}
</script>
</head>
<body onload="CallServer(document.getElementById('lstProvince').value)">
<form id="Form1" runat="server">
省份：<asp:DropDownList ID="lstProvince" runat="server"></asp:DropDownList>

城市：<span id="spnCity"><asp:DropDownList ID="lstCity" runat="server"></asp:DropDownList></span>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航