用Ajax.net实现的一个无刷新的多级联动下拉列表框
2007-12-05 13:31
771 查看
用Ajax.NET Ectention
实现的一个无刷新的多级动态下拉列表框，使用的3个UpdatePanel，每一个中放一个DropDownList，分别为prefix="o" ?>
DropDownList1、2、2，其中UpdatePanel2由UpdatePanel1触发，UpdatePanel3由UpdatePanel2和UpdatePanel1共同触发，
也可以增加到很多级，只要类似的改代码就可以了。
以下为源代码
<%@ Page
Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML
1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled
Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager
ID="ScriptManager1"
runat="server"
/>
<div style="float: left">
<asp:UpdatePanel
ID="UpdatePanel1"
runat="server">
<ContentTemplate>
<asp:DropDownList
ID="DropDownList1"
runat="server"
AutoPostBack="True"
Width="184px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
OnTextChanged="DropDownList1_SelectedIndexChanged"
>
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div style="float: left">
<asp:UpdatePanel
ID="UpdatePanel2"
runat="server"
UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList
ID="DropDownList2"
runat="server"
AutoPostBack="True"
Width="168px" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged"
>
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="DropDownList1"
EventName="SelectedIndexChanged"
/>
</Triggers>
</asp:UpdatePanel>
</div>
<asp:UpdatePanel ID="UpdatePanel3"
runat="server">
<ContentTemplate>
<asp:DropDownList
ID="DropDownList3"
runat="server"
AutoPostBack="True"
Width="160px">
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="DropDownList2"
EventName="SelectedIndexChanged"
/>
<asp:AsyncPostBackTrigger
ControlID="DropDownList1"
EventName="SelectedIndexChanged"
/>
</Triggers>
</asp:UpdatePanel>
</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;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Collections;
public partial
class _Default : System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
if (!IsPostBack)
{
DropDownList1.DataSource = CreateSource(0);
DropDownList1.DataTextField = "TypeName";
DropDownList1.DataValueField = "TypeID";
DropDownList1.DataBind();
int PreID =
Convert.ToInt32(DropDownList1.SelectedValue);
DropDownList2.DataSource = CreateSource(PreID);
DropDownList2.DataTextField = "TypeName";
DropDownList2.DataValueField = "TypeID";
DropDownList2.DataBind();
PreID = Convert.ToInt32(DropDownList2.SelectedValue);
DropDownList3.DataSource = CreateSource(PreID);
DropDownList3.DataTextField = "TypeName";
DropDownList3.DataValueField = "TypeID";
DropDownList3.DataBind();
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs
e)
{
int
PreID = Convert.ToInt32(DropDownList1.SelectedValue);
if (CreateSource(PreID) !=
null)
{
DropDownList2.DataSource = CreateSource(PreID);
DropDownList2.DataTextField = "TypeName";
DropDownList2.DataValueField = "TypeID";
DropDownList2.DataBind();
PreID = Convert.ToInt32(DropDownList2.SelectedValue);
if (CreateSource(PreID) !=
null)
{
DropDownList3.DataSource = CreateSource(PreID);
DropDownList3.DataTextField =
"TypeName";
DropDownList3.DataValueField =
"TypeID";
DropDownList3.DataBind();
}
else
{
DropDownList3.Items.Clear();
}
}
else
{
DropDownList2.Items.Clear();
DropDownList3.Items.Clear();
}
}
protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs
e)
{
int PreID = Convert.ToInt32(DropDownList2.SelectedValue);
if (CreateSource(PreID) !=
null)
{
DropDownList3.DataSource = CreateSource(PreID);
DropDownList3.DataTextField = "TypeName";
DropDownList3.DataValueField = "TypeID";
DropDownList3.DataBind();
}
else
{
DropDownList3.Items.Clear();
}
}
protected ICollection
CreateSource(int preId)
{
SqlConnection conn = new
SqlConnection();
conn.ConnectionString = ConfigurationManager.ConnectionStrings["NewsReleaseConnectionString"].ConnectionString;
string sqlStr="Select TypeId,TypeName
From ArticleType Where PreId=' "+preId.ToString()+"'";
SqlDataAdapter sda = new
SqlDataAdapter(sqlStr,conn);
DataSet ds = new
DataSet();
sda.Fill(ds);
if (ds.Tables[0].Rows.Count <= 0)
{
return null;
}
else
{
return ds.Tables[0].DefaultView;
}
}
}
数据库中的相应表的SQL
USE [NewsRelease]
GO
/****** 对象:
Table [dbo].[ArticleType]
脚本日期: 12/05/2007
12:49:06 ******/
SET
ANSI_NULLS ON
GO
SET
QUOTED_IDENTIFIER ON
GO
SET
ANSI_PADDING ON
GO
CREATE
TABLE [dbo].[ArticleType](
[TypeID]
[bigint] IDENTITY(1,1)
NOT FOR REPLICATION
NOT NULL,
[TypeName]
[varchar](20)
COLLATE Chinese_PRC_CI_AS
NOT NULL,
[PreID]
[bigint] NOT NULL,
[AddTime]
[datetime] NULL,
CONSTRAINT
[PK_ArticleType] PRIMARY
KEY CLUSTERED
(
[TypeID]
ASC
)WITH (PAD_INDEX
= OFF, IGNORE_DUP_KEY =
OFF)
ON [PRIMARY]
)
ON [PRIMARY]
GO
SET
ANSI_PADDING OFF
下载文件
实现的一个无刷新的多级动态下拉列表框，使用的3个UpdatePanel，每一个中放一个DropDownList，分别为prefix="o" ?>
DropDownList1、2、2，其中UpdatePanel2由UpdatePanel1触发，UpdatePanel3由UpdatePanel2和UpdatePanel1共同触发，
也可以增加到很多级，只要类似的改代码就可以了。
以下为源代码
<%@ Page
Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML
1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled
Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager
ID="ScriptManager1"
runat="server"
/>
<div style="float: left">
<asp:UpdatePanel
ID="UpdatePanel1"
runat="server">
<ContentTemplate>
<asp:DropDownList
ID="DropDownList1"
runat="server"
AutoPostBack="True"
Width="184px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
OnTextChanged="DropDownList1_SelectedIndexChanged"
>
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div style="float: left">
<asp:UpdatePanel
ID="UpdatePanel2"
runat="server"
UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList
ID="DropDownList2"
runat="server"
AutoPostBack="True"
Width="168px" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged"
>
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="DropDownList1"
EventName="SelectedIndexChanged"
/>
</Triggers>
</asp:UpdatePanel>
</div>
<asp:UpdatePanel ID="UpdatePanel3"
runat="server">
<ContentTemplate>
<asp:DropDownList
ID="DropDownList3"
runat="server"
AutoPostBack="True"
Width="160px">
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="DropDownList2"
EventName="SelectedIndexChanged"
/>
<asp:AsyncPostBackTrigger
ControlID="DropDownList1"
EventName="SelectedIndexChanged"
/>
</Triggers>
</asp:UpdatePanel>
</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;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Collections;
public partial
class _Default : System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
if (!IsPostBack)
{
DropDownList1.DataSource = CreateSource(0);
DropDownList1.DataTextField = "TypeName";
DropDownList1.DataValueField = "TypeID";
DropDownList1.DataBind();
int PreID =
Convert.ToInt32(DropDownList1.SelectedValue);
DropDownList2.DataSource = CreateSource(PreID);
DropDownList2.DataTextField = "TypeName";
DropDownList2.DataValueField = "TypeID";
DropDownList2.DataBind();
PreID = Convert.ToInt32(DropDownList2.SelectedValue);
DropDownList3.DataSource = CreateSource(PreID);
DropDownList3.DataTextField = "TypeName";
DropDownList3.DataValueField = "TypeID";
DropDownList3.DataBind();
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs
e)
{
int
PreID = Convert.ToInt32(DropDownList1.SelectedValue);
if (CreateSource(PreID) !=
null)
{
DropDownList2.DataSource = CreateSource(PreID);
DropDownList2.DataTextField = "TypeName";
DropDownList2.DataValueField = "TypeID";
DropDownList2.DataBind();
PreID = Convert.ToInt32(DropDownList2.SelectedValue);
if (CreateSource(PreID) !=
null)
{
DropDownList3.DataSource = CreateSource(PreID);
DropDownList3.DataTextField =
"TypeName";
DropDownList3.DataValueField =
"TypeID";
DropDownList3.DataBind();
}
else
{
DropDownList3.Items.Clear();
}
}
else
{
DropDownList2.Items.Clear();
DropDownList3.Items.Clear();
}
}
protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs
e)
{
int PreID = Convert.ToInt32(DropDownList2.SelectedValue);
if (CreateSource(PreID) !=
null)
{
DropDownList3.DataSource = CreateSource(PreID);
DropDownList3.DataTextField = "TypeName";
DropDownList3.DataValueField = "TypeID";
DropDownList3.DataBind();
}
else
{
DropDownList3.Items.Clear();
}
}
protected ICollection
CreateSource(int preId)
{
SqlConnection conn = new
SqlConnection();
conn.ConnectionString = ConfigurationManager.ConnectionStrings["NewsReleaseConnectionString"].ConnectionString;
string sqlStr="Select TypeId,TypeName
From ArticleType Where PreId=' "+preId.ToString()+"'";
SqlDataAdapter sda = new
SqlDataAdapter(sqlStr,conn);
DataSet ds = new
DataSet();
sda.Fill(ds);
if (ds.Tables[0].Rows.Count <= 0)
{
return null;
}
else
{
return ds.Tables[0].DefaultView;
}
}
}
数据库中的相应表的SQL
USE [NewsRelease]
GO
/****** 对象:
Table [dbo].[ArticleType]
脚本日期: 12/05/2007
12:49:06 ******/
SET
ANSI_NULLS ON
GO
SET
QUOTED_IDENTIFIER ON
GO
SET
ANSI_PADDING ON
GO
CREATE
TABLE [dbo].[ArticleType](
[TypeID]
[bigint] IDENTITY(1,1)
NOT FOR REPLICATION
NOT NULL,
[TypeName]
[varchar](20)
COLLATE Chinese_PRC_CI_AS
NOT NULL,
[PreID]
[bigint] NOT NULL,
[AddTime]
[datetime] NULL,
CONSTRAINT
[PK_ArticleType] PRIMARY
KEY CLUSTERED
(
[TypeID]
ASC
)WITH (PAD_INDEX
= OFF, IGNORE_DUP_KEY =
OFF)
ON [PRIMARY]
)
ON [PRIMARY]
GO
SET
ANSI_PADDING OFF
下载文件
| 输入您的搜索字词 提交搜索表单 | |||
|
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用Ajax.net实现的一个无刷新的多级联动下拉列表框
- Ajax实现无刷新三联动下拉框 VS2005 ASP.NET DropDownList
- MVC 页面实现ajax刷新联动下拉列表
- Ajax实现无刷新三联动下拉框
- ASP.NET MVC + Jquery 实现Ajax下拉框数据三级联动
- Ajax实现无刷新三联动下拉框
- JavaScript实现二级、多级(N级)联动下拉列表框更新版（续）- 四级联动的演示
- asp.net DropDownList无刷新ajax二级联动实现详细过程
- 用php和ajax写一个省市区的三级联动，实现地区的下拉选择
- 用Jquery实现多级下拉框无刷新的联动
- JavaScript实现二级、多级(N级)联动下拉列表框更新版（续）- 四级联动的演示
- Ajax实现无刷新三联动下拉框
- 用ASP.NET AJAX实现无刷新多个DropDownList的动态联动
- 用Jquery实现多级下拉框无刷新的联动
- Ajax实现无刷新三联动下拉框
- Asp.Net XmlHttp实现无刷新三联动下拉框
- Ajax实现无刷新的三联动下拉框
- Ajax实现无刷新三联动下拉框
- AJAX+ASP.NET无刷新二级联动省市下拉列表
- Ajax实现无刷新三联动下拉框