Question

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

enter image description here

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

Answer 1

考虑将服务器控件切换为<asp:ListView>。与gridview相比，这使您可以精确控制标记。

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

Answer 2

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

listview是.NET 3.5的新功能，所以如果您使用的是旧版本，我只会使用转发器。两者都允许您指定自己的标记，在上面显示项目时，您需要执行这些标记。

Answer 3

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

Answer 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

Html格式化网格视图

4 个答案: