天天看點
傳回

asp.net夜話之六：asp.net基本控件(下)

FileUpload控件

        FileUpload控件是一個很重要的控件，它被Web伺服器最終解釋為形如“<input type=”file”…/>”這樣的普通HTML控件。

        它有如下常見屬性：

屬性名 資料類型 說明

FileBytes byte[] 上傳的檔案内容的位元組數組表示形式

FileContent Stream 上傳檔案的資料流

FileName string 上傳檔案在用戶端的名字

HasFile bool  訓示是否上傳了檔案

PostedFile HttpPostedFile 擷取檔案基礎的HttpPostedFile對象

        這個HttpPostedFile對象能幫我們做很多工作，它也有一些有用的常見屬性：

ContentLength int 上傳的檔案内容的位元組長度

ContentType string 上傳檔案的MIME 内容類型

FileName string 上傳檔案的在用戶端的名字

InputStream Stream 指向上傳檔案的Stream對象

        FileUpload控件還有一個void SaveAs (string filename)的方法，這個方法用于将上傳的檔案儲存到伺服器上。一般來說，使用FileUpload控件上傳檔案一般有如下幾個步驟：

（1）利用HasFile屬性判斷是否上傳了檔案。

（2）在伺服器上指定一個實體路徑，并檢查這個實體路徑是否存在，如果不存在則先建立。

（3）指定上傳檔案在伺服器上的上傳路徑，利用SaveAs()儲存上傳的檔案。這一步還可以做一些其它檢查工作，比如檢查上傳的檔案格式是否符合要求或檔案内容大小是否符合要求。

（4）将相對路徑或者URL位址儲存起來，以便客戶通路或者下載下傳。

        這裡要着重強調的是：我們儲存上傳的時候儲存檔案用的是實體路徑，但是要儲存的、日後用戶端能通路得到的卻是相對路徑或者URL位址。

下面是一個簡單的例子，這個頁面叫Upload.aspx，它的源視圖代碼如下：

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

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

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

<head runat="server"> 

        <title>檔案上傳的例子</title> 

</head> 

<body> 

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

        <div> 

                <asp:FileUpload ID="fileUpload" runat="server" /> 

                <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="上傳" /> 

                <asp:Literal ID="literal" runat="server"></asp:Literal></div> 

        </form> 

</body> 

</html>

背景cs代碼如下：

using System; 

using System.Data; 

using System.Configuration; 

using System.Collections; 

using System.Web; 

using System.Web.Security; 

using System.Web.UI; 

using System.Web.UI.WebControls; 

using System.Web.UI.WebControls.WebParts; 

using System.Web.UI.HtmlControls; 

public partial class Upload : System.Web.UI.Page 

{ 

void Page_Load() void Page_Load(object sender, EventArgs e) 

        { 

        } 

void btnUpload_Click() void btnUpload_Click(object sender, EventArgs e) 

                //判斷是否上傳了檔案    

                if (fileUpload.HasFile) 

                { 

                        //指定上傳檔案在伺服器上的儲存路徑    

                        string savePath = Server.MapPath("~/upload/"); 

                        //檢查伺服器上是否存在這個實體路徑，如果不存在則建立    

                        if (!System.IO.Directory.Exists(savePath)) 

                        { 

                                //需要注意的是，需要對這個實體路徑有足夠的權限，否則會報錯    

                                //另外，這個路徑應該是在網站之下，而将網站部署在C槽卻把上傳檔案儲存在D盤    

                                System.IO.Directory.CreateDirectory(savePath); 

                        } 

                        savePath = savePath + "\\" + fileUpload.FileName; 

                        fileUpload.SaveAs(savePath);//儲存檔案    

                        //不過需要注意的是，在用戶端通路卻需要指定的是URL位址，而不是在伺服器上的實體位址    

                        literal.Text = string.Format("<a href='upload/{0}'>upload/{0}</a>", fileUpload.FileName); 

                } 

}

         以下是程式運作結果：

        上傳檔案之後的效果：

        因為我上傳了一個proc.txt的檔案，是以最後的URL位址是：upload/proc.txt，點選這個超級連結能打開剛剛上傳的檔案檢視其内容，如下圖：

        注意：對于有些檔案，如rar格式的，點選之後則會出現下載下傳提示而不是直接在浏覽器打開。

        帶圖檔預覽功能的FileUpload控件

通過上面的講述，我們知道一些web伺服器控件在vs2005下沒有javascript用戶端事件的提示，不過隻要我們确信這個事件對應的HTML控件确實有，我們可以自行添加的，下面我們就來做一個讓FileUpload控件帶有圖檔預覽功能的例子。

        因為這裡不涉及到上傳後如何儲存，隻是僅僅在使用者選擇了要上傳的檔案時或者使用者将滑鼠移動到上傳控件上時，如果上傳的檔案是圖檔檔案，我們就顯示這個圖檔的預覽效果5分鐘，然後消失。以下是程式代碼（前台代碼，儲存代碼和上面的例子一樣，是以沒有寫背景cs代碼）：

<%@ Page Language="C#" %> 

<script runat="server"> 

