HTML格式網格視圖

3

考慮將您的服務器控件切換到<asp:ListView>。與GridView相比，這使您可以精確控制標記。

這是一個很棒的ListView tutortial by the Gu。

來源

2011-06-02 16:00:56

1

改爲使用asp:ListView。它允許模板項目，這意味着您可以自己指定HTML，同時仍具有許多列表類型功能，例如asp:Repeater將缺少。

但是，listview是.NET 3.5的新功能，所以如果您使用的是舊版本，我只需使用中繼器。兩者都允許您指定您自己的標記，您需要按照上面顯示的方式呈現您的項目。

來源

2011-06-02 16:00:08

1

我個人會使用asp:Repeater控件，因爲這樣可以更好地控制要顯示的html。

來源

2011-06-02 16:06:14

1

如果使用GridView的是強制性的，你可以這樣做：

<h2> 
    GridView 
</h2> 
<asp:GridView id="MyList" CssClass="Grid" AutoGenerateColumns="false" runat="server"> 
    <Columns> 
     <asp:TemplateField> 
      <ItemTemplate> 
       <div class="item_container"> 
        <div class="image_container"> 
         <asp:Image ImageUrl='<%# Eval("ImageUrl") %>' runat="server"/> 
        </div> 
        <div class="link_text_container"> 
         <asp:HyperLink Text="Some Link" NavigateUrl='<%# Eval("Link") %>' runat="server" /><br /> 
         <asp:Label Text='<%# Eval("Text") %>' runat="server" /> 
        </div> 
        <div class="datetime_container"> 
         <asp:Label Text='<%# Eval("DateTime") %>' runat="server" /> 
        </div> 
       </div> 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView>

僅用於演示的目的，在後面的代碼，你可以這樣做：

public class Item 
{ 
    public string ImageUrl { get; set; } 
    public string Link { get; set; } 
    public string Text { get; set; } 
    public string DateTime { get; set; } 
} 

public partial class _Default : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
     if (!IsPostBack) 
     { 
      Item[] items = new Item[5]{ new Item() 
             { 
              ImageUrl="img/imageplaceholder.jpg", 
              Link="~/somelink1.html", 
              Text="Some Text 1", 
              DateTime=DateTime.Now.ToShortDateString() 
             }, 
            new Item() 
             { 
              ImageUrl="img/imageplaceholder.jpg", 
              Link="~/somelink2.html", 
              Text="Some Text 2", 
              DateTime=DateTime.Now.ToShortDateString() 
             }, 
            new Item() 
             { 
              ImageUrl="img/imageplaceholder.jpg", 
              Link="~/somelink3.html", 
              Text="Some Text 3", 
              DateTime=DateTime.Now.ToShortDateString() 
             }, 
            new Item() 
             { 
              ImageUrl="img/imageplaceholder.jpg", 
              Link="~/somelink4.html", 
              Text="Some Text 4", 
              DateTime=DateTime.Now.ToShortDateString() 
             }, 
            new Item() 
             { 
              ImageUrl="img/imageplaceholder.jpg", 
              Link="~/somelink5.html", 
              Text="Some Text 5", 
              DateTime=DateTime.Now.ToShortDateString() 
             } 
            }; 

      MyList.DataSource = items; 
      MyList.DataBind(); 
     } 
    } 
}

，並使用以下CSS ：

table 
{ 
    table-layout:fixed; 
    width:100%; 
} 

.item_container 
{ 
    width: 700px; 
    background-color:#FFE5FF; 
} 

.image_container 
{ 
    width:100px; 
    float:left; 
} 

.link_text_container 
{ 
    width: 600px; 
    float: left; 
    background-color:#E5FFF2; 
} 

.datetime_container 
{ 
    width: 100%; 
    clear:both; 
    background-color:#B3ECFF; 
}

它會產生一個GridView所需的佈局，但的確，asp：ListView是一個更好的選擇。

GridView Layout http://i53.tinypic.com/2l5l5s.jpg

來源

2011-06-02 17:42:33 outlookrperson

HTML格式網格視圖

回答

相關問題