（转）无刷新SELECT联动

最新推荐文章于 2014-07-19 10:57:27 发布
最新推荐文章于 2014-07-19 10:57:27 发布
阅读量60 收藏
点赞数
文章标签： ui xhtml c#
原文链接：http://www.cnblogs.com/Nirvanalst/archive/2009/01/19/1378190.html
版权

无刷新SELECT联动

文：邓铭武

源地址：http://vision.anyp.com/uveditor/10184-229323.aspx

 

我们在做开发的过程中，多少都会遇到Select联动的问题。一般来讲，运用ASP.NET自带的DropDownList控件来做，是最方便的。如下：

 

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!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 runat="server">

    <title>SELECT联动</title>

</head>

<body>

    <form id="form1" runat="server">

        <asp:DropDownList ID="ddlProvinces" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlProvinces_SelectedIndexChanged">

            <asp:ListItem Value="">请选择</asp:ListItem>

            <asp:ListItem Value="0">广东省</asp:ListItem>

            <asp:ListItem Value="1">广西省</asp:ListItem>

            <asp:ListItem Value="2">山东省</asp:ListItem>

            <asp:ListItem Value="3">山西省</asp:ListItem>

        </asp:DropDownList>

        <asp:DropDownList ID="ddlCities" runat="server">

            <asp:ListItem>请选择</asp:ListItem>

        </asp:DropDownList>

    </form>

</body>

</html>

 

 

Default.aspx.cs

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

 

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

 

    }

 

    private string[][] propCities = {

        new string[]{"广州市", "茂名市"},

        new string[]{"桂林市", "北海市"},

        new string[]{"济南市", "胶南市"},

        new string[]{"原平市", "高平市"}

    };

 

    protected void ddlProvinces_SelectedIndexChanged(object sender, EventArgs e)

    {

        ddlCities.Items.Clear();

        ddlCities.Items.Add(new ListItem("请选择", ""));

 

        if (!String.IsNullOrEmpty(ddlProvinces.SelectedValue))

        {

            int index = int.Parse(ddlProvinces.SelectedValue);

            string[] cities = propCities[index];

 

            foreach (string text in cities)

            {

                ddlCities.Items.Add(new ListItem(text, text));

            }

        }

    }

}

 

运用Asp.net的控件，我们只需要很少的代码就能完成这个任务。在每次点击的省份的时候，城市列表会跟着刷新，达到了数据联动的效果。

但问题结束了吗?还没有...

使用上面的代码，每次切换省份时候，整个页面都刷新一谝。这对于这个测试来讲不算得什么，但对大多数B/S应用来说，是很浪费资源的，用户体验也非常差。

那怎么办?

在当前大红大紫的Ajax技术冲击下，想必大家都会想到“局部刷新”的它来了。在asp.net下常用的Ajax解决方案有：

AjaxPro.net

Asp.net ajax 1.0

其中AjaxPro.net支持1.1版本与2.0;而Asp.net ajax 1.0则只是在Asp.net 2.0或以上版本才能使用。

那么我们也尝试使用Ajax技术来实现联动效果,但这里不打算使用框架的技术来实现，为以后应用的便利，把它封装成一个自定义控件，下面是控件的代码：

LoadSort.aspx

<%@ Page Language="C#" Inherits="Laodeng.Common.DataDictionary.UI.LoadSortPage" %>

 

LoadSort.aspx.cs

using System;

using System.Text;

 

namespace Laodeng.Common.DataDictionary.UI

{

    public class LoadSortPaged : System.Web.UI.Page

    {

        private string[] propProvinces = { "广东省", "广西省", "山东省", "山西省" };

 

        private string[][] propCities = {

            new string[]{"广州市", "茂名市"},

            new string[]{"桂林市", "北海市"},

            new string[]{"济南市", "胶南市"},

            new string[]{"原平市", "高平市"}

        };

 

        protected void Page_Load(object sender, EventArgs e)

        {

            String id = Request.QueryString["sid"];

 

            String scripts = GetSortScript(id);

 

            Response.Clear();

            Response.Write(scripts);

        }

 

        public String GetSortScript(string pid)

        {

            StringBuilder builder = new StringBuilder(1024);

            string[] cities = null;

            if (pid == "")

            {

                cities = propProvinces;

            }

            else

            {

                cities = propCities[int.Parse(pid)];

            }

 

            builder.AppendLine("var data = new Array();");

            if (cities != null)

            {

                foreach (string city in cities)

                {

                    builder.AppendLine(string.Format("data.push({{'name':'{0}','id':'{1}', 'isDefault':'{2}'}});", city, city, 0));

                }

            }

 

            return builder.ToString();

        }

    }

}

 

