Anthem.NET(我的介紹和比較,還有一篇)剛剛發(fā)布了其最新的1.5版本,其中很不錯(cuò)的一個(gè)新功能就是對(duì)文件上傳功能的Ajax實(shí)現(xiàn)。本文將簡(jiǎn)要介紹一下該功能的使用方法。
Anthem.NET的下載與安裝
Anthem.NET可以在此下載:http://sourceforge.net/project/showfiles.php?group_id=151897&package_id=168043&release_id=493609
下載之后解壓縮至硬盤(pán)中的某一目錄中,編譯項(xiàng)目得到Anthem.dll。然后將其拷貝到Web站點(diǎn)的bin目錄下:
打開(kāi)Web站點(diǎn)的Web.config文件,在configuration>\ <system.web>\ <pages>\ <controls>中添加如下一行,注冊(cè)Anthem.NET控件:
<add tagPrefix="anthem" namespace="Anthem" assembly="Anthem"/>
Anthem.NET提供了一套自己就帶有Ajax功能的、繼承于現(xiàn)有ASP.NET控件的服務(wù)器端控件。根據(jù)上面在web.config文件中的注冊(cè),這部分控件的前綴為anthem。
Anthem.NET支持ASP.NET 1.1和ASP.NET 2.0,不過(guò)本文的示例程序均基于ASP.NET 2.0。
普通的ASP.NET文件上傳
先看一下普通的ASP.NET文件上傳功能的實(shí)現(xiàn),代碼如下:
<asp:FileUpload ID="defaultFileUpload" runat="server" />
<asp:Button ID="defaultUploadButton" runat="server"
OnClick="defaultUploadButton_Click" Text="Upload" />
<asp:Label ID="defaultResultLabel" runat="server" Text=""></asp:Label>
后臺(tái)代碼,只是簡(jiǎn)單地將文件名和文件大小顯示出來(lái):
protected void defaultUploadButton_Click(object sender, EventArgs e)
{
defaultResultLabel.Text = string.Format("File \"{0}\" uploaded ({1} bytes).",
defaultFileUpload.FileName,
defaultFileUpload.FileBytes.Length
);
}
Anthem.NET的Ajax文件上傳
Anthem.NET中的Ajax文件上傳功能靠的是其自己的FileUpload控件,其實(shí)使用起來(lái)和普通的ASP.NET FileUpload控件差不多,下面是HTML部分的代碼:
<anthem:FileUpload ID="anthemFileUpload" runat="server" />
<anthem:Button ID="anthemUploadButton" TextDuringCallBack="uploading..." EnabledDuringCallBack="false"
runat="server" Text="Upload" OnClick="anthemUploadButton_Click" />
<anthem:Label ID="anthemResultLabel" runat="server" Text=""></anthem:Label>
注意控件的前綴都是anthem。那個(gè)Button的TextDuringCallBack屬性設(shè)置了異步回送時(shí)按鈕中的文本;EnabledDuringCallBack屬性讓該按鈕在進(jìn)行異步回送時(shí)禁用,免得用戶等得不耐煩。
后臺(tái)代碼同樣是將文件名和文件大小顯示出來(lái),不過(guò)注意這一句anthemResultLabel.UpdateAfterCallBack = true;,用來(lái)在回調(diào)之后更新anthemResultLabel上的文字:
protected void anthemUploadButton_Click(object sender, EventArgs e)
{
anthemResultLabel.Text = string.Format("File \"{0}\" uploaded ({1} bytes).",
anthemFileUpload.FileName,
anthemFileUpload.FileBytes.Length
);
anthemResultLabel.UpdateAfterCallBack = true;
}
示例程序演示
示例程序的界面如下,上面部分是普通的ASP.NET文件上傳,下面是Anthem.NET的Ajax文件上傳:
使用普通的ASP.NET文件上傳,可以看到頁(yè)面有一次閃爍,不過(guò)上傳功能沒(méi)什么問(wèn)題:
而使用下面部分的Anthem.NET的Ajax文件上傳,可以看到上傳時(shí)的界面(按鈕禁用,文本變化):
上傳完成之后,沒(méi)有頁(yè)面閃爍:
打開(kāi)Fiddler看看HTTP請(qǐng)求,上面的是傳統(tǒng)上傳,下面是Ajax的,差別顯而易見(jiàn)……
代碼下載
本文提到的完整的示例程序代碼:http://www.cnblogs.com/Files/dflying/AnthemNETFileUploadDemo.zip
更多參考資料
Anthem.NET官方網(wǎng)站:http://sourceforge.net/projects/anthem-dot-net/
Anthem.NET在線文檔:http://anthem-dot-net.sourceforge.net/docs/
Anthem.NET在線示例程序:http://anthem.talloaksoftware.com/Default.aspx
Fiddler官方網(wǎng)站:http://www.fiddlertool.com/
聯(lián)系客服