實作動態加入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