2015年9月28日 星期一

實作動態加入AsyncFileUpload Control

●問題描述:
開發ASP.NET網站系統最常使用的檔案上傳元件為:AJAX Control Tool Kit的AsyncFileUpload Control,當實作頁面時可能遇到多資料列需要分別上傳檔案的情況

如果直接在頁面上嵌入很多的AsyncFileUpload Control,並不是王道的作法;本文試著將動態實作多個AsyncFileUpload Control的重點,說明如下:

一、UI頁面布置程式碼:
加入一組 Panel Control 即可

二、動態產生資料頁面如下:
 
三、實作『上傳檔案』按鈕的Click 或Command事件

protected void bu_Command(object sender, CommandEventArgs e)
 {
        Button bu = (Button)sender;
        string id = bu.ID.TrimStart(new char[] { 'b', 'u' });
        uploadHF.Value = id;
        Panel1.Controls.Clear();
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "reroll", "__doPostBack();", true);

}

四、實作Post Back 後Page Load 動態加入AsyncFileUpload Control

if (string.IsNullOrEmpty(uploadHF.Value) == false)
{

  string id = uploadHF.Value;
  string fid = string.Format("up_{0}", id
);//上傳檔案按鈕的容器ID
  AsyncFileUpload afu = new AsyncFileUpload();
  afu.Width = Unit.Percentage(60);
  afu.ID = "afu" + id;
  afu.UploadedComplete += AsyncFileUpload1_UploadedComplete;
  afu.UploadedFileError += AsyncFileUpload1_UploadedFileError;
  afu.OnClientUploadComplete = "UploadComplete";
  //afu.ThrobberID = im.ID;
  Page.Master.FindControl("ContentPlaceHolder1").FindControl("Panel1").FindControl (fid).Controls.Add(afu);

}

補充說明:此區塊還需要實作
1、AsyncFileUpload1_UploadedComplete
2、AsyncFileUpload1_UploadedFileError
3、UI頁面上的UploadComplete
以上的實作程式碼網路上很多範例這裡不再臚列。

五、完成頁面點選『上傳檔案』示例














※實作重點:必須在Page_Load事件中動態加入AsyncFileUpload Control

沒有留言: