动态展现控件个数【DataList】

　　最近在项目里遇到一个小功能，在一个图片上传的需求上，需要根据选择的数字，动态展现图片上传控件的个数，以及对应的显示信息，包括上传得文件、图片大小的设置。

　　正好之前看到过DataList的应用，刚好可以拿出来用，上代码

　　前台代码，DropDownList让用户选择需要显示的上传控件的个数，DataList用于展现控件

Picture Item Count:
    <asp:DropDownList ID="ddlPictureCount" runat="server" OnSelectedIndexChanged="ddlPictureCount_SelectedIndexChanged"
        AutoPostBack="true">
    </asp:DropDownList>
    <asp:Label ForeColor="Red" ID="lblPictureCountTips" runat="server"></asp:Label>
    <asp:DataList ID="dltData" runat="server" Width="100%">
        <ItemTemplate>
            <div style="float: left">
                <asp:FileUpload runat="server" ID="fudUpload" />
            </div>
            <div style="float: left;">
                <%--Top--%><asp:TextBox ID="txtPicTop" runat="server" Width="40px" Visible="false"></asp:TextBox>
                <%--Left--%><asp:TextBox ID="txtPicLeft" runat="server" Width="40px" Visible="false"></asp:TextBox>
                Height<asp:TextBox ID="txtPicHeight" runat="server" Width="40px"></asp:TextBox>
                Width<asp:TextBox ID="txtPicWidth" runat="server" Width="40px"></asp:TextBox>
            </div>
            <asp:Label ID="lblUploadFileInfo" runat="server" Style="margin-top: 5px;" Height="27px"></asp:Label>
        </ItemTemplate>
    </asp:DataList>
    <div>
        <asp:Button ID="btnUpload" runat="server" Text="Upload" CssClass="button" OnClick="btnUpload_Click" />
    </div>

　　配合DropDownList的SelectChange事件，改变DataList显示的行数

protected void ddlPictureCount_SelectedIndexChanged(object sender, EventArgs e)
    {
        try
        {
            BindGrid();
        }
        catch (Exception ex)
        {
            string message = String.Format("LetterUpload ddlPictureCount_SelectedIndexChanged Error:" + ex.Message);
            this.JsAlert(message);
        }
    }


    private void BindGrid()
    {
        int count = Convert.ToInt32(ddlPictureCount.SelectedValue);
        DataTable dt = new DataTable();
        for (int i = 0; i < count; i++)
        {
            dt.Rows.Add(dt.NewRow());
        }
        dltData.DataSource = dt;
        dltData.DataBind();
    }

　　后台按钮事件

  foreach (DataListItem item in dltData.Items)
        {
            System.Web.UI.WebControls.FileUpload UploadControl = GetItemControl<System.Web.UI.WebControls.FileUpload>(item, "fudUpload");

            Label lblFileInfo = GetItemControl<System.Web.UI.WebControls.Label>(item, "lblUploadFileInfo");

            if (!UploadControl.HasFile)
            {
                lblFileInfo.Text ="";
                continue;
            }
            string strAttachPath = string.Empty;
            //记录图片大小
            int picHeight = 0;
            int picWidth = 0;
            string extension = Path.GetExtension(UploadControl.PostedFile.FileName);
            switch (extension.ToLower())
            {
                case ".gif":
                case ".jpg":
                case ".png":
                case ".bmp":
                    try
                    {
                        using (System.Drawing.Image myImage = System.Drawing.Image.FromStream(UploadControl.PostedFile.InputStream))
                        {
                            picHeight = myImage.Height;
                            picWidth = myImage.Width;

                            //设置图片默认值
                            if (picHeight == 0)
                                picHeight = 200;
                            if (picWidth == 0)
                                picWidth = 200;
                        }

                        strAttachPath = service.UploadLetterFile(UploadControl).Replace("[letterhost]", System.Web.HttpContext.Current.Request.Url.Host);
                         //显示上传的文件名
                        lblFileInfo.Text = UploadControl.FileName;
                    }
                    catch
                    {
                        // 无法读取图片的尺寸，可能不是一个图片或照片。 
                        Utility.AlertInUpdatePanel(this.updatePanel, "Alert", "Can Not Load Picture's Size，" + UploadControl.PostedFile.FileName + "May be Not A Picture!");
                        continue;
                    }

                    break;
                default:
                    Utility.AlertInUpdatePanel(this.updatePanel, "Alert", "Please Upload Picture Files:.gif/.jpg/.png/.bmp!");
                    continue;
            }

            int Top = 0;
            int.TryParse(GetItemControl<TextBox>(item, "txtPicTop").Text.Trim(), out Top);
            int Left = 0;
            int.TryParse(GetItemControl<TextBox>(item, "txtPicLeft").Text.Trim(), out Left);

            try
            {
                //int Height = 0;
                if (GetItemControl<TextBox>(item, "txtPicHeight").Text.Trim() != "")
                    int.TryParse(GetItemControl<TextBox>(item, "txtPicHeight").Text.Trim(), out picHeight);
                //int Width = 0;
                if (GetItemControl<TextBox>(item, "txtPicWidth").Text.Trim() != "")
                    int.TryParse(GetItemControl<TextBox>(item, "txtPicWidth").Text.Trim(), out picWidth);
                //end sky.chen
                Picture = new LetterPicEntity();
                Picture.LetterPicGuid = Guid.NewGuid().ToString();
                Picture.AttachPath = strAttachPath;
                Picture.TopSpace = Top;
                Picture.LeftSpace = Left;
                Picture.Height = picHeight;
                Picture.Width = picWidth;
                PictureList.Add(Picture);
            }
            catch
            {
                throw new Exception("图片高度、长度不是数字类型");
            }



        }
      
        SetSessionData(this.Page, "PictureList", PictureList);
    }

　　GetItemControl方法用于根据ID获取控件

 private T GetItemControl<T>(DataListItem currentItem, string controlID)
    {
        object obj = currentItem.FindControl(controlID);
        return (T)obj;
    }

　　上传得动作中，会遍历DataList，然后处理每一行的数据，抓取FileUpload、TextBox、Label等控件，做相应的动作，可能是判断、可能是保存。

　　上几个效果图

　　默认显示两个上传控件，后面可以输入数字，设定图片显示的高、宽

　　选择文件，点击Upload，可以在后面看到上传了哪些文件

　　重新选择DropDownList值，重新列出控件

　　页面比较丑陋，仅供参考学习