这个页面负责为我们的控件提供数据，当Request.QueryString[“id”]为空时，返回省份列表，否则返回对应的城市列表。留意到，LoadSort.aspx只有标记和LoadSort.aspx.cs的Response.Clear();作用都是，不让页面输出额外的垃圾代码。

 

SortDropDownList.cs

using System;

using System.Web.UI.HtmlControls;

using System.Collections.Generic;

using System.ComponentModel;

using System.Text;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

namespace Laodeng.Common.DataDictionary.UI

{

    [ToolboxData("<{0}:SortDropDownList runat=server></{0}:SortDropDownList>")]

    public class SortDropDownList : WebControl

    {

        #region 属性列表

        private string _LoadPage = "/LoadSort.aspx";

        [Bindable(true)]

        [Category("Appearance")]

        [DefaultValue("/LoadSort.aspx")]

        [Localizable(true)]

        public string LoadPage

        {

            get

            {

                return _LoadPage;

            }

 

            set

            {

                _LoadPage = value;

            }

        }

 

        private Boolean _IsAutoLoad = true;

        [Bindable(true)]

        [Category("Appearance")]

        [DefaultValue("")]

        [Localizable(true)]

        public Boolean IsAutoLoad

        {

            get

            {

                return _IsAutoLoad;

            }

 

            set

            {

                _IsAutoLoad = value;

            }

        }

 

        private Boolean _IsAutoSelect = true;

        [Bindable(true)]

        [Category("Appearance")]

        [DefaultValue("")]

        [Localizable(true)]

        public Boolean IsAutoSelect

        {

            get

            {

                return _IsAutoSelect;

            }

 

            set

            {

                _IsAutoSelect = value;

            }

        }

 

        private Int32 _Timespace = 100;

        [Bindable(true)]

        [Category("Appearance")]

        [DefaultValue("")]

        [Localizable(true)]

        public Int32 Timespace

        {

            get

            {

                return _Timespace;

            }

 

            set

            {

                _Timespace = value;

            }

        }

 

        private String _DefaultText = "== 请选择==";

        [Bindable(true)]

        [Category("Appearance")]

        [DefaultValue("")]

        [Localizable(true)]

        public String DefaultText

        {

            get

            {

                return _DefaultText;

            }

 

            set

            {

                _DefaultText = value;

            }

        }

 

        private String _DefaultValue = "[none]";

        [Bindable(true)]

        [Category("Appearance")]

        [DefaultValue("")]

        [Localizable(true)]

        public String DefaultValue

        {

            get

            {

                return _DefaultValue;

            }

 

            set

            {

                _DefaultValue = value;

            }

        }

 

        private string _SelectedPath;

        [Bindable(true)]

        [Category("Appearance")]

        [DefaultValue("")]

        [Localizable(true)]

        public String SelectedPath

        {

            get

            {

                if (String.IsNullOrEmpty(Page.Request.Form[ID]))

                {

                    return _SelectedPath;

                }

                else

                {

                    return Page.Request.Form[ID];

                }

            }

 

            set

            {

                _SelectedPath = value;

            }

        }

 

        private String _SelectedLastValue;

        [Bindable(false)]

        [Category("Appearance")]

        [DefaultValue("")]

        [Localizable(true)]

        public String SelectedLastValue

        {

            get

            {

                if (_SelectedLastValue == null)

                {

                    if (String.IsNullOrEmpty(SelectedPath))

                    {

                        _SelectedLastValue = string.Empty;

                    }

                    else

                    {

                        _SelectedLastValue = SelectedPath.Split(',')[0];

                    }

                }

                return _SelectedLastValue;

            }

        }

 

        #endregion

 

        protected override void OnInit(EventArgs e)

        {

            base.OnInit(e);

 

            Page.ClientScript.RegisterClientScriptResource(GetType(), "Laodeng.Common.DataDictionary.UI.sortdropdownlist.js");

        }

 

        protected override void RenderContents(HtmlTextWriter output)

        {

            output.AddAttribute("id", ID);

            output.RenderBeginTag(HtmlTextWriterTag.Div);

            output.RenderEndTag();

 

            output.WriteLine("<script language=""javascript"" type=""text/javascript"">");

            output.WriteLine(BuildScript());

            output.WriteLine(String.Format("item_onchange(null, '', '{0}', '{1}');", ID, SelectedPath));

            output.WriteLine("</script>");

        }

 

        #region 创建公共脚本

        /// <summary>

        /// 创建公共脚本

        /// </summary>

        /// <returns></returns>

        public String BuildScript()

        {

            StringBuilder builder = new StringBuilder();

            builder.AppendLine(String.Format("isAutoLoad = {0};", IsAutoLoad.ToString().ToLower()));

            builder.AppendLine(String.Format("isAutoSelect = {0};", IsAutoSelect.ToString().ToLower()));

            builder.AppendLine(String.Format("space = {0};", this.Timespace));

            builder.AppendLine(String.Format("defaultText = ""{0}"";", DefaultText));

            builder.AppendLine(String.Format("defaultValue = ""{0}"";", DefaultValue));

            builder.AppendLine(String.Format("loadPage = ""{0}"";", LoadPage));

            return builder.ToString();

        }

        #endregion

    }

}

 

 

SortDropDownList.js

//是否自动加载子数据

var isAutoLoad = true;

//是否自动选择记录项

var isAutoSelect = true;

//数据缓存

var cacheData = new Array();

//自动加载子数据的间隔

var space = 100;

//默认项的文本

var defaultText = "== 请选择 ==";

//默认项的值

var defaultValue = "[none]";

//加载数据的页面地址

var loadPage = "LoadSort.aspx";

 

function createItem(divId){

    var newItem = document.createElement("SELECT");

    newItem.name = divId;

    return newItem;

}

function removeChild(divBody, currentItem){

    var watingBox = document.getElementById("watingBox");

    if( watingBox != null ){

        divBody.removeChild(watingBox);

    }

    if( divBody.childNodes.length > 0 ){

        for( var i = divBody.childNodes.length - 1; i > 0; i-- ){

            if( divBody.childNodes[i] != currentItem ){

                divBody.removeChild(divBody.childNodes[i]);

            } else {

                break;

            }

        }

    }

}

 

function addDefaultOption(currentItem){

    if( defaultText == "" ) return;

   

    var newOption = new Option();

    newOption.value = defaultText;

    newOption.text = defaultText;

    currentItem.options.add(newOption);

}

 

function appendSort(currentItem, data, divId, dValue){

    var divBody = currentItem == null ? document.getElementById(divId) : currentItem.parentNode;

    var newItem = createItem(divId);

  

    removeChild(divBody, currentItem);

   

    if( data.length == 0 ) return;

   

    var newOption = null;

   

    addDefaultOption(newItem);

   

    var selectedValue = null;

    for( var i = 0; i < data.length; i++ ){

        newOption = new Option();

        newOption.value = data[i].id;

        newOption.text = data[i].name;

        newItem.options.add(newOption);

       

        if( data[i].isDefault == "True" && isAutoSelect ){               

            selectedValue = newOption.value;

        }

    }

 

    if( dValue != null && dValue != "" ){

        var index = dValue.indexOf(",");

        if( index > -1 ){

            selectedValue = dValue.substring(0, index);

            dValue = dValue.substring(index + 1, dValue.length);

        } else {

            selectedValue = dValue;

            dValue = "";

        }

    }

   

    divBody.appendChild( newItem );

   

    if( selectedValue != null ){

        newItem.value = selectedValue;

       

        if( isAutoLoad ){

            setTimeout(function(){

                item_onchange(newItem, selectedValue, divId, dValue);

            }, space);

        }

    }

   

    newItem.onchange = function(){

        item_onchange(this, this.value, divId, null);

    };

}

 

function showWatingBox(div){

    var divBody = div;

    var watingBox = document.getElementById("watingBox");

    if( watingBox == null ){

        watingBox = document.createElement("SPAN");

        watingBox.id = "watingBox";

        watingBox.innerHTML = "加载中...";

        divBody.appendChild(watingBox);

    }

}

 

function item_onchange(element, superId, divId, dValue){

    if( superId != defaultValue ){

        if( cacheData[superId] == null ){

            var url = loadPage + "?sid="+ superId +"&r=" + Math.random();

            sendRequest(url, null, "GET", function(){

                var ready = req.readyState;

                var dataScript = null;

                if( ready == 4 ){

                    dataScript = req.responseText;

                   

                    eval( dataScript );

                   

                    cacheData[superId] = data;

        

                    appendSort(element, data, divId, dValue);

                } else {

                    showWatingBox( element == null ? document.getElementById(divId) : element.parentNode );

                }

            });

        } else {

            appendSort(element, cacheData[superId], divId, dValue);

        }

    } else {

        removeChild(element.parentNode, element);

    }

    if( element != null ){

        window.focus();

    }

}

 

function getXMLHttpRequest(){

    var request = null;

    if( window.XMLHttpRequest){

        request = new XMLHttpRequest();

    } else if( typeof(ActiveXObject) != "undefined" ){

        request = new ActiveXObject("Microsoft.XMLHTTP");

    }

    return request;

}

 

var req;

function sendRequest(url, params, httpMethod, method){

    if( !httpMethod ){

        httpMethod = "GET";

    }

   

    req = getXMLHttpRequest();

    if( req ){

        req.onreadystatechange = method;

        req.open(httpMethod, url, true);

        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        req.send(params);

    }

}

SortDropDownList.cs是一个从WebControl继承的控件，它提供了SortDropDownList.js脚本的服务器端封装。SortDropDownList里面的代码为页面注册了脚本：

Page.ClientScript.RegisterClientScriptResource(GetType(), "Laodeng.Common.DataDictionary.UI.sortdropdownlist.js");

需要注意的是SortDropDownList.js文件的属性要如下设置

将脚本封装成控件，我们可以方便快捷的完成部署任务。运用Ajax技术、客户端数据缓存和加载提示效果，提供了良好的用户体验。

或许你看到这个例子只是省份/城市两级联动，如果要三级或发疯的无限级怎么办?

不用担心，只要你修改LoadSort.aspx让它能加载不同级别的数据，这个例子就能应付得绰绰有余。当拿到类似任务的时候，就准备好茶水，一边喝一边偷笑吧。

转载于:https://www.cnblogs.com/Nirvanalst/archive/2009/01/19/1378190.html

