[ASP.NET] 实现客户端浏览服务端目录的页面

最新推荐文章于 2024-06-20 09:28:34 发布

转载最新推荐文章于 2024-06-20 09:28:34 发布 · 785 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wyforumid/archive/2008/05/14/1196155.html

文章标签：

#c# #xhtml #ui

本文介绍了一个用于ASP.NET项目的文件选择器控件的实现细节，包括前端页面布局、交互逻辑及后端数据处理。该控件允许用户在服务端目录中选择文件或文件夹，支持多种文件类型筛选。

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

由于项目需要制作程序发布的网站，需要手动选择服务端目录下的文件夹和文件。故制作该页面，并打算转为UserControl.

页面代码：

AppFileSelect.aspx
1

<%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="true" CodeFile="AppFileSelect.aspx.cs" Inherits="UserControl_FileSelect" %>
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>Application Select</title>
8

var selectType;
12

/**//*
13

将先前所选择项背景恢复为默认样式
14

*/
15

function ChangeDefaultCSS()
16

{
17

var divs = document.getElementsByName("listitem");
18

for(i=0;i<divs.length;i++)
19

{
20

divs[i].className = "divItem";
21

}
22

}
23

/**//*
25

单击文件或文件夹时，记录路径
26

*/
27

function GetSelectFilePath(div)
28

{
29

var hdfDir = document.getElementById("<%=hdfDir.ClientID %>");
30

var currentDir = document.getElementById("<%=currentDir.ClientID %>");
31

var fileInfos = div.getElementsByTagName("input");
33

//记录所选文件路径
34

hdfDir.value = fileInfos[0].value;
35

//记录所选择类型：文件||文件夹
36

selectType = fileInfos[1].value;
37

if(selectType == "dir")
38

{
39

currentDir.value = fileInfos[0].value;
40

}
41

}
42

/**//*
44

单击事件
45

*/
46

function Click(div)
47

{
48

//清除其他div选择样式
49

ChangeDefaultCSS();
50

//记录所选文件或文件夹的路径
51

GetSelectFilePath(div);
52

var span = div.getElementsByTagName("span");
54

var fileNames = document.getElementById("<%=tbxSelectedFiles.ClientID %>");
55

var fileType = div.getElementsByTagName("input");
56

if(selectType == "file")//(fileType[1].value == "dir")
57

{
58

fileNames.value = span[0].innerHTML;
59

}
60

else
61

{
62

fileNames.value = "";
63

}
64

div.className = "divSelectItem";
65

}
66

/**//*
68

双击事件
69

*/
70

function DClick(div)
71

{
72

var fileInfos = div.getElementsByTagName("input");
73

//file|dir type
74

if(fileInfos[1].value=="file")
75

{
76

__doPostBack('btnOpenFile','');
77

return false;
78

}
79

else
80

{
81

__doPostBack('btnOpenDir','');
82

return false;
83

}
84

}
85

/**//*
87

Open按钮客户端事件
88

*/
89

function OnOpenBefore()
90

{
91

if(selectType=="dir")
92

{
93

__doPostBack('btnOpenDir','');
94

return false;
95

}
96

else
97

{
98

return true;
99

}
100

}
101

102

/**//*
103

关闭模式窗口
104

*/
105

function CloseWindow()
106

{
107

window.close();
108

return false;
109

}
110

</script>
111

</head>
112

<body>
113

<form id="form1" runat="server">
114

<div class="divBorder">
115

<asp:ScriptManager ID="ScriptManager1" runat="server">
116

</asp:ScriptManager>
117

118

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
119

<ContentTemplate>
120

<div class="divInnerDivHeader">
121

<table>
122

<tr>
123

<td>
124

Look in:</td>
125

<td>
126

<asp:DropDownList ID="ddlGotoDir" runat="server" Width="245px" AutoPostBack="True" OnSelectedIndexChanged="ddlGotoDir_SelectedIndexChanged">
127

</asp:DropDownList></td>
128

<td>
129

<asp:Button ID="btnUp" runat="server" Text="Back" CssClass="btn_2k3" OnClick="btnUp_Click" /></td>
130

</tr>
131

</table>
132

</div>
133

<div class="divInnerDivItemList">
134

<asp:DataList ID="FileList" runat="server" RepeatColumns="3" OnItemDataBound="FileList_ItemDataBound">
135

<ItemTemplate>
136

<div id="listitem" name="listitem" ondblclick="DClick(this)" onclick="Click(this)" class="divItem">
137

<table>
138

<tr>
139

<td colspan="3">
140

<asp:Image ID="imgFileICO" runat="server"/></td>
141

<td > <span><%# DataBinder.Eval(Container.DataItem, "FileName") %></span></td>
142

</tr>
143

</table>
144

<asp:HiddenField ID="hdfFilePath" runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "FilePath") %>'/>
145

<asp:HiddenField ID="hdfFileType" runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "FileType") %>' />
146

</div>
147

</ItemTemplate>
148

</asp:DataList></div>
149

<div class="divInnerDivFooter">
150

<table>
151

<tr>
152

<td>
153

Files of Name:</td>
154

<td>
155

<asp:TextBox ID="tbxSelectedFiles" runat="server" Width="283px"></asp:TextBox></td>
156

<td>
157

<asp:Button ID="btnOpenFile" runat="server" Text="Open" CssClass="btn_2k3" OnClick="btnOpenFile_Click" OnClientClick="return OnOpenBefore()" /></td>
158

</tr>
159

<tr>
160

<td>
161

Files of Type:</td>
162

<td>
163

<asp:DropDownList ID="ddlExtension" runat="server" Width="290px" OnSelectedIndexChanged="ddlExtension_SelectedIndexChanged" AutoPostBack="True">
164

<asp:ListItem Selected="True" Value=".application">APP(.application)</asp:ListItem>
165

<asp:ListItem Value=".deploy">Deploy(.deploy)</asp:ListItem>
166

<asp:ListItem Value=".doc">Doc(.doc)</asp:ListItem>
167

<asp:ListItem Value=".pdf">PDF(.pdf)</asp:ListItem>
168

<asp:ListItem Value=".*">All Files</asp:ListItem>
169

</asp:DropDownList></td>
170

<td >
171

<asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="btn_2k3" OnClientClick="return CloseWindow()" /></td>
172

</tr>
173

</table>
174

</div>
175

<asp:HiddenField ID="hdfDir" runat="server" />
176

<asp:HiddenField ID="currentDir" runat="server" />
177

<div style=" visibility :hidden">
178

<asp:Button ID="btnOpenDir" runat="server" OnClick="btnOpenDir_Click" Text="OpenDir" /></div>
179

</ContentTemplate>
180

</asp:UpdatePanel>
181

</div>
182

</form>
183

</body>
184

</html>
185

后台代码：

AppFileSelect.aspx.cs
1

//----------------------------------------------------------------------
2

// Ryan Wei
3

// Date:2008.05.12
4

//----------------------------------------------------------------------
5

// Description: 客户端选择服务端Application文件选择页面
6

//----------------------------------------------------------------------
7

using System;
9

using System.Data;
10

using System.Configuration;
11

using System.Collections;
12

using System.Web;
13

using System.Web.Security;
14

using System.Web.UI;
15

using System.Web.UI.WebControls;
16

using System.Web.UI.WebControls.WebParts;
17

using System.Web.UI.HtmlControls;
18

using System.IO;
19

public partial class UserControl_FileSelect : System.Web.UI.Page
21

{
22

protected void Page_Load(object sender, EventArgs e)
23

{
24

if (!IsPostBack)
25

{
26

//绑定目录信息
27

BindFiles(Server.MapPath("../Publish"));
28

//绑定快捷选择
29

BindDirShortCut(Server.MapPath("../Publish"));
30

//设置初始路径
31

this.currentDir.Value = Server.MapPath("../Publish");
32

}
33

}
34

Functions#region Functions
36

/**//// <summary>
38

/// 邦定快捷选择
39

/// </summary>
40

/// <param name="path"></param>
41

private void BindDirShortCut(string path)
42

{
43

//获取文件夹信息
44

string[] directories = Directory.GetDirectories(path);
45

添加默认项#region 添加默认项
47

ListItem item = new ListItem();
48

item.Text = "Root";
49

item.Value = Server.MapPath("../Publish").ToString();
50

this.ddlGotoDir.Items.Add(item);
51

#endregion
52

添加文件夹项#region 添加文件夹项
54

foreach (string dir in directories)
55

{
56

item = new ListItem();
57

item.Text = Path.GetFileName(dir);
58

item.Value = dir;
59

this.ddlGotoDir.Items.Add(item);
60

}
61

#endregion
62

}
63

/**//// <summary>
65

/// 查找指定文件夹中的文件夹和文件
66

/// </summary>
67

/// <param name="path"></param>
68

private void BindFiles(string path)
69

{
70

//所有文件名
71

string[] fileNames = Directory.GetFiles(path);
72

//所有文件夹名
73

string[] directories = Directory.GetDirectories(path);
74

定义DataTable 保存文件信息#region 定义DataTable 保存文件信息
76

DataTable dt = new DataTable();
77

dt.Columns.Add("FileName", typeof(string));
78

dt.Columns.Add("FileType", typeof(string));
79

dt.Columns.Add("FilePath", typeof(string));
80

#endregion
81

向DataTable添加文件信息#region 向DataTable添加文件信息
83

foreach (string file in fileNames)
84

{
85

//过滤指定后缀名的文件，当选择 All Files(.*) 时显示当前目录的所有文件
86

if (Path.GetExtension(file).ToLower() == ddlExtension.SelectedValue || ddlExtension.SelectedValue == ".*")
87

{
88

DataRow dr = dt.NewRow();
89

dr["FileName"] = Path.GetFileName(file);
90

dr["FileType"] = "file";
91

dr["FilePath"] = file;
92

dt.Rows.Add(dr);
93

}
94

}
95

#endregion
96

向DataTable添加文件夹信息#region 向DataTable添加文件夹信息
98

foreach (string dir in directories)
99

{
100

DataRow dr = dt.NewRow();
101

dr["FileName"] = Path.GetFileName(dir);
102

dr["FileType"] = "dir";
103

dr["FilePath"] = dir;
104

dt.Rows.Add(dr);
105

}
106

#endregion
107

108

//绑定数据
109

DataView dv = dt.DefaultView;
110

dv.Sort = "FileType";
111

this.FileList.DataSource = dv;
112

this.FileList.DataBind();
113

}
114

115

#endregion
116

117

Control Events#region Control Events
118

119

/**//// <summary>
120

/// Up Button
121

/// 返回按钮
122

/// </summary>
123

/// <param name="sender"></param>
124

/// <param name="e"></param>
125

protected void btnUp_Click(object sender, EventArgs e)
126

{
127

//如果当前为根目录
128

if (this.hdfDir.Value.EndsWith("\\Publish") || this.hdfDir.Value == string.Empty)
129

{
130

BindFiles(Server.MapPath("../Publish").ToString());
131

this.tbxSelectedFiles.Text = string.Empty;
132

}
133

else//返回上一层目录
134

{
135

//上一层目录路径
136

string path = this.hdfDir.Value.Remove(hdfDir.Value.LastIndexOf('\\'));
137

//设置返回后的目录路径
138

this.hdfDir.Value = path;
139

this.currentDir.Value = path;
140

//列出文件和文件夹
141

BindFiles(hdfDir.Value);
142

//清空文件
143

this.tbxSelectedFiles.Text = string.Empty;
144

}
145

}
146

147

/**//// <summary>
148

/// Open Button
149

/// 打开按钮
150

/// </summary>
151

/// <param name="sender"></param>
152

/// <param name="e"></param>
153

protected void btnOpenFile_Click(object sender, EventArgs e)
154

{
155

ScriptManager.RegisterClientScriptBlock(UpdatePanel1, this.GetType(), "click", "window.returnValue='" + this.hdfDir.Value.Replace('\\','#') +"';window.close();", true);
156

}
157

158

/**//// <summary>
159

/// 双击打开文件夹
160

/// </summary>
161

/// <param name="sender"></param>
162

/// <param name="e"></param>
163

protected void btnOpenDir_Click(object sender, EventArgs e)
164

{
165

//清空选择的文件名
166

this.tbxSelectedFiles.Text = string.Empty;
167

//列出文件夹文件
168

BindFiles(this.hdfDir.Value);
169

}
170

171

/**//// <summary>
172

/// 快捷选择变化时
173

/// </summary>
174

/// <param name="sender"></param>
175

/// <param name="e"></param>
176

protected void ddlGotoDir_SelectedIndexChanged(object sender, EventArgs e)
177

{
178

//当前路径
179

string path = ddlGotoDir.SelectedValue;
180

//路径保存信息
181

this.hdfDir.Value = path;
182

this.currentDir.Value = path;
183

//列出文件夹文件
184

BindFiles(ddlGotoDir.SelectedValue);
185

}
186

187

/**//// <summary>
188

/// DataList 邦定图片事件
189

/// </summary>
190

/// <param name="sender"></param>
191

/// <param name="e"></param>
192

protected void FileList_ItemDataBound(object sender, DataListItemEventArgs e)
193

{
194

Image img = (Image)e.Item.FindControl("imgFileICO");
195

HiddenField hdf = (HiddenField)e.Item.FindControl("hdfFileType");
196

//类型为文件时的显示图片
197

if (hdf.Value == "file")
198

{
199

img.ImageUrl = "~/Images/file.png";
200

}
201

else //类型为文件夹时的显示图片
202

{
203

img.ImageUrl = "~/Images/doc.png";
204

}
205

}
206

#endregion
207

208

protected void ddlExtension_SelectedIndexChanged(object sender, EventArgs e)
209

{
210

//string path = this.hdfDir.Value.Remove(this.hdfDir.Value.LastIndexOf('\\'));
211

BindFiles(this.currentDir.Value);
212

}
213

}
214

CSS样式表：

FileSelect.css
1

body
2

{
3

background-color: #dcdcdc;
4

font-size: 0.75em;
5

font-family: Tahoma;
6

}
7

.divItem
9

{
10

text-overflow: ellipsis;
11

white-space: nowrap;
12

}
13

.divBorder
15

{
16

background-color: #dcdcdc;
17

margin:10px;
18

width:510px;
19

height:320px;
20

}
21

.divInnerDivHeader
23

{
24

margin-left:10px;
25

}
26

.divInnerDivItemList
28

{
29

border:solid 1px;
30

margin-left: 5px;
31

background-color: #ffffff;
32

width:496px;
33

height:270px;
34

overflow:auto;
35

}
36

.divInnerDivFooter
38

{
39

margin-left:10px;
40

}
41

control.css
1

.btn
2

{
3

width:60px;
4

BORDER-RIGHT: #7b9ebd 1px solid;
5

PADDING-RIGHT: 2px;
6

BORDER-TOP: #7b9ebd 1px solid;
7

PADDING-LEFT: 2px;
8

FONT-SIZE: 12px;
9

FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
10

BORDER-LEFT: #7b9ebd 1px solid;
11

CURSOR: hand;
12

COLOR: black;
13

PADDING-TOP: 2px;
14

BORDER-BOTTOM: #7b9ebd 1px solid;
15

}
16

.btn1_mouseout
18

{
19

BORDER-RIGHT: #7EBF4F 1px solid;
20

PADDING-RIGHT: 2px;
21

BORDER-TOP: #7EBF4F 1px solid;
22

PADDING-LEFT: 2px;
23

FONT-SIZE: 12px;
24

FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997);
25

BORDER-LEFT: #7EBF4F 1px solid;
26

CURSOR: hand;
27

COLOR: black;
28

PADDING-TOP: 2px;
29

BORDER-BOTTOM: #7EBF4F 1px solid
30

}
31

.btn1_mouseover
33

{
34

BORDER-RIGHT: #7EBF4F 1px solid;
35

PADDING-RIGHT: 2px;
36

BORDER-TOP: #7EBF4F 1px solid;
37

PADDING-LEFT: 2px;
38

FONT-SIZE: 12px;
39

FILTER:
40

progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
41

StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F
42

1px solid;
43

CURSOR: hand;
44

COLOR: black;
45

PADDING-TOP: 2px;
46

BORDER-BOTTOM: #7EBF4F 1px solid
47

}
48

.btn2
50

{
51

padding: 2 4 0 4;
52

font-size:12px;
53

height:23;
54

background-color:#ece9d8;
55

border-width:1;
56

}
57

.btn3_mouseout
59

{
60

BORDER-RIGHT: #2C59AA 1px solid;
61

PADDING-RIGHT: 2px;
62

BORDER-TOP:#2C59AA 1px solid;
63

PADDING-LEFT: 2px;
64

FONT-SIZE: 12px;
65

FILTER:
66

progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
67

StartColorStr=#ffffff, EndColorStr=#C3DAF5);
68

BORDER-LEFT: #2C59AA 1px solid;
69

CURSOR: hand;
70

COLOR: black;
71

PADDING-TOP: 2px;
72

BORDER-BOTTOM: #2C59AA 1px solid
73

}
74

.btn3_mouseover

