динамически добавлять HTML теги в asp.net

Question

мне нужно добавить HTML-теги динамически в asp.net код позади, вот сценарий:

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, который будет содержать наш info.up 5 продуктов, чтобы теперь все в порядке, но проблема возникает, когда InstEd из "<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

Это зависит от базового продукта. Если вы используете веб-формы, я бы предложил использовать связанный с данными элемент управления, который поддерживает шаблоны, такие как ListView или Repeater. Он дает вам полный контроль над пользовательским интерфейсом, а также поддерживает перезагрузку пользовательского интерфейса в ViewState. В вашем сценарии вам нужно будет создать пользовательский интерфейс при каждой обратной передаче. 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 список как datasourse Repeater в коде позади.

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