weixin_30326515
关注
asp简单的select级联菜单带数据库
12-28
asp简单的select级联菜单带数据库
两级联动select刷新后其值保持不变的实现方法
10-26
### 两级联动select刷新后其值保持不变的实现方法 实现上述功能，主要方法有： 1. **通过URL传递参数：** 在页面提交或刷新前，可以将当前的select选择通过URL参数的形式附加在请求中，当页面加载时，从URL中读取...
无刷新SELECT联动
08-01 901
http://vision.anyp.com/uveditor/10184-229323.aspx无刷新SELECT联动文章主题标签:SELECT联动DropDownList控件文：邓铭武我们在做开发的过程中，多少都会遇到Select联动的问题。一般来讲，运用ASP.NET自带的DropDownList控件来做，是最方便的。如下：Default.aspx@
JS实现无刷新联动菜单（select）的方法
weixin_30815469的博客
11-07 131
所谓联动菜单，就是后一个下拉框的选项是根据前一个下拉框被选中的值来决定的，一个典型的应用就是省市联动菜单了，市的下拉选项是根据你选了哪个省来决定的，类似的需求我们经常遇到，相信许多新手都被这个问题困扰过。 　　其实，联动菜单的实现原理非常简单，本文详细介绍了联动菜单的实现方式，知道了原理，我们可以很容易地制作从XML、数据库加载的无限级联动菜单。 　　联动菜单的实现方法： 　　1.确定数据...
ASP.NET中实现无刷新级联
weixin_33984032的博客
06-11 79
最近在帮学校做一个设备报修系统，由于水平有限，以前做项目的时候很少用到ajax方面的知识，为了实现更好的效果，我查阅了相关资料，参考网上教程写了我下面的程序，不足之处，请多多指正。 开发环境配置为：Visual Studio 2008 Sql  Server 2008 源码下载地址：无刷新级联 1、建立测试数据库 用到两个表，一个所在部门表 Department，一个使用部门表...
用asp＋javascript实现动态数据联动，不刷新
xxrl(孔曰成仁,孟曰取义)的专栏
09-03 3238
/////////////by xxrl(孔曰成仁，孟曰取E)/////////////Chinese:蒋健华/////////////email:jjh_115@eyou.com联动，联动，联动。。。。困扰了好多网友的神经，在CSDN－ASP板块中，总是看到网友们大呼救命，救什么？联动！为什么联动这样受到关注，其实用性无可非议，用户也能认可，可是如果数据是大量并相互关联的，那问题就来
MagicAjax无刷新二级联动Select示例
03-16
摘要:.NET源码,Ajax相关,MagicAjax,无刷新,二级联动　MagicAjax无刷新二级联动简单示例源码，作者:deallylau。应用程序只需要引入需要的组件，然后就可以进行编码。 　MagicAjax的源码已经同实例源码一同打包，解压...
Ajax+Servlet实现无刷新下拉联动效果
10-18
【Ajax+Servlet实现无刷新下拉联动效果】是一种常见的网页交互技术，主要用于提高用户体验，减少不必要的页面刷新。在本文中，我们将深入探讨如何利用Ajax和Servlet来实现这种功能。 首先，下拉联动的基本原理是在...
Jquery实现无刷新DropDownList联动实现代码
10-29
这篇文章主要讲述如何使用Jquery实现两个下拉列表（DropDownList）之间的无刷新联动效果。这种技术常用于Web应用开发中，比如在一个下拉列表中选择一个选项时，另一个下拉列表将根据所选项动态地显示相应的内容。 ...
实现无刷新联动例子汇总
09-03
【无刷新联动】技术在现代Web开发中广泛应用于提高用户体验，尤其是在数据交互频繁的场景下。无刷新联动意味着用户在操作一个元素时，无需等待整个页面重新加载，而是仅更新与该操作相关的部分区域，从而加快了交互...
使用Select控件实现联动效果的ASP实例 安徽机电职业技术学院陈伟
05-24
使用Select控件实现联动效果的ASP实例 省市二级联动 安徽机电职业技术学院 陈伟
实现无刷新DropDownList联动效果
无界编程
12-10 9174
在做一个文章添加功能时，想在选择大类后，自动将其所属二级小类显示出来，使用DropDownList的SelectedIndexChanged事件可以很容易实现，但每次选择后页面总要刷新一次，让人感觉很不爽。为实现DropDownList无刷新二级联动，这几天在网上找了些资料，但都无法达到我想要的效果，经过反复调试，现已基本实现了此功能，现将代码附下。一、数据库设计：字段名数据类
javascript 无刷新select联动菜单
sinat_14932597的专栏
07-19 684
本文详细介绍了联动菜单的实现方式，知道了原理，我们可以很容易地制作从XML、数据库加载的无限级联动菜单 联动菜单的实现方法： 1.确定数据格式： 首先，我们介绍一下创建 Option 的语法： var newOption = new Option(optionText, optionvalue); 根据上面的语法，我们知道 select 选项分 optionText 和 optionva
Javascript 实现无刷新联动菜单（select）的方法
bibishou的专栏
03-29 793
所谓联动菜单，就是后一个下拉框的选项是根据前一个下拉框被选中的值来决定的，一个典型的应用就是省市联动菜单了，市的下拉选项是根据你选了哪个省来决定的，类似的需求我们经常遇到，相信许多新手都被这个问题困扰过。其实，联动菜单的实现原理非常简单，本文详细介绍了联动菜单的实现方式，知道了原理，我们可以很容易地制作从XML、数据库加载的无限级联动菜单。-----------------------------
.NET中实现无刷新客户端联动下拉菜单 (无刷新)
enjsky的专栏
05-21 2788
   WebForm1        http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">             runat="server">Label       runat="server">//将隐藏的字符串取出来，然后分割到一个数组中去var str = document.getElementByI
ASP.NET实现无刷新DropDownList联动
jxufewbt的专栏
12-07 4622
Example function load(state){ var drp2 = document.getElementById("DropDownList2"); for (i = drp2.length; i >= 0; i--){ drp2.options.remove(i); } var oHttpReq = new ActiveXObject("MSXML2.XMLHTT
asp.net实现页面无刷新效果
weixin_30783913的博客
12-10 145
下拉框二级联动，页面无刷新 A. (aspx) <asp:DropDownList ID="DropDownList1" runat="server" Height="16px" onchange="getChildren(this.options[this.selectedIndex].value, 'ddl');" Width="139px">...
ASP+JS三级联动下拉菜单[调用数据库数据]
weixin_33845477的博客
10-16 169
'肯定先要连接数据库了，不用说了'数据库结构'类别1表名称：a  字段：ID,Name  说明：ID为主键是类别1的ID值，Name为类别1的名称'类别2表名称：aa  字段：ID,aID,Name  说明：ID为主键是类别2的ID值，aID为所属类别1的ID值，Name为类别2的名称'类别3表名称：aaa  字段：ID,aID,aaID,Name  说明：ID为主键是类别3的ID值，aID为所属...
jQuery Ajax实现下拉框无刷新联动教程
本篇文章详细探讨了如何使用jQuery与Ajax技术实现下拉框的无刷新联动功能。在前端开发中，当用户在主下拉菜单（如省份）做出选择后，能够实时更新依赖于该选择的其他下拉菜单（如城市和区县），而无需重新加载整个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值