dynamically add html tag in asp.net

Question

I need to add html tags dynamically in asp.net code behind , here is the scenario :

List<Product> products = ProductManager.GetProductList();//read data from database

Product is a class containing information I need to show in website such as product name, image,… . For adding html code I tried this to show 5 products per page :

String  finalHtmlCodeContainer="";
for(int i=0;i<=5;i++)
{
   String myBox= "<div class=\"box\"> </div>";
   finalHtmlCodeContainer+=mybox;
}
boxWrapper.InnerHtml=finalHtmlCodeContainer;

boxWrapper is a div that would contain our 5 product info.up to now everything is ok but problem appears when insted of "<div class=\\"box\\"> </div>" , myBox contains long characters of html code , the original myBox should include this:

<div class="boxWrapper">
                    <div class="box">
                        <div class="rightHeader">rightHeader</div>
                        <div class="leftHeader">leftHeader</div>

                        <div class="article">
                            <img src="../Image/cinemaHeader.jpg" />
                            <p>
                              some text here <!--product.content-->  
                            </p>
                          </div><!--end of article-->

                        <div class="rightFooter"><span>rightFooter</span>
                            <div class="info">
                                <ul>
                                    <li>item1</li>
                                    <li>item2</li>
                                    <li>item3</li>
                                </ul>
                            </div>
                        </div><!--end of rightFooter-->

                        <div class="leftFooter"><span>leftFooter</span>
                        </div><!--end of leftFooter-->

                    </div><!--end of box-->                 
                </div><!--end of boxWrapper-->

you see if i add producet.atrributes to code snippet above, it would be more messy,hard to debug , has less scalability and... . what is your solution?

Answer 1

It depends on the underlying product. If you are using web forms, I'd suggest using a data bound control that supports templating like the ListView or Repeater. It gives you full control over the UI, and also supports reloading the UI in ViewState. In your scenario, you'd have to build the UI on every postback. The ListView or Repeater track it in ViewState.

If you are using MVC, well using a helper method can make this easier as you can stick the item template within and then use a foreach and render out the helper.

If you are talking doing it in JavaScript, then there are templating components for doing the same thing.

Answer 2

I suggest you to Add repeater in your <p> tag ,

       <p>
        <asp:Repeater runat="server" ID="rpDetail">
          <ItemTemplate>
           <div class="box">
               <%# Eval("YourDataField") %>
           </div>
          </ItemTemplate>
          </asp:Repeater>
        </p>

And make your products list as Repeater's datasourse in code behind .

rpDetail.DataSource = products ;
rpDetail.DataBind();