Html Formatting Grid View

I'm trying to format my grid view so it looks like the follow开发者_开发百科ing:

so instead of looking like a table it has 2 columns and 3 rows. Thanks in advance

Consider switching your server control to an <asp:ListView>. This gives you granular control over your markup, compared to a gridview.

Here's a great ListView tutortial by the Gu.

I would personally use a asp:Repeater control as that gives you greater control over the html you want to display.

Use an asp:ListView instead. It allows for template items, meaning you can specify the HTML yourself while still having much of the list-type functionality that, say, an asp:Repeater would lack.

The listview was new to .NET 3.5, though, so if you are using an older version, I would just use the repeater. Both allow you to specify your own markup, which you will need to do to render your items as you have them shown above.

If the use of a GridView is mandatory, you can do this:

<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>

Only for demonstration purposes, in code behind you can do this:

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();
        }
    }
}

And use the following 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;
}

It will produce the desired layout with a GridView, but indeed, the asp:ListView is a better choice.

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