C# 用代码隐藏C编写循环HTML

C# 用代码隐藏C编写循环HTML,c#,html,asp.net,twitter-bootstrap,C#,Html,Asp.net,Twitter Bootstrap,我正在尝试使用C语言中的代码生成此HTML: <div class="carousel-inner" runat="server" id="divCategory"> <div class="item active"> <div class="col-lg-12"> <div class="col-sm-3"> <img src="1-1.png" /><br />

我正在尝试使用C语言中的代码生成此HTML:

<div class="carousel-inner" runat="server" id="divCategory">
   <div class="item active">
      <div class="col-lg-12">
         <div class="col-sm-3">
            <img src="1-1.png" /><br />
            item 1
         </div>
         <div class="col-sm-3">
             <img src="1-2.png" /><br />
            item 2
         </div>
         <div class="col-sm-3">
             <img src="1-3.png" /><br />
            item 3
         </div>
         <div class="col-sm-3">
             <img src="1-4.png" /><br />
            item 4
         </div>
      </div>

      <div class="col-lg-12">
         <div class="col-sm-3">
            <img src="1-5.png" /><br />
            item 5
         </div>
         <div class="col-sm-3">
            <img src="1-6.png" /><br />
            item 6
         </div>
         <div class="col-sm-3">
            <img src="1-7.png" /><br />
            item 7
         </div>
         <div class="col-sm-3">
            <img src="1-8.png" /><br />
            item 8
         </div>
      </div>
   </div>

   <div class="item">
      <div class="col-lg-12">
           <div class="col-sm-3">
              <img src="2-1.png" /><br />
            item 9
           </div>

           <div class="col-sm-3">
              <img src="2-2.png" /><br />
            item 10
           </div>
           <div class="col-sm-3">
              <img src="2-3.png" /><br />
            item 11
           </div>
           <div class="col-sm-3">
              <img src="2-4.png" /><br />
            item 12
           </div>
      </div>
      <div class="col-lg-12">
         <div class="col-sm-3">
            <img src="2-5.png" /><br />
            item 13
         </div>
         <div class="col-sm-3">
           <img src="2-6.png" /><br />
            item 14
         </div>
         <div class="col-sm-3">
            <img src="2-7.png" /><br />
            item 15
         </div>
         <div class="col-sm-3">
            <img src="2-8.png" /><br />
            item 16
         </div>
      </div>
   </div>
</div>
这就是我到目前为止所做的:

protected void Page_Load(object sender, EventArgs e)
{
   HtmlGenericControl divItem = new HtmlGenericControl("div");
   divItem.Attributes["class"] = "item active";

   HtmlGenericControl divItem2 = new HtmlGenericControl("div");
   divItem2.Attributes["class"] = "item";

   HtmlGenericControl divColumnH = new HtmlGenericControl("div");
   divColumnH.Attributes["class"] = "col-lg-12";

   MySqlDataReader dr = runQuery("SELECT * FROM category");

   while (dr.Read())
   {
      HtmlGenericControl divColumnD1 = new HtmlGenericControl("div");
      divColumnD1.Attributes["class"] = "col-sm-3";

      Image img = new Image();
      img.ImageUrl = dr["logoURL"].ToString();

      Label lbl1 = new Label();
      lbl1.Text = "<br>" + dr["name"].ToString();

      divCategory.Controls.Add(divItem);
      divItem.Controls.Add(divColumnH);
      divColumnD1.Controls.Add(img);
      divColumnD1.Controls.Add(lbl1);   
   }
   ConnectionClose();
}
图像URL和图像标签从数据库中获取。 每个具有类项目的div仅包含两个具有col-lg-12类的div。 col-lg-12类的每个div仅包含四个col-sm-3类div。
问题是,我不知道如何在div项下使用col-lg-12创建第三个div。

我猜只有col-lg-12类才包含2个div意味着只有col-lg-12类才包含2个div,我认为这样在代码中生成HTML是个坏主意。你是必须这样做,还是可以使用其他替代方案?我建议使用WebUserControl,并为div提供一个中继器。请查看System.Web.Mvc命名空间中的TagBuilder类。@HanletEscaño不,不必使用代码隐藏。谢谢你的建议,我是repeater和webusercontrol的新手,现在正在学习:据我所知,你想在4列结构中列出你的项目。可以使用asp.net数据控件设置列号。或者您可以在中继器中使用html模板。