1
<%
@ Page language
=
"
c#
"
Codebehind
=
"
DropTest.aspx.cs
"
AutoEventWireup
=
"
false
"
Inherits
=
"
studyWEB.DropTest
"
%>
2
<!
DOCTYPE HTML PUBLIC
"
-//W3C//DTD HTML 4.0 Transitional//EN
"
>
3
<
HTML
>
4
<
HEAD
>
5
<
title
>
WebForm2
</
title
>
6
<
meta content
=
"
Microsoft Visual Studio .NET 7.1
"
name
=
"
GENERATOR
"
>
7
<
meta content
=
"
C#
"
name
=
"
CODE_LANGUAGE
"
>
8
<
meta content
=
"
JavaScript
"
name
=
"
vs_defaultClientScript
"
>
9
<
meta content
=
"
http://schemas.microsoft.com/intellisense/ie5
"
name
=
"
vs_targetSchema
"
>
10
<
script
>
11
function load(ClassID){
//
ClassID为接收传递的大类编号
12
var drp2
=
document.getElementById(
"
DropDownList2
"
);
13
function RemoveAll(oElem) {
//
清除DropDownList2的所有项
14
var i
=
0
;
15
for
(i
=
oElem.length; i
>=
0
; i
--
){
16
oElem.options.remove(i);
17
}
18
}
19
RemoveAll(drp2)
20
var oHttpReq
=
new
ActiveXObject(
"
MSXML2.XMLHTTP
"
);
21
var oDoc
=
new
ActiveXObject(
"
MSXML2.DOMDocument
"
);
22
oHttpReq.open(
"
POST
"
,
"
DropChild.aspx?ClassID=
"
+
ClassID,
false
);
//
调用读取小类数据的页面,将大类
23
//
编号值传递过去
24
oHttpReq.send(
""
);
25
result
=
oHttpReq.responseText;
26
oDoc.loadXML(result);
27
items1
=
oDoc.selectNodes(
"
//CLASSNAME/Table/ClassName
"
);
//
读取所有请求大类所属小类的类名
28
items2
=
oDoc.selectNodes(
"
//CLASSNAME/Table/ClassID
"
);
//
读取所有请求大类所属小类的编号
29
var itemsLength
=
items1.length;
30
for
(i
=
0
;i
<
itemsLength;i
++
)
//
将小类的类名和编号赋予DropDownList2
31
{
32
var newOption
=
document.createElement(
"
OPTION
"
);
33
newOption.text
=
items1[i].text;
34
newOption.value
=
items2[i].text;
35
drp2.options.add(newOption);
36
}
37
}
38
</
script
>
39
</
HEAD
>
40
<
body MS_POSITIONING
=
"
flowLayout
"
>
41
<
form id
=
"
Form1
"
method
=
"
post
"
runat
=
"
server
"
>
42
<
asp:DropDownList id
=
"
DropDownList1
"
runat
=
"
server
"
></
asp:DropDownList
>
43
<
asp:DropDownList id
=
"
DropDownList2
"
runat
=
"
server
"
></
asp:DropDownList
>
44
<
asp:TextBox id
=
"
TH
"
runat
=
"
server
"
BorderStyle
=
"
None
"
ForeColor
=
"
White
"
BorderColor
=
"
White
"
></
asp:TextBox
>
45
<
asp:Label id
=
"
Label1
"
runat
=
"
server
"
></
asp:Label
>
46
<
asp:Button id
=
"
Button1
"
runat
=
"
server
"
Text
=
"
Button
"
></
asp:Button
>
47
</
form
>
48
</
body
>
49
</
HTML
>
在做一个文章添加功能时,想在选择大类后,自动将其所属二级小类显示出来,使用DropDownList的SelectedIndexChanged事件可以很容易实现,但每次选择后页面总要刷新一次,让人感觉很不爽。为实现DropDownList无刷新二级联动,这几天在网上找了些资料,但都无法达到我想要的效果,经过反复调试,现已基本实现了此功能,现将代码附下。
一、数据库设计:
字段名 |
数据类型 |
说明 |
ClassID |
自动编号 |
类编号 |
ClassName |
varchar(8) |
类名 |
UpClassID |
int(4) |
上级类编号 |
ClassLevel |
int(4) |
类级别,1为大类,2为小类 |
二、设计步骤:
1、首先,我们新建一个页面DropTest.aspx,在其中放入两个DropDownList控件:DropDownList1和DropDownList2,其完整代码如下:
该页面的后台文件(DropDownList1.aspx.cs)中Page_Load内的代码如下:
1
if
(
!
this
.IsPostBack)
2
{
3
SqlConnection con
=
new
SqlConnection(
"
server=localhost;database=gswebDB;uid=sa;pwd=;
"
);
4
SqlDataAdapter da
=
new
SqlDataAdapter(
"
select ClassName,ClassID from classname where ClassLevel=1
"
,con);
5
DataSet ds
=
new
DataSet();
6
da.Fill(ds);
7
this
.DropDownList1.DataSource
=
ds.Tables[
0
].DefaultView;
8
this
.DropDownList1.DataTextField
=
"
ClassName
"
;
9
this
.DropDownList1.DataValueField
=
"
ClassID
"
;
10
this
.DropDownList1.DataBind();
11
this
.DropDownList1.Attributes.Add(
"
onchange
"
,
"
load(this.options[this.selectedIndex].value)
"
);
//
将ClassID作为参数传递给脚本函数load(ClassID),如果要传递的是ClassName,应将value改为innerText,但如果大类为中文,则调用小类时出现无法显示的问题
12
//
this.DropDownList2.Attributes.Add("onChange","javascript:document.Form1.TH.value=this.options[this.selectedIndex].value;");
//
读取DropDownList2的值,将其赋给一个TextBox控件TH,以获取DropDownList2的值,为获取DropDownList2的值,网上有人说可通过使用隐藏的TextBox控件来获取,我未能实现,因为在客户端隐藏的TextBox控件也是不可用脚本来访问的,没法给其赋值,我只能通过将其样式、字体颜色设于背景相同来达到隐藏效果,这是一个很笨的方法,有谁有好的方法,请帮我。
13
}
此页面实现如下功能:首先从数据库内读取所有类级别为1(即大类)的类名和类编号,绑定到DropDownList1控件上;然后通过DropDownList1的Attributes属性调用javascript函数load(ClassID);load()函数通过调用DropChild.aspx页面,读取XML流,得到大类所属小类的ClassName和ClassID。
2、新建DropChild.aspx页面文件,其中不插入任何控件和文本,只在其后台文件(DropChild.aspx.cs)中的Page_Load中加入以下代码:
1
if
(
this
.Request[
"
ClassID
"
]
!=
null
)
2
{
3
int
state
=
Convert.ToInt32(
this
.Request[
"
ClassID
"
]);
4
SqlConnection con
=
new
SqlConnection(
"
server=localhost;database=gswebDB;uid=sa;pwd=;
"
);
5
SqlDataAdapter da
=
new
SqlDataAdapter(
"
select ClassName,ClassID from classname where UpClassID='
"
+
state
+
"
'
"
,con);
6
DataSet ds
=
new
DataSet(
"
CLASSNAME
"
);
7
da.Fill(ds);
8
XmlTextWriter writer
=
new
XmlTextWriter(Response.OutputStream, Response.ContentEncoding);
9
writer.Formatting
=
Formatting.Indented;
10
writer.Indentation
=
4
;
11
writer.IndentChar
=
'
'
;
12
ds.WriteXml(writer);
13
writer.Flush();
14
Response.End();
15
writer.Close();
该方法得到用户选择的大类的编号,通过查询以后得到一个DataSet对象,使用该对象的WriteXML方法直接将内容写到Response.OutputStream里面然后传递到客户端,客户端的load方法通过result =oHttpReq.responseText;句话得到一个XML字符串,最后解析此串。
另外,测试获取DropDownList2值,添加了TextBox控件TH,当点击Button时,处理事件代码如下:
1
private
void
Button1_Click(
object
sender, System.EventArgs e)
2
{
3
Label1.Text
=
TH.Text;
4
}
5