动态添加控件可以使代码达到最佳状态

Question

In a website I am designing I need to show images which I upload using asp:FileUpload control. So after uploading I am adding div, img and textarea using a string builder and then loading it into panel which I have already created. So is it better to use Stringbuilder to load inner HTML or is it good to use HtmlgenericControls to add the controls like image and textarea. I am using C#. My current coding way is as follows:

Frontend:

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

<div class="transbox" id="mainbk" runat="server" style="position:absolute; top:0px; left:0px; width: 100%; height: 100%;" >
  <asp:FileUpload runat="server" ID="UploadImages" style="background-color:white; position:absolute; font-family:'Palatino Linotype'; font-size:medium; top: 4px; left: 350px; right: 251px;" Width="500px" AllowMultiple="true"/>
    <asp:Button runat="server" ID="uploadedFile" style="position:absolute;  font-family:'Palatino Linotype'; font-size:medium; top: 4px; left: 870px; width: 112px; height: 29px;" Text="Upload" OnClick="uploadFile_Click" />
    <asp:Panel ID="updtpanel" runat="server" CssClass="transbox" style="width:100%;height:100%;left:0px;top:0px;position:absolute" Visible="false">

    </asp:Panel>
 </div>


</form>

and backend is as follows:

protected void uploadFile_Click(object sender, EventArgs e)
{
    if (UploadImages.HasFiles)
    {
       int tid = 0;

       string fileExt = Path.GetExtension(UploadImages.FileName).ToLower();
       if (fileExt == ".jpeg" || fileExt == ".png" || fileExt == ".jpg" || fileExt == ".bmp")
       {
           HtmlGenericControl d = new HtmlGenericControl("div");
           Button btnsave = new Button();
           btnsave.Text = "Save";


           sb.Append("<div class=" + "\"savback\"" + ">");
           sb.Append("<div class=" + "\"head\"" + ">Write Description</div>");

           foreach (HttpPostedFile uploadedFile in UploadImages.PostedFiles)
           {
               id += 1;
               tid = tid + 1;
               string textid = "txt" + tid;
               filepath = Server.MapPath("~/Images/Gallery/" + uploadedFile.FileName);
               uploadedFile.SaveAs(filepath);
               newpath = "../Images/Gallery/" + uploadedFile.FileName;
               try
               {
                   updtpanel.Visible = true;

                   sb.Append("<div class=" + "\"dataload\"" + ">");
                   sb.Append("<img class=" + "\"loadimg\"" + "src=" + "\"" + newpath.ToString() + "\"" + " />");
                   sb.Append("<textarea  class=" + "\"txtdes\"" + "id=" + "\"" + textid + "\"" + "></textarea>");
                   sb.Append("</div>");


               }

               catch (Exception ex)
               {
                   Response.Write(ex.Message);
               }

           }

           sb.Append("</div>");
           d.InnerHtml = sb.ToString();

           updtpanel.Controls.Add(d);
           updtpanel.Controls.Add(btnsave);
       }
       else
       {
           Page.ClientScript.RegisterStartupScript(GetType(), "msgbox", "alert('Please Select only Image Files!!');", true);
       }

    }
    else
    {
        Page.ClientScript.RegisterStartupScript(GetType(), "msgbox", "alert('Please Select a File First!!');", true);        
    }
}

Please let me know which will be the good way of creating dynamic controls??

Answer 1

Optimal code:

• Doesn't contain more than 50 lines of difficult to read code (agreed, it's not unreadable, but still, minor refactoring would help),

• Doesn't mix CSS with HTML, together with presentation-related HTML attributes such as width ,

• Doesn't use the JavaScript alert .

Let's get back to your question. Which one is better : StringBuilder or HtmlGenericControl ?

Better being an extremely vague term, let's answer a bunch of slightly different questions:

1. Which one is faster ?

   Probably StringBuilder , given that it doesn't matter. At all. Compared to the time spent downloading an image (say two seconds, ie 2 000 ms.), the comparison in performance between StringBuilder and HtmlGenericControl will be very probably less than a millisecond. Is it important that you waste 1 ms. on a process which takes 2 000 ms.?

2. Which one is safer ?

   How many errors do you spot in the following code?

    sb.Append("<div class=\\"illustration\\"><span-class=\\"contents\\">") .Append("<img class=" + "\\"loadimg\\"" + "srv=" + "\\"" + newpath + "\\"" + ">") .Append("/div></span>"); 

   Let's see:

   • div and span are inverted,
   • the closing div is missing the '<' character,
   • img is missing '/' (if the output is XHTML),
   • there is a typo in src written as srv ,
   • span-class should have been span class ,
   • there is no space before src ( srv ).

   Nearly every of those mistakes could have been easily avoided by letting .NET Framework the task of generating HTML from strongly typed objects.

3. Which one is more readable ?

   IMO, neither. HTML code can be written in a clean way, making it extremely readable. In the same way, it would be easy to be lost in all those calls to embedded controls if the code is a piece of crap.

4. Which one is more reliable ?

   .NET Framework is assumed to be heavily tested and particularly reliable, at least compared to average business applications. The more you confide to .NET Framework, the better, unless you know how to do better and you've tested your approach, submitted it for pair reviews, etc.

   In the case of StringBuilder , you can hardly unit-test your code. Letting .NET Framework do the HTML generation in your place means that you can concentrate more on the actual objects you manipulate, and testing them is slightly easier.

So, what is the single best solution ?

Personally, if I were stick with classical ASP.NET (by contrast to ASP.NET MVC), I would create a dedicated control with an HTML template .

If for some reasons, this is not possible, then pick HtmlGenericControl : it abstracts the HTML and let you concentrate on the objects themselves.

If you had a requirement to write clean, readable HTML code, HtmlGenericControl would be a burden, and you would have to pick string concatenation or some templating system . ASP.NET controls are known for generating not-so-good HTML code. Given the HTML code in your question, this limitation doesn't apply to your case.