在列表中顯示數據到表

Question

我在我的網頁上有一個表格，我想在row1中顯示我的圖像，並在row1中顯示圖像的細節。當圖像被調用時，我將圖像的細節添加到列表中。有9行的表格有27個圖像。圖像準備就緒後，我開始顯示它的細節，這些都存儲在列表中。

<% 
    if (Model.Item.Count() < 1) return; 

    int iIntialColum = 3;//set number of column per table 

    if (Model.Item.Count < 3) 
     iIntialColum = Model.Item.Count();  

    int iNumCollum = iIntialColum; //further use 

    int iNumRow = 0; 
    int iLastRow = 0; 

    iNumRow = (Model.Item.Count()/iNumCollum);//find number of row to interate 
    iLastRow = (Model.Item.Count() % iNumCollum);//find last row if exist 

    if(iLastRow > 0) 
     iNumRow += 1; 

    int iStartIndex = 0;  
%> 

<div class="productlist"> 
    <table cellpadding="0" cellspacing="0" width="100%" class="productlist" style="margin-left:7px;"> 

    <% 
     List<Item> list = new List<Item>(); 
     for(int j = 0; j < iNumRow; j++) { %> 
      <tr style="margin-left:20px;">  
       <% for(int i = iStartIndex; i < iNumCollum; i++) { 
        string _linke = ""; 

        if(string.IsNullOrEmpty(Request.QueryString["ws"])) { 
         _linke = Url.Action(Model.ActionName, Model.ControllerName, 
          new { 
           id = Model.Item[i].ID, 
           dep = Model.Item[i].DepartmentID, 
           cat = Model.Item[i].CategoryID, 
           tab = Model.Tab 
          } 
         );      
        } 
        else { 
         _linke = Url.Action(Model.ActionName, Model.ControllerName, 
          new { 
           id = Model.Item[i].ID, 
           dep = Model.Item[i].DepartmentID, 
           cat = Model.Item[i].CategoryID, 
           tab = Model.Tab, 
           ws = Request.QueryString["ws"].ToString() 
          } 
         ); 
        } %> 

        <td align="left" valign="top" style="padding-left:0px; padding-top:0px; border:1px dotted #CCCCCC; "> 
         <div style="width:200px; text-align:center;margin-left:7px; height:auto;" class="border-listing-product"> 
          <% if ((Model.Item[i].Brand.IsAuthorized == true) && ((HelperClass.ICEContact.PathBrandImages+ Model.Item[i].Brand.Image)!= null)) { %> 
           <div style="text-align:right; padding-right:15px; padding-top:5px;height:35px;"> 
            <img src="<%:HelperClass.CheckImageUrlExist(HelperClass.ICEContact.PathBrandImages+ Model.Item[i].Brand.Image)%>" width = "85px"/> 
           </div>  
          <%} 
          else {%> 
           <div style="text-align:right; padding-right:15px; padding-top:5px; height:35px;"> 
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
           </div> 
          <% } %> 

          <div style="padding-top:20px;"> 
           <!-- New product notification -------> 
           <% if(HelperClass.IsNewProduct(Convert.ToDateTime(Model.Item[i].RegisterDate))){ %> 
            <div class="newproduct">       
             <a href="<%: _linke %>"> 
              <img src = "<%: HelperClass.ICEContact.PathProductImages+"newproduct.png"%>" alt="New Item" width="35px" height="35px" /> 
             </a> 
            </div> 
           <% } %> 

           <!-- detecting the existing of image --> 
           <a href="<%: _linke %>" style="text-decoration:none"> 
            <% 
             //Model.Item[i].Brand.IsAuthorized 
             if (!string.IsNullOrEmpty(Model.Item[i].PictureName)) { %>   
              <img width="135px" src="<%:HelperClass.CheckImageUrlExist(HelperClass.ICEContact.PathProductImages+Model.Item[i].PictureName)%>" alt="<%: Model.Item[i].Name %>"/> 
             <% } 
             else { %> 
              <img width="135px" height="100px" src="<%:HelperClass.NoImagePath %>" alt="No Image"/>    
             <% } 
            %> 
           </a> 
          </div> 
          <br style="clear: both;" /> 
          <!-- start new --> 

          <% list.Add(Model.Item[i]);%> 
          <!-- end new --> 
         </div>         
        </td> 
       <% } 

       iStartIndex = iNumCollum;   
       iNumCollum += iIntialColum; 

       if (iNumCollum > Model.Item.Count())//make sure that Index is not out of range {     
        iNumCollum = Model.Item.Count() ;     
       } %>   
      </tr> 

      <% 
       int k = 0; 
       foreach(var bb in list) { 
        if (k % 3 == 0) { %> 
         <tr style="margin-left:20px;"> 
          <td align="left" valign="top" style="padding-left:0px; padding-top:0px; border:1px dotted #CCCCCC;"> 
           <% Response.Write(bb.Name); %> 
          </td> 
        <% } 
        else { %> 
         <td align="left" valign="top" style="padding-left:0px; padding-top:0px; border:1px dotted #CCCCCC;"> 
          <%Response.Write(bb.Name);%> 
         </td> 
        <% } 
        k++; 
       } 
      %> 
      </tr> 
      <% 
       iStartIndex = iNumCollum;   
       iNumCollum += iIntialColum; 

       if (iNumCollum > Model.Item.Count()) { //make sure that Index is not out of range      
        iNumCollum = Model.Item.Count() ;     
       } 
      %> 
      </tr> 

      <% if (j < iNumRow - 1) { } 

     } 
    </table><br />      
</div> 

Answer 1

如果你打算做這種方式，您可以通過使用ASP簡化你的方法：Repeater控件：http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.repeater.aspx

看看這個例子：

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.repeater(v=vs.71).aspx

然後，您可以避免循環，並在ASPX中構建您的表格，這將使維護更加輕鬆。

例如：

<asp:Repeater id=Repeater1 runat="server"> 
     <HeaderTemplate> 
     <table border=1> 
      <tr> 
       <td><b>Company</b></td> 
       <td><b>Symbol</b></td> 
      </tr> 
     </HeaderTemplate> 

     <ItemTemplate> 
     <tr> 
      <td> <asp:Image runat="server" id="MyImage" /></td> 
      <td> <asp:Literal runat="server" id="SomeTextLiteral" /></td> 
     </tr> 
     </ItemTemplate> 

     <FooterTemplate> 
     </table> 
     </FooterTemplate> 

    </asp:Repeater> 

在後面的代碼，處理Repeater1_ItemDataBoundEvent，你可以做這樣的事情，看看檢查，如果你有你期待的對象，並在ItemTemplate，

查找控制

見http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.repeater.itemdatabound.aspx

您可以通過執行找到圖像控制：

var image = e.Item.FindControl("MyImage") 

並適當地設置src。

很多選擇，你有一個清晰的演示文稿和代碼分離。