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格式网格视图

回答

相关问题