Question

我正在尝试使用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课程item只包含两个div的课程col-lg-12。
每个div类col-lg-12只包含四个div，类col-sm-3。

问题是，我不知道如何在div col-lg-12下使用item创建第三个div。

在代码后面写循环HTML，C＃

0 个答案: