討論區開發作業文件
by 台南市教育局行政網路組傅志雄
(一)、前置作業
1. 建立討論區構想:
A. Frame 框架
所有發起討論主題列表
1.xxxxx
2.yyyyy
發起討論主題(xxxxx)
Tree
B. 使用 TreeView(IE Web Control)元件
C.
2. 建立資料庫 forum
3. 建立 table—Disscussion
顯示內容區
4. 開啟 VS .NET Studio
5. 新增專案
*Project types: Visual C# Projects
*Templates : ASP .NET Web Application
*Location : http://localhost/forum
6.
7.
8.
9.
*Close Solution
刪除預設的 ASPX 檔
新增 test.aspx
調整開發視窗
安裝外掛元件 ASP.NET Server Controls WebControls Version 1.0
1.下載 IEWebCotrol
英文版--http://msdn.microsoft.com/downloads/default.asp?url=/downloads/samples/internet/asp_dot_net_servercontrols/webcontrols/default.asp
中文版-http://msdn.microsoft.com/downloads/samples/internet/?url=/downloads/samples/internet/asp_dot_net_servercontrols/webcontrols_cht/default.asp?frame=true
ASP.NET Server Controls WebControls Version 1.0
注意:僅與執行 .NET Framework (1.0.3705.0) 和 Visual Studio® .NET (7.0.9466) 的電腦相容。
2.下載 Readme.doc http://msdn.microsoft.com/downloads/samples/internet/asp_dot_net_servercontrols/webcontrols_cht/readme.doc
3.安裝
4.在 [工具箱] 中將會出現 Internet Explorer WebControls Designers。
下列步驟在 Visual Studio .NET 的 [工具箱] 中新增控制項：
A. 啟動 Visual Studio .NET。
B. 開啟 [工具箱]，在 [工具箱] 上按一下滑鼠右鍵，然後選取 [自訂工具箱]。
C. 選取 ".NET Framework 元件" 索引標籤。
D. 勾選取 Microsoft.Web.UI.WebControls(MultiPage、TabStrip、Toolbar、TreeView 四項)
E.確定後完成畫面
(二)、熟悉元件作業
目標:熟悉 Microsoft.Web.UI.WebControls 之 TreeView 元件
1. 參考原資料講義
WebForm 實例-大小 124.00KB (126976 個位元組)
http://eee.tn.edu.tw/instf/ppt/2.ppt
Code
http://eee.tn.edu.tw/instf/code/code2.zip
2. 修改原資料講義
A. 新增 Project---tnvs
B. 新增 upload.aspx
C. 在 upload.aspx 的 Design 下加入各項 System.Web.UI.WebControls 元件及 System.Web.UI.HtmlControls 元件
其中注意元件配置
1. Setting up HTML form for file uploading
• <form id="Form1" method="post" runat="server" enctype="multipart/form-data">
• <input id="myFile" type="file" runat="server">
注意元件為 RunAt=server
2. Receiving uploaded file.
• protected System.Web.UI.HtmlControls.HtmlInputFile myFile;
• if(myFile.PostedFile != null )
{ //檔案上傳 }
else
{ // 沒有檔案 }
3. PostedFile property will contain a valid System.Web.HttpPostedFile object if file indeed was uploaded. HttpPostedFile provides us with 4 properties:
ContentLength – size of uploaded file in bytes
ContentType – MIME type of uploaded file, i.e. “image/gif”
FileName–full path to uploaded file on client’s system, i.e. c:\Some folder\MyPicture.gif
4.建立目錄
5.增加權限-----新設定方式,若無設定會出現以下訊息
******************************
沒有授權 ASP.NET 處理序存取要求的資源。基於安全性考量，預設的 ASP.NET 處理序識別為 '{machinename}\ASPNET'，權限是有限制的。
請考量要授與 ASP.NET 處理序識別的存取權限。
若要取得 ASP.NET 寫入檔案的存取權限，請在檔案總管中用右鍵按一下檔案，選擇 [內容] 並選取 [安全] 索引標籤。按一下 [新增] 加入
"{machinename}\ASPNET" 使用者。反白顯示 ASP.NET 帳戶，並且選取 [允許] 欄位中 [寫入] 的核取方塊。
******************************
6.熟悉 IO、PostedFile、字串處理
•
•
PostedFile.SaveAs()
IO 元件
Directory.GetFiles()
File.Exists()
File. Delete()
• 字串處理
LastIndexOf()
Substring()
WebControl-------Listbox 使用
D. Coding 步驟
*利用F7切換CodeBehind
*using元件
using System.IO;
using Microsoft.Web.UI.WebControls;
*講解 Code
上傳檔案 Code
private void btnCmd_Click(object sender, System.EventArgs e)
{
if(myFile.PostedFile!=null) //判斷是否有檔案上傳
{
string myFilenmae=myFile.PostedFile.FileName;
int j=myFilenmae.LastIndexOf("\\")+1;
int i= myFilenmae.LastIndexOf(".")+1;
switch(myFilenmae.Substring(i))
{
case "jpg":
case "gif":
//檔案名--例如:C:\Inetpub\wwwroot\warning.gif
//找到最後的”\”的Index值
//找到最後的”.”的Index值
//找到副檔名--例如:C:\Inetpub\wwwroot\warning.gif為gif
if(File.Exists("c:\\inetpub\\wwwroot\\tnvs\\upload\\"+myFilenmae.Substring(j)))
{
//判斷是否有相同檔案
File.Delete("c:\\inetpub\\wwwroot\\tnvs\\upload\\"+myFilenmae.Substring(j));
//若有就利用IO元件刪除
}
myFile.PostedFile.SaveAs("c:\\inetpub\\wwwroot\\tnvs\\upload\\"+myFilenmae.Substring(j)); //利用IO元件存檔
status.Text="Save "+myFilenmae.Substring(j)+ " OK";
//顯示存檔結果
findfile();
//重新顯示Update版面
break;
default:
status.Text="非指定檔案";
break;
}
}
else
{
status.Text="沒有指定檔案";
}
}
顯示版面
public void findfile()
{
string[] fileEntries=Directory.GetFiles("c:\\inetpub\\wwwroot\\tnvs\\upload");
//----利用IO.Directory收集目錄下檔案匯入到fileEntries字串陣列
tv1.Nodes.Clear();
//清除tv1(Microsoft.Web.UI.WebControls.TreeView)所有Node
lb1.Items.Clear();
//清除lb1(System.Web.UI.WebControls.ListBox)所有Node
TreeNode tvNode1=new TreeNode();
//先建立TreeNode
tvNode1.Type="Root";
//設定tvNode1屬性
tvNode1.Text="主目錄";
//設定tvNode1屬性
foreach(string fileName in fileEntries)
//做fileEntries字串陣列搜尋迴圈
{
TreeNode q=new TreeNode();
//先建立TreeNode
q.Text=fileName.Substring((fileName.LastIndexOf("\\")+1));
//設定q屬性
q.NavigateUrl="../tnvs/upload/"+fileName.Substring((fileName.LastIndexOf("\\")+1));
q.Target="_blank";
//設定q屬性
tvNode1.Nodes.Add(q);
lb1.Items.Add(fileName);
//把q(TreeNode)塞入tvNode1
//新增lb1之Item
}
tvNode1.Expanded=true;
//設定tvNode1屬性
tv1.Nodes.Add(tvNode1);
tv1.SelectExpands=true;
lb1.SelectedIndex=0;
//把tvNode1 (TreeNode)塞入tv1
//設定tv1屬性
//設lb1的選取Index
}
刪除檔案(若要刪除請記得"{machinename}\ASPNET" 使用者要有修改權限)
private void btnDel_Click(object sender, System.EventArgs e)
{
if(lb1.SelectedIndex >-1)
{
//次序不能顛倒
File.Delete(lb1.SelectedItem.Value);
lb1.Items.RemoveAt(lb1.SelectedIndex);
findfile();
}
else
{
status.Text="請選擇刪除檔案";
}
}
展示結果如下
//判斷lb1是否已經選取
//刪除指定檔案
//移除lb1之Item
//重新Update版面
//設定q屬性
E. 分析 TreeView
參考資料
1.Using the TreeView Designer in Visual Studio .NET
http://msdn.microsoft.com/library/default.asp?url=/workshop/webcontrols/using/designer/treeview.asp
使用方法如下:
Creating a Simple TreeView
This section walks through the steps to create a simple TreeView using the design-mode in Visual Studio .NET.
1. Start Microsoft Visual Studio® .NET.
2. Create a new project.
This can be done by selecting New from the File menu. Once you have selected the menu option to create the new project,
Visual Studio .NET will prompt for the type of project and other information.
Select Visual C# Projects from the Project Types panel and select Web Application from the Templates panel. Accept the
default name of the application and click the OK button; Visual Studio .NET will create the Web application.
3. Create a new Web Form.
Select Add New Item from the File menu. Select the Web Form icon from the Templates panel and name the file tree1.aspx.
Finally, click the Open button to create and open the new page.
4. Select design view.
To select design view, click the Design tag at the bottom of the HTML Designer window. Either GridLayout or FlowLayout mode
can be used in design view, to arrange the layout of controls on the page.
5. Add a TreeView WebControl.
Open the Toolbox and select the General tab. The TreeView should be visible on this panel, along with the designers for the
other WebControls.
Add a TreeView to the Web Form by dragging the TreeView from the Toolbox panel onto the page.
If the control was added to the page correctly, the design view should appear similar to the following image.
Note If the WebControls designers do not appear in the Toolbox, they may not have been installed. Another possibility is that
they have not yet been added to the Toolbox. When editing a Web Form, if design view is not selected, the design-time
controls for the WebControls do not appear in the Toolbox.
6. Locate the Properties panel.
Ensure that the Properties panel is visible in the Visual Studio .NET IDE. If the Properties panel is not open, it can be
activated by pressing the F4 key.
Select the TreeView control by clicking it; when it is selected, its resizing handles are activated. When the TreeView control
is selected, the Properties panel synchronizes with the selection and renders the properties for TreeView1.
Several different views of the Properties panel can be selected. Each view type is selected by clicking the icons at the top-left
corner of the panel. Select the Categorized view, which arranges the properties of the TreeView by category.
Scroll down the Properties panel to the Data properties. The Data properties relate directly to data islands, data binding, and
items of data rendered by the TreeView.
7. Open the TreeNode editor.
The collection of nodes in a TreeView can be edited by opening the Nodes in the Properties panel.
Click anywhere in the Nodes field, and a button will appear at the end of the data entry field. This button opens an editor that
enables the nodes in the TreeView to be edited. Click the button to open the TreeNode editor.
8. Edit the root node.
A root node is created by default when a TreeView is added to a Web Form.
Select the root node so that it is highlighted in the editor.
Click the mouse in the Text property field for the root nodes properties and enter the value My first Tree Node. Press the
ENTER key to complete the data entry and see the rendering of the tree update.
9. Add a TreeNode.
Another node can easily be added to the TreeView at this point. Two possibilities exist: one is to add another root node below
the first one; the second option is to add a child node to the root node.
Click the Add Child button to add a child TreeNode of the root node. The TreeNode editor applies the default text, Node1, to
the new node.
Select the Text property field for the new node and enter the value My second Tree Node. Press enter to update the rendering
of the tree.
Click OK to close the editor.
Save the Web Form to preserve the updates.
10. Render the page.
Right-click anywhere on the Web Form and select View in Browser. The page will render in the browser.
The following image shows a rendering of the initial state of the TreeView.
The TreeView renders the root node, and it has a graphic that indicates it is expandable. The node can be expanded or
collapsed by clicking on it.
Note This sample illustrates that the default state of a node in a TreeView is collapsed. The initial state of node can be
controlled by setting its EXPANDED property.
2.About the TreeView WebControl
http://msdn.microsoft.com/workshop/webcontrols/overview/treeview.asp
3.TreeView WebControl Reference
http://msdn.microsoft.com/workshop/webcontrols/reference/treeview_entry.asp?frame=true
4.TreeView Class---Method、Property、Event
http://msdn.microsoft.com/workshop/webcontrols/assemblies/webcontrols/classes/TreeView/TreeView.asp
列出關鍵的 Method、Property、Event
**** SelectedNodeIndex
**** Check、SelectedIndexChange
**** GetNodeFromIndex
F. TreeView 之 Method、Property、Event 實例
SelectedNodeIndex、SelectedIndexChange、GetNodeFromIndex
1. 新增 test01.aspx
2. 建置 WebForm
3. 成果
4. Code 講解
點選
private void tv1_SelectedIndexChange(object sender, Microsoft.Web.UI.WebControls.TreeViewSelectEventArgs e)
{
lb1.Text=tv1.SelectedNodeIndex+"---SelectedIndexChange";
}
點選CheckBox
private void tv1_Check(object sender, Microsoft.Web.UI.WebControls.TreeViewClickEventArgs e)
{
lb1.Text=tv1.SelectedNodeIndex+"---Check/"+tv1.GetNodeFromIndex(tv1.SelectedNodeIndex).Checked;
}
散開
private void btn1_Click(object sender, System.EventArgs e)
{
tv1.Nodes[0].Expanded=true;
}
縮合
private void btn2_Click(object sender, System.EventArgs e)
{
tv1.Nodes[0].Expanded=false;
}
新增node
private void btn3_Click(object sender, System.EventArgs e)
{
tv1.GetNodeFromIndex(tv1.SelectedNodeIndex).Nodes.Add(NodeAdd("sds","sddd","asd"));
}
新增NodeAdd 函式---回傳TreeNode
public TreeNode NodeAdd(string text, string type,string NaviUrl)
{
TreeNode n = new TreeNode();
n.Type = type;
n.Text = text;
if ( NaviUrl != "" )
{
n.NavigateUrl=NaviUrl;
n.Target="main";
}
return n;
}
G. 實際 Coding
(參考 Discussion Product: http://www.agdstudio.com/easyDisc/easyDisc.aspx-----這也可以賣出來????????????)
……………………….不及準備,成果如下
先進入主要選單, 主要選單含申請討論區及切換不同討論區,每個討論區可發起不同主題,
用滑鼠點選 asp 版之討論主題 1—0@主題
便可以看到一堆討論主題,請參考下圖
Source Code 講解準備中…………