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是一个包含我们的5个产品信息的div.up现在一切正常但是当"<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();

在asp.net中动态添加html标签

2 个答案: