DataGrid中的级联菜单（转）

最新推荐文章于 2021-07-15 08:55:27 发布

转载最新推荐文章于 2021-07-15 08:55:27 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhdonghu/archive/2010/06/20/1761519.html

文章标签：

#c# #ui #人工智能

本文介绍如何在ASP.NET中使用隐藏页面和XMLHttpRequest实现动态加载二级下拉菜单，通过解析XML数据并动态更新菜单选项，展示了跨页面数据交互的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要点：
1> 通过一个隐藏的页面根据传递的参数从数据源获取数据，并且写到网络流中。
2> 在主页面通过javascript+xmlhttp根据一级菜单提供的参数（省的代码）向隐藏页面发送请求，并且解析返回的响应，并且动态添加到二级菜单中。
3> 由于DropDownList是在DataGrid模板中，因此DropDownList的ID是不确定的，因此需要用js根据父菜单的ID来动态生成子菜单的ID并且用document.getElementByID查找。

隐藏页面代码（default2.aspx.cs):

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

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

主页面服务器端代码：

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

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

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

}
30

}
31

/// <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

}
46

catch (Exception ex)
47

{
48

Response.Write(ex.Message);
49

}
50

return dst.Tables[0];
51

}
52

}
54

主页面客户端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4

<html xmlns="http://www.w3.org/1999/xhtml" >
6

<head runat="server">
7

<title>Untitled Page</title>
8

function RequestByGet(parentSelect){
10

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

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

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

//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

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

<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

<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

</div>
87

</form>
88

</body>
89

</html>
90

效果图：

转载于:https://www.cnblogs.com/zhdonghu/archive/2010/06/20/1761519.html