在asp.net中動態添加html標簽

Question

我需要在asp.net代碼后面動態添加html標簽，這是場景：

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

Product是一類，其中包含我需要在網站上顯示的信息，例如產品名稱，圖片等。 為了添加html代碼，我嘗試了此操作以每頁顯示5個產品：

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

boxWrapper是一個div，其中將包含我們的5個產品信息。到目前為止，一切正常，但是在插入"<div class=\\"box\\"> </div>" ， myBox包含html代碼的長字符，原始的myBox應該包含以下內容：

<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-->

你看我是否在上面的代碼片段中添加了producet.atrributes ，它會變得更加混亂，難以調試，可伸縮性更差……。 您有什么解決方案？

Answer 1

它取決於基礎產品。 如果您使用的是Web表單，建議您使用一個支持模板的數據綁定控件，例如ListView或Repeater。 它使您可以完全控制UI，還支持在ViewState中重新加載UI。 在您的方案中，您將必須在每個回發上構建UI。 ListView或Repeater在ViewState中對其進行跟蹤。

如果您使用的是MVC，那么很好地使用幫助程序方法可以使此操作更容易，因為您可以將項目模板粘貼在其中，然后使用foreach並渲染出該幫助程序。

如果您正在談論使用JavaScript進行操作，則可以使用模板組件來執行相同的操作。

Answer 2

建議您在<p>標記中添加中繼器，

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

並在后面的代碼中將您的products列為Repeater的數據源。

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