HTML-форматирование сетки

Question

Я пытаюсь отформатировать сетку, чтобы она выглядела следующим образом:

, поэтому вместо того, чтобы выглядеть как таблица, в ней есть 2 столбца и 3 строки.Заранее спасибо

Answer 1

Рассмотрите возможность переключения управления сервером на <asp:ListView>. Это дает вам детальный контроль над вашей разметкой по сравнению с gridview.

Вот отличный ListView учебник от Gu .

Answer 2

Если использование 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 http://i53.tinypic.com/2l5l5s.jpg

Answer 3

Я бы лично использовал asp:Repeater элемент управления, так как он дает вам больший контроль над HTML, который вы хотите отобразить.

Answer 4

Используйте взамен asp:ListView.Он допускает элементы шаблона, то есть вы можете сами указать HTML, при этом все еще имея большую часть функциональности типа списка, которой, скажем, не хватит asp:Repeater.

Представление списка было новым для .NET 3.5, хотя, так что если вы используете более старую версию, я бы просто использовал ретранслятор.И то, и другое позволяет вам указать собственную разметку, которую вам нужно будет сделать, чтобы визуализировать ваши элементы так, как они показаны выше.