Html 格式化网格视图答案

【问题标题】：Html Formatting Grid ViewHtml 格式化网格视图
【发布时间】：2011-06-02 15:57:08
【问题描述】：

我正在尝试格式化我的网格视图，使其如下所示：

所以它看起来不像一个表格，它有 2 列和 3 行。提前致谢

【问题讨论】：

标签： asp.net gridview

【解决方案1】：

考虑将您的服务器控件切换到<asp:ListView>。与网格视图相比，这使您可以对标记进行精细控制。

这是一个很棒的ListView tutortial by the Gu。

【讨论】：

【解决方案2】：

我个人会使用asp:Repeater 控件，因为它可以让您更好地控制要显示的 html。

【讨论】：

【解决方案3】：

请改用asp:ListView。它允许使用模板项，这意味着您可以自己指定 HTML，同时仍然具有 asp:Repeater 所缺少的许多列表类型功能。

不过，列表视图是 .NET 3.5 的新功能，所以如果您使用的是旧版本，我只会使用中继器。两者都允许您指定自己的标记，您需要这样做才能呈现您的项目，如上所示。

【讨论】：

【解决方案4】：

如果必须使用 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

【讨论】：