现在的位置: 首页 > 综合 > 正文

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

2018年01月23日 ⁄ 综合 ⁄ 共 3170字 ⁄ 字号 评论关闭

今天再写一个基于Asp.Net,用回发实现的下拉框联动,

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

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

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

不啰嗦了,看代码吧:

 

  1. <%@ Page Language="C#" %>
  2. <%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" >
  5. <head>
  6.     <title>Untitled Page</title>
  7.     <script language="C#" runat="server">
  8.         public void Page_Load(object sender, EventArgs e)
  9.         {
  10.             lstProvince.Attributes.Add("onchange", "CallServer(this.value);");
  11.             
  12.             // 取得省份数据,并绑定到省份下拉框
  13.             ListItem l_item;
  14.             l_item = new ListItem("山东", "1");
  15.             lstProvince.Items.Add(l_item);
  16.             l_item = new ListItem("江西", "2");
  17.             lstProvince.Items.Add(l_item);
  18.             l_item = new ListItem("福建", "3");
  19.             lstProvince.Items.Add(l_item);
  20.         }
  21.         
  22.         public string m_CallbackResult; // 用于传递要返回的Html
  23.         
  24.         // 下面实现接口要求的2个方法
  25.         
  26.         //实现接口后,ajax回发时,会先调用这个方法
  27.         public void RaiseCallbackEvent(string eventArgument)
  28.         {
  29.             // 根据提交过来的省份ID获取城市数据
  30.             string[] l_arrCity;
  31.             switch (eventArgument)
  32.             {
  33.                 case "1":
  34.                     l_arrCity = new string[] { "济南", "青岛", "烟台" };
  35.                     break;
  36.                 case "2":
  37.                     l_arrCity = new string[] { "南昌", "吉安", "九江", "赣州","宜春" };
  38.                     break;
  39.                 case "3":
  40.                     l_arrCity = new string[] { "福州", "厦门", "泉州", "三明" };
  41.                     break;
  42.                 default:
  43.                     return;
  44.             }
  45.             
  46.             // 先清空全部选项
  47.             lstCity.Items.Clear();  
  48.             
  49.             // 重新绑定 城市下拉框
  50.             foreach (string l_item in l_arrCity)
  51.                 lstCity.Items.Add(l_item);
  52.             // 获取城市下拉框生成的html,并返回它给调用的js
  53.             System.IO.TextWriter l_txtWriter = new System.IO.StringWriter();
  54.             System.Web.UI.HtmlTextWriter l_writer = new HtmlTextWriter(l_txtWriter);
  55.             lstCity.RenderControl(l_writer);
  56.             m_CallbackResult = l_txtWriter.ToString(); // 把html存入RaiseCallbackEvent,在下面的方法里返回
  57.         }
  58.         
  59.         // 执行完RaiseCallbackEvent方法,紧接着会执行这个方法,返回一个字符串,也就是js会收到的东东
  60.         public string GetCallbackResult()
  61.         {
  62.             return m_CallbackResult;
  63.         }
  64.     </script>
  65.     <script type="text/javascript" src="prototype.js"></script>
  66.     <script type="text/javascript">
  67.         function CallServer(arg){
  68.             <%=ClientScript.GetCallbackEventReference(this, "arg", "JsRecieve", null) %>
  69.         }
  70.         
  71.         function JsRecieve(ret){
  72.             document.getElementById("spnCity").innerHTML = ret;
  73.         }
  74.     </script>
  75. </head>
  76. <body onload="CallServer(document.getElementById('lstProvince').value)">
  77.     <form id="Form1" runat="server">
  78.         省份:<asp:DropDownList ID="lstProvince" runat="server"></asp:DropDownList>
  79.                 <!-- 下面这个spnCity要加上,用于回发时赋innerHTML用 -->
  80.         城市:<span id="spnCity"><asp:DropDownList ID="lstCity" runat="server"></asp:DropDownList></span>
  81.     </form>
  82. </body>
  83. </html>

抱歉!评论已关闭.