</script> 

        <title>上傳圖檔預覽執行個體</title> 

        <script type="text/javascript" language="javascript"> 

//如果使用者選擇了圖檔，則顯示圖檔的預覽效果 

function previewImage() 

    var x = document.getElementById("file"); 

    if(!x || !x.value)//如果沒有選擇上傳檔案 

    { 

         return; 

     } 

        var patn = /\.jpg$|\.jpeg$|\.gif$/i; 

        if(patn.test(x.value))//如果上傳檔案的字尾是.jpg或.jpeg或.gif 

        {         

                var y = document.getElementById("img"); 

                if(y) 

                {             

                        y.src = 'file://localhost/' + x.value; 

                        y.style.display="block";    

                else 

                        var img=document.createElement('img');             

                        img.setAttribute('src','file://localhost/'+x.value);             

                        img.setAttribute('width','120');             

                        img.setAttribute('height','90');             

                        img.setAttribute('id','img');             

                        document.getElementById('form1').appendChild(img);             

                setTimeout("hidden()",5000); //5秒之後執行隐藏圖檔的javascript方法 

        else 

                alert("您選擇的似乎不是圖像檔案。");     

} 

//隐藏照片 

function hidden() 

        var y = document.getElementById("img"); 

        if(y) 

                document.getElementById('img').style.display="none"; 

                 <asp:FileUpload ID="file" runat="server" onchange="previewImage()" onmouseover="previewImage()" /> 

                <asp:Button ID="btnUpload" runat="server" Text="上傳" /></div> 

        說明一下，在這個頁面裡form表單的id是form1,上傳控件的id是file，是以在用戶端用到了document.getElementById()這個方法來擷取相關的控件的屬性值，并且通過javascript腳本動态添加了一個<img id=”img”>的控件，然後我們操縱它的src屬性來決定顯示哪張圖檔，利用它的style.display屬性來決定是否顯示。

以下預覽時的效果：

        預覽5秒鐘之後，不再帶有預覽功能的效果：

        注意：如果我們要上傳檔案，需要給表單增加enctype="multipart/form-data"屬性，如果我們使用了FileUpload控件時，生成HTML代碼時表單會自動加上這個屬性。

Literal控件

        Literal控件是一個類似于Label控件的控件，都是用來呈現文字的。前面我說過，雖然通過Response.Write()方法可以直接輸出文字，但是這樣輸出的文字有可能在<html></html>标記之外，破壞了網頁的結構，使之不再符合XHTML标準。

        對于靜态文字，我們可以直接在HTML代碼中書寫即可，而沒有必要使用Literal 控件或 Label 控件。但是在某些情況下我們卻希望在某個位置設定一些文字，那麼我們就可以先在期望輸出文字的地方放置一個Literal控件，将來在程式代碼中根據程式邏輯動态設定Literal控件的Text屬性來控制要輸出的文字。

        盡管在某種程度上，Literal 控件用法與 Label 控件用法類似，但是不同的是 Literal 控件不能用于将css樣式應用于顯示的文本。

        另外Literal 控件還有一個Mode屬性，它用來控制如何呈現Literal 控件中的内容。這個屬性是一個枚舉，有三個枚舉值：

PassThrough：直接呈現Literal 控件中的内容。

Encode：控件的内容轉換為 HTML 編碼的字元串。

Transform：從控件的内容中移除不受支援的标記語言元素。如果 Literal 控件在支援 HTML 或 XHTML 的浏覽器上呈現，則不會修改該控件的内容。

        舉例說明，假如Literal的Text屬性為“<abc>http://blog.csdn.net/zhoufoxcn</abc>”，即如下代碼：

<table border="1" width="600" cellpadding="1" cellspacing="1"> 

                <tr><td> 

                                Mode</td><td> 

                    效果</td></tr> 

                        PassThrough</td><td> 

                        <asp:Literal ID="Literal1" runat="server" Mode="PassThrough" Text="<abc>http://blog.csdn.net/zhoufoxcn</abc>"></asp:Literal></td></tr> 

                        Encode</td><td> 

                        <asp:Literal ID="Literal2" runat="server" Mode="Encode" Text="<abc>http://blog.csdn.net/zhoufoxcn</abc>"></asp:Literal></td></tr> 

                        Transform</td><td> 

                        <asp:Literal ID="Literal3" runat="server" Text="<abc>http://blog.csdn.net/zhoufoxcn</abc>"></asp:Literal></td></tr> 

                </table> 

        在浏覽器的效果如下：

        它們生成相關HTML代碼如下：

                        <abc>http://blog.csdn.net/zhoufoxcn</abc></td></tr> 

Panel控件

        Panel控件是一個容器控件，用來存儲一組容器控件，它常用來存放一組業務邏輯上相似的控件組。下面看一個例子，這個例子裡會根據使用者選擇的性别動态決定對象配偶的名字，如果是男性則讓填寫妻子的名字，如果是女性則讓填寫丈夫的名字，源視圖代碼如下：

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

        <title>無标題頁</title> 

                性别：<asp:RadioButton ID="rbMale" runat="server" AutoPostBack="True" Checked="True" OnCheckedChanged="RadioButton_CheckedChanged" Text="男" GroupName="sex" /> 

                <asp:RadioButton ID="rbFemale" runat="server" Text="女" AutoPostBack="True" GroupName="sex" OnCheckedChanged="RadioButton_CheckedChanged" /><br /> 

                <asp:Panel ID="pMale" runat="server" Height="50px" Width="125px"> 

                妻子姓名：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 

                </asp:Panel> 

                </div> 

                <asp:Panel ID="pFemale" runat="server" Height="50px" Width="125px" Visible="False"> 

                丈夫姓名：<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 

</html> 

        在這裡我們用了兩個RadioButton控件，并且設定了它們的GroupName屬性都為“sex”，表示這兩個RadioButton屬于一個分組，它們之中隻能有一個處于選中狀态，另外我們還設定了這兩個RadioButton控件的AutoPostBack屬性都為“true”，表示當它們的選擇狀态發生變化的時候，将會自動送出到伺服器進行處理，并且對于它們在伺服器端的處理都都使用了同一個方法RadioButton_CheckedChanged，背景代碼如下：

public partial class PanelDemo : System.Web.UI.Page 

void RadioButton_CheckedChanged() void RadioButton_CheckedChanged(object sender, EventArgs e) 

                //如果選擇的性别是“男”，則讓填寫妻子的姓名    

                if (rbMale.Checked) 

                        pMale.Visible = true; 

                        pFemale.Visible = false; 

                else//否則讓填寫丈夫的姓名    

                        pMale.Visible = false; 

                        pFemale.Visible = true; 

        程式的運作效果如下：

        選擇“女”之後的變化：

        我們可以檢視Panel控件生成的代碼：

<div> 

                性别：<input id="rbMale" type="radio" name="sex" value="rbMale" checked="checked" /><label for="rbMale">男</label> 

                <input id="rbFemale" type="radio" name="sex" value="rbFemale" onclick="javascript:setTimeout('__doPostBack(\'rbFemale\',\'\')', 0)" /><label for="rbFemale">女</label><br /> 

                <div id="pMale" style="height:50px;width:125px;"> 

                妻子姓名：<input name="TextBox1" type="text" id="TextBox1" /> 

</div> 

上面的代碼是當選擇“男”的時候生成的代碼，可見對于Panel控件在用戶端的代碼為一個<div>标記。

PlaceHolder控件

        PlaceHolder控件控件的作用和Panel控件的作用非常類似，也是用作容器控件，不過控件本身在用戶端不産生任何可見HTML标記。

        PlaceHolder控件有一個Controls屬性，這個屬性表示這個容器控件容納的控件的集合，Controls屬性是ControlCollection類的一個執行個體，這個類用Add()方法向集合中增加控件，用Remove()删除控件，還有一個Count屬性表示這個集合中總共有多少個控件。

        下面是一個PlaceHolder控件用法的例子，為了簡單起見，我沒有采用代碼和頁面分離的模式，代碼如下：

        protected void Page_Load(object sender, EventArgs e) 

                Button btn = new Button(); 

                btn.Text = "動态添加的控件"; 

                btn.Click += new EventHandler(btn_Click);//給動态添加的Button的單擊事件增加伺服器端方法 

                PlaceHolder1.Controls.Add(btn); 

        public void btn_Click(object sender, EventArgs e) 

                Literal l = new Literal(); 

                l.Text = "PlaceHolder1控件總共容納了" + PlaceHolder1.Controls.Count + "個控件"; 

                PlaceHolder1.Controls.Add(l); 

                <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder> 

        </div> 

        程式的運作結果：

        點選按鈕之後的效果：

        在沒有點選按鈕之前用戶端浏覽器得到的HTML代碼如下：

<head><title> 

無标題頁 

</title></head> 

        <form name="form1" method="post" action="PlaceHolderDemo.aspx" id="form1"> 

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTM2NTY5NjE1NWRkDxPVOfW9ygVx0MnTmn1nNCXGfWY=" /> 

                <input type="submit" name="ctl02" value="動态添加的控件" />PlaceHolder1控件總共容納了1個控件 

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLhoKDXAwKfwImNCxlfxrs8MWJR7ujk/rFzZ1UfCrph" /> 

</div></form> 

        小結：Panel和PlaceHolder作為控件的容器，在很多地方是相似的，不同的是PlaceHolder不會在用戶端産生任何可見的輸出，而Panel還可以設定背景圖檔等。

Label和Literal控件常用來顯示文字（也可以成為文本的容器哦），在很多地方是相似的，不過不能設定Literal的用戶端css樣式，并且Literal對顯示的文本的控制能力更靈活一些，利用Mode屬性可以友善地顯示HTML代碼。

本文轉自周金橋51CTO部落格，原文連結： http://blog.51cto.com/zhoufoxcn/166778，如需轉載請自行聯系原作者

前端開發 javascript .net c# 開發架構 容器 存儲 .net圖表控件 .net控制器 .net依賴注入 .net界面控件 .net新版本
上一篇: cisco動車組飛速實作存儲虛拟化
下一篇: Windows Server 2008搭建域環境---安裝活動目錄

繼續閱讀