DataGrid中的级联菜单
要点：
1> 通过一个隐藏的页面根据传递的参数从数据源获取数据，并且写到网络流中。
2> 在主页面通过javascript+xmlhttp根据一级菜单提供的参数（省的代码）向隐藏页面发送请求，并且解析返回的响应，并且动态添加到二级菜单中。
3> 由于DropDownList是在DataGrid模板中，因此DropDownList的ID是不确定的，因此需要用js根据父菜单的ID来动态生成子菜单的ID并且用document.getElementByID查找。
隐藏页面代码（default2.aspx.cs):
主页面服务器端代码：
主页面客户端代码：
效果图：
代码下载（含数据库):
Download
其他：
这个例子只是用vs2005做了一个简单的演示，没有考虑代码移植，如果需要用其中的代码片段，请做对应的调整。
1> 通过一个隐藏的页面根据传递的参数从数据源获取数据，并且写到网络流中。
2> 在主页面通过javascript+xmlhttp根据一级菜单提供的参数（省的代码）向隐藏页面发送请求，并且解析返回的响应，并且动态添加到二级菜单中。
3> 由于DropDownList是在DataGrid模板中，因此DropDownList的ID是不确定的，因此需要用js根据父菜单的ID来动态生成子菜单的ID并且用document.getElementByID查找。
隐藏页面代码（default2.aspx.cs):
1
using System;
2using System.Data;
3using System.Configuration;
4using System.Collections;
5using System.Web;
6using System.Web.Security;
7using System.Web.UI;
8using System.Web.UI.WebControls;
9using System.Web.UI.WebControls.WebParts;
10using System.Web.UI.HtmlControls;
11using System.Data.OleDb;
12
13
14public 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
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
13
14
public partial class Default2 : System.Web.UI.Page15
{
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
try28
{29
adapter.Fill(dst);30
dst.WriteXml(Response.OutputStream);31
}32
catch(Exception ex)33
{34
Response.Write(ex.Message);35
}36
}37
}38
主页面服务器端代码：
1using System;
2using System.Data;
3using System.Configuration;
4using System.Web;
5using System.Web.Security;
6using System.Web.UI;
7using System.Web.UI.WebControls;
8using System.Web.UI.WebControls.WebParts;
9using System.Web.UI.HtmlControls;
10using System.Data.OleDb;
11
12public 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
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
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
12
public partial class _Default : System.Web.UI.Page13
{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 event26
list.Attributes.Add("onchange", "RequestByGet(this)");27
}28
29
}30
}31
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
try42
{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
主页面客户端代码：
1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
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
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
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
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4
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
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
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
效果图：
代码下载（含数据库):
Download
其他：
这个例子只是用vs2005做了一个简单的演示，没有考虑代码移植，如果需要用其中的代码片段，请做对应的调整。
浙公网安备 33010602011771号