今天再写一个基于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>
- <!-- 下面这个spnCity要加上,用于回发时赋innerHTML用 -->
- 城市:<span id="spnCity"><asp:DropDownList ID="lstCity" runat="server"></asp:DropDownList></span>
- </form>
- </body>
- </html>