您的位置：首页 > Web前端 > HTML

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

2008-08-05 15:15 405 查看

今天再写一个基于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>

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

标签： server asp.net asp html c# ajax

相关文章推荐

新的分享

章节导航