DataGrid中的级联菜单
要点:
1> 通过一个隐藏的页面根据传递的参数从数据源获取数据,并且写到网络流中。
2> 在主页面通过javascript+xmlhttp根据一级菜单提供的参数(省的代码)向隐藏页面发送请求,并且解析返回的响应,并且动态添加到二级菜单中。
3> 由于DropDownList是在DataGrid模板中,因此DropDownList的ID是不确定的,因此需要用js根据父菜单的ID来动态生成子菜单的ID并且用document.getElementByID查找。
隐藏页面代码(default2.aspx.cs):
主页面服务器端代码:
主页面客户端代码:
效果图:
![](/images/cnblogs_com/netboy/Show.PNG)
代码下载(含数据库):
Download
其他:
这个例子只是用vs2005做了一个简单的演示,没有考虑代码移植,如果需要用其中的代码片段,请做对应的调整。
1> 通过一个隐藏的页面根据传递的参数从数据源获取数据,并且写到网络流中。
2> 在主页面通过javascript+xmlhttp根据一级菜单提供的参数(省的代码)向隐藏页面发送请求,并且解析返回的响应,并且动态添加到二级菜单中。
3> 由于DropDownList是在DataGrid模板中,因此DropDownList的ID是不确定的,因此需要用js根据父菜单的ID来动态生成子菜单的ID并且用document.getElementByID查找。
隐藏页面代码(default2.aspx.cs):
1
using System;
2
using System.Data;
3
using System.Configuration;
4
using System.Collections;
5
using System.Web;
6
using System.Web.Security;
7
using System.Web.UI;
8
using System.Web.UI.WebControls;
9
using System.Web.UI.WebControls.WebParts;
10
using System.Web.UI.HtmlControls;
11
using System.Data.OleDb;
12![](/Images/OutliningIndicators/None.gif)
13![](/Images/OutliningIndicators/None.gif)
14
public partial class Default2 : System.Web.UI.Page
15
{
16
/// <summary>
17
/// Retrive data from db based on querystring.
18
/// </summary>
19
/// <param name="sender"></param>
20
/// <param name="e"></param>
21
protected void Page_Load(object sender, EventArgs e)
22
{
23
string id = Request.QueryString["id"];
24
OleDbConnection cnn=new OleDbConnection("provider=microsoft.jet.oledb.4.0; data source="+Server.MapPath(@"Data\Data.mdb"));
25
OleDbDataAdapter adapter=new OleDbDataAdapter("select * from child where provincecode="+id,cnn);
26
DataSet dst=new DataSet();
27
try
28
{
29
adapter.Fill(dst);
30
dst.WriteXml(Response.OutputStream);
31
}
32
catch(Exception ex)
33
{
34
Response.Write(ex.Message);
35
}
36
}
37
}
38![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/None.gif)
12
![](/Images/OutliningIndicators/None.gif)
13
![](/Images/OutliningIndicators/None.gif)
14
![](/Images/OutliningIndicators/None.gif)
15
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
16
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/InBlock.gif)
28
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
29
![](/Images/OutliningIndicators/InBlock.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
32
![](/Images/OutliningIndicators/InBlock.gif)
33
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
36
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
37
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
38
![](/Images/OutliningIndicators/None.gif)
主页面服务器端代码:
1
using System;
2
using System.Data;
3
using System.Configuration;
4
using System.Web;
5
using System.Web.Security;
6
using System.Web.UI;
7
using System.Web.UI.WebControls;
8
using System.Web.UI.WebControls.WebParts;
9
using System.Web.UI.HtmlControls;
10
using System.Data.OleDb;
11![](/Images/OutliningIndicators/None.gif)
12
public partial class _Default : System.Web.UI.Page
13
{
14
protected void Page_Load(object sender, EventArgs e)
15
{
16
if (!IsPostBack)
17
{
18
//Bind test data to grid view for display purpose.
19
GridView1.DataSource = getProvince();
20
GridView1.DataBind();
21
22
for (int i = 0; i < GridView1.Rows.Count; i++)
23
{
24
DropDownList list = (DropDownList)(GridView1.Rows[i].FindControl("Province"));
25
//Register client event
26
list.Attributes.Add("onchange", "RequestByGet(this)");
27
}
28
29
}
30
}
31![](/Images/OutliningIndicators/InBlock.gif)
32
/// <summary>
33
/// Retrieve provinces for upcoming dropdownlist province binding.
34
/// </summary>
35
/// <returns></returns>
36
public DataTable getProvince()
37
{
38
OleDbConnection cnn = new OleDbConnection("provider=microsoft.jet.oledb.4.0; data source=" + Server.MapPath(@"Data\Data.mdb"));
39
OleDbDataAdapter adapter = new OleDbDataAdapter("select * from parent ", cnn);
40
DataSet dst = new DataSet();
41
try
42
{
43
adapter.Fill(dst);
44
45
}
46
catch (Exception ex)
47
{
48
Response.Write(ex.Message);
49
}
50
return dst.Tables[0];
51
}
52
53
}
54![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/None.gif)
12
![](/Images/OutliningIndicators/None.gif)
13
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
30
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
33
![](/Images/OutliningIndicators/InBlock.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/InBlock.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
43
![](/Images/OutliningIndicators/InBlock.gif)
44
![](/Images/OutliningIndicators/InBlock.gif)
45
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
46
![](/Images/OutliningIndicators/InBlock.gif)
47
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
48
![](/Images/OutliningIndicators/InBlock.gif)
49
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
50
![](/Images/OutliningIndicators/InBlock.gif)
51
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
52
![](/Images/OutliningIndicators/InBlock.gif)
53
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
54
![](/Images/OutliningIndicators/None.gif)
主页面客户端代码:
1
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2![](/Images/OutliningIndicators/None.gif)
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4![](/Images/OutliningIndicators/None.gif)
5
<html xmlns="http://www.w3.org/1999/xhtml" >
6
<head runat="server">
7
<title>Untitled Page</title>
8
<script language=javascript>
9
function RequestByGet(parentSelect){
10
11
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
12
var doc=new ActiveXObject("MSXML2.DOMDocument");
13
var URL;
14
var CityNamelist;
15
var CityCodeList;
16
var body;
17
var postion;
18
var parentSelectID;
19
var childPostion;
20
var childID;
21
var child;
22
var id;
23
var status;
24
id=parentSelect.value;
25
26
URL="http://localhost/WebSite4/Default2.aspx?id="+id;
27
xmlhttp.Open("GET",URL, false);
28
xmlhttp.SetRequestHeader ("Content-Type","text/xml; charset=utf-8");
29
xmlhttp.SetRequestHeader ("SOAPAction","http://localhost/WebSite4/");
30
xmlhttp.Send(null);
31
status = xmlhttp.status;
32
33
if(status==200)
34
{
35
body=xmlhttp.responseText;
36
//Parse xml string from response text.
37
postion=body.lastIndexOf("NewDataSet");
38
body=body.substring(0,postion);
39
body=body+"NewDataSet>";
40
doc.loadXML(body);
41![](/Images/OutliningIndicators/InBlock.gif)
42
//Get cityname nodes and provincecode nodes.
43
CityNamelist=doc.selectNodes("//NewDataSet/Table/CityName");
44
CityCodeList=doc.selectNodes("//NewDataSet/Table/ProvinceCode");
45
parentSelectID=parentSelect.id;
46
childPostion=parentSelectID.lastIndexOf("_");
47
childID=parentSelectID.substring(0,childPostion);
48
childID=childID+"_City";
49
child=document.getElementById(childID);
50
child.length=1;
51![](/Images/OutliningIndicators/InBlock.gif)
52
for(var i=0;i<CityNamelist.length;i++)
53
{
54
var op=new Option(CityNamelist.item(i).text,CityCodeList.item(i).text);
55
child.options[i+1]=op;
56
}
57
}
58
xmlhttp = null;
59
}
60
</script>
61
</head>
62
<body >
63
<form id="form1" runat="server">
64
65
<div>
66
<asp:GridView ID="GridView1" runat="server" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" AutoGenerateColumns=false>
67
<Columns>
68
<asp:TemplateField HeaderText="Province">
69
<ItemTemplate>
70
<asp:DropDownList ID="Province" runat=server DataSource="<%#getProvince()%>" DataTextField="ProvinceName" DataValueField="ProvinceCode" >
71
</asp:DropDownList>
72
</ItemTemplate>
73
</asp:TemplateField>
74
75
<asp:TemplateField HeaderText="City">
76
<ItemTemplate>
77
<asp:DropDownList ID="City" runat=server >
78
<asp:ListItem>------</asp:ListItem>
79
</asp:DropDownList>
80
</ItemTemplate>
81
</asp:TemplateField>
82
<asp:BoundField HeaderText="Message" DataField="ProvinceName" DataFormatString="Just a static message inlcuding the word {0}"/>
83
</Columns>
84
</asp:GridView>
85
86
</div>
87
</form>
88
</body>
89
</html>
90![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/InBlock.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/InBlock.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/InBlock.gif)
33
![](/Images/OutliningIndicators/InBlock.gif)
34
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
35
![](/Images/OutliningIndicators/InBlock.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/InBlock.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/InBlock.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/InBlock.gif)
43
![](/Images/OutliningIndicators/InBlock.gif)
44
![](/Images/OutliningIndicators/InBlock.gif)
45
![](/Images/OutliningIndicators/InBlock.gif)
46
![](/Images/OutliningIndicators/InBlock.gif)
47
![](/Images/OutliningIndicators/InBlock.gif)
48
![](/Images/OutliningIndicators/InBlock.gif)
49
![](/Images/OutliningIndicators/InBlock.gif)
50
![](/Images/OutliningIndicators/InBlock.gif)
51
![](/Images/OutliningIndicators/InBlock.gif)
52
![](/Images/OutliningIndicators/InBlock.gif)
53
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
54
![](/Images/OutliningIndicators/InBlock.gif)
55
![](/Images/OutliningIndicators/InBlock.gif)
56
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
57
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
58
![](/Images/OutliningIndicators/InBlock.gif)
59
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
60
![](/Images/OutliningIndicators/None.gif)
61
![](/Images/OutliningIndicators/None.gif)
62
![](/Images/OutliningIndicators/None.gif)
63
![](/Images/OutliningIndicators/None.gif)
64
![](/Images/OutliningIndicators/None.gif)
65
![](/Images/OutliningIndicators/None.gif)
66
![](/Images/OutliningIndicators/None.gif)
67
![](/Images/OutliningIndicators/None.gif)
68
![](/Images/OutliningIndicators/None.gif)
69
![](/Images/OutliningIndicators/None.gif)
70
![](/Images/OutliningIndicators/None.gif)
71
![](/Images/OutliningIndicators/None.gif)
72
![](/Images/OutliningIndicators/None.gif)
73
![](/Images/OutliningIndicators/None.gif)
74
![](/Images/OutliningIndicators/None.gif)
75
![](/Images/OutliningIndicators/None.gif)
76
![](/Images/OutliningIndicators/None.gif)
77
![](/Images/OutliningIndicators/None.gif)
78
![](/Images/OutliningIndicators/None.gif)
79
![](/Images/OutliningIndicators/None.gif)
80
![](/Images/OutliningIndicators/None.gif)
81
![](/Images/OutliningIndicators/None.gif)
82
![](/Images/OutliningIndicators/None.gif)
83
![](/Images/OutliningIndicators/None.gif)
84
![](/Images/OutliningIndicators/None.gif)
85
![](/Images/OutliningIndicators/None.gif)
86
![](/Images/OutliningIndicators/None.gif)
87
![](/Images/OutliningIndicators/None.gif)
88
![](/Images/OutliningIndicators/None.gif)
89
![](/Images/OutliningIndicators/None.gif)
90
![](/Images/OutliningIndicators/None.gif)
效果图:
代码下载(含数据库):
Download
其他:
这个例子只是用vs2005做了一个简单的演示,没有考虑代码移植,如果需要用其中的代码片段,请做对应的调整。