{
76

BORDER-RIGHT: #2C59AA 1px solid;
77

PADDING-RIGHT: 2px;
78

BORDER-TOP: #2C59AA 1px solid;
79

PADDING-LEFT: 2px;
80

FONT-SIZE: 12px;
81

FILTER:
82

progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
83

StartColorStr=#ffffff, EndColorStr=#D7E7FA);
84

BORDER-LEFT: #2C59AA 1px solid;
85

CURSOR: hand;
86

COLOR: black;
87

PADDING-TOP: 2px;
88

BORDER-BOTTOM: #2C59AA 1px solid
89

}
90

.btn3_mousedown
92

{
93

BORDER-RIGHT: #FFE400 1px solid;
94

PADDING-RIGHT: 2px;
95

BORDER-TOP: #FFE400 1px solid;
96

PADDING-LEFT: 2px;
97

FONT-SIZE: 12px;
98

FILTER:
99

progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
100

StartColorStr=#ffffff, EndColorStr=#C3DAF5);
101

BORDER-LEFT: #FFE400 1px solid;
102

CURSOR: hand;
103

COLOR: black;
104

PADDING-TOP: 2px;
105

BORDER-BOTTOM: #FFE400 1px solid
106

}
107

108

.btn3_mouseup
109

{
110

BORDER-RIGHT: #2C59AA 1px solid;
111

PADDING-RIGHT: 2px;
112

BORDER-TOP: #2C59AA 1px solid;
113

PADDING-LEFT: 2px;
114

FONT-SIZE: 12px;
115

FILTER:
116

progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
117

StartColorStr=#ffffff, EndColorStr=#C3DAF5);
118

BORDER-LEFT: #2C59AA 1px solid;
119

CURSOR: hand;
120

COLOR: black;
121

PADDING-TOP: 2px;
122

BORDER-BOTTOM: #2C59AA 1px solid
123

}
124

125

.btn_2k3
126

{
127

BORDER-RIGHT: #002D96 1px solid;
128

PADDING-RIGHT: 2px;
129

BORDER-TOP:#002D96 1px solid;
130

PADDING-LEFT: 2px;
131

FONT-SIZE: 12px;
132

FILTER:
133

progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
134

StartColorStr=#FFFFFF, EndColorStr=#9DBCEA);
135

BORDER-LEFT: #002D96 1px solid;
136

CURSOR: hand;
137

COLOR: black;
138

PADDING-TOP: 2px;
139

BORDER-BOTTOM: #002D96 1px solid;
140

width:60px;
141

}
142

143

.lbl
144

{
145

height: 18px;
146

border-right: #678fc2 1px solid;
147

border-top: #678fc2 1px solid;
148

border-left: #678fc2 1px solid;
149

border-bottom: #678fc2 1px solid;
150

}
151

152

.tbx
153

{
154

height: 16px;
155

border-right: #678fc2 1px solid;
156

border-top: #678fc2 1px solid;
157

border-left: #678fc2 1px solid;
158

border-bottom: #678fc2 1px solid;
159

}
160

161

.Richtbx
162

{
163

height: 200px;
164

border-right: #678fc2 1px solid;
165

border-top: #678fc2 1px solid;
166

border-left: #678fc2 1px solid;
167

border-bottom: #678fc2 1px solid;
168

font-family: Tahoma;
169

}
170

171

.tbxCheckCode
172

{
173

height: 16px;
174

border-left: medium none;
175

border-right: medium none;
176

border-top: medium none;
177

border-bottom-color: #678fc2;
178

border-bottom-style: solid;
179

border-bottom-width:1px;
180

}
181

182

.lnk
183

{
184

cursor: hand;
185

}
186

187

.GridViewStyle
188

{
189

font-size:12px;
190

font-family: Tahoma;
191

border: none 1px #fffff;
192

margin-top: 20px;
193

margin-left: 25px;
194

}
195

196

.gvheader
197

{
198

font-size: 14px;
199

font-family: Tahoma;
200

background-color: #006699;
201

font-weight: bold;
202

}
203

在调用该页面时使用模式窗口：

Code
1

function AppSelectWindow()
3

{
4

window.showModalDialog("../UserControl/AppFileSelect.aspx","","dialogWidth=536px;dialogHeight=455px");
5

}
6

</script>
8

</asp:Content>

转载于:https://www.cnblogs.com/wyforumid/archive/2008/05/14/1196155.html