无刷新SELECT联动

文：邓铭武

我们在做开发的过程中，多少都会遇到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">

<title>SELECT联动</title>

</head>

<body>

<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只有<%@Page%>标记和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