【原创】用UpdatePanel实现无刷新级联下拉框
使用asp.net ajax扩展实现无刷新下拉列表可实现你要的效果，此种方法不用写js
1.在项目中引用asp.net ajax扩展dll，附件中有（关于此扩展，参见http://www.cnblogs.com/Terrylee/archive/2006/11/12/ASPNET_AJAX_QuickStarts.html）
此处主要使用asp:UpdatePanel 实现
2.使用测试用表结构如下
表province 字段 id provincename
表city 字段 id provincename cityname
3.代码如下
<%@ 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">
<%@ Import Namespace = "System.Data" %>
<%@ Import Namespace = "MySql.Data.MySqlClient" %>
<script language="C#" runat="server">
//页面载入
protected void Page_Load(object sender, EventArgs e)
{
If(!IsPostBack)
{
getProvince();
}
}
//得到省
private void getProvince()
{
MySqlConnection myConnection = new MySqlConnection("server=localhost;userid=root;password=root;database=test");
string sql = "select t.provincename from province t";
MySqlDataAdapter myda = new MySqlDataAdapter(sql, myConnection);
DataSet mydataset = new DataSet();
myda.Fill(mydataset, "admin");
DropDownList1.DataSource = mydataset.Tables[0].DefaultView;
DropDownList1.DataTextField = "provincename";
DropDownList1.DataValueField = "provincename";
DropDownList1.DataBind();
getCity(DropDownList1.SelectedValue);
}
//根据省得到市
private void getCity(String s)
{
MySqlConnection myConnection = new MySqlConnection("server=localhost;userid=root;password=root;database=test");
string sql = "select t.cityname from city t where t.provincename = '" + s + "'";
MySqlDataAdapter myda = new MySqlDataAdapter(sql, myConnection);
DataSet mydataset = new DataSet();
myda.Fill(mydataset, "admin");
DropDownList2.DataSource = mydataset.Tables[0].DefaultView;
DropDownList2.DataTextField = "cityname";
DropDownList2.DataValueField = "cityname";
DropDownList2.DataBind();
}
//改变省时
private void changeProvince(object sender, EventArgs e)
{
getCity(DropDownList1.SelectedValue);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Simple MySQL Database Query＜/title></head>
<body>
<form runat="server">
<asp:DataGrid id="mydatagrid" runat="server" />
<!--此处AutoPostBack设为true时，才会对DropDownList2进行刷新-->
<asp:DropDownList id="DropDownList1" runat="server" OnSelectedIndexChanged="changeProvince" AutoPostBack="true"> </asp:DropDownList>
<!--使用UpdatePanel之前必须放置ScriptManager，必须引用asp.net ajax包-->
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<!--必须将DropDownList放入UpdatePanel内才可对其刷新-->
<asp:UpdatePanel id="cityPanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:DropDownList id="DropDownList2" runat="server" AutoPostBack="true"></asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
