asp.net的ListView在grouptemplate两行 [英] asp.net listview with two rows in grouptemplate

问题描述

在S.O第一个问题。

我在 asp.net 做一个搜索结果页面，我有一些问题
- 我会（每个盒子）的书的封面的图像和书的标题

I have to do a search result page in asp.net and I have some problems - I will have (for each "box") an image of the book cover and the title of the book

知道了所有的图像是不一样的高度，我希望能够垂直对齐它们上下。我搜索真的很难在网络上发现了一些解决方案使用显示表/表行/表单元格中。

Knowing that all images aren't the same height, I want to be able to vertically align them to bottom. I searched really hard on the web and found some solution using display table/table-row/table-cell.

一切工作正常，使用的ListView 的 GroupTemplate （如行）和的ItemTemplate （如电池），如果我只是想显示图像 - 但是 - 我想图像垂直对齐到下及以下（像一个链接了解详情标题下）书的标题。

Everything works fine, using ListView's GroupTemplate (as row) and ItemTemplate (as cell) If i only want to display images - but - I want images vertically aligned to bottom and the book's title below (with a link like "learn more" below the title).

知道，我不能把我的书名比图像相同的细胞（因为有时标题将采取两条线，这将再次突破设计......），我认为我会需要另一行（就像在我下面code）。我因子评分是把我的两行 GroupTemplate 将工作，但的ListView 似乎并没有给我hability打电话两种不同的ItemTemplate（一个用于图像和一个用于放置在另一行，低于他的图像的文本）。

Knowing that I couldn't put my book title in the same cell than the image (because sometime the title will take two lines, which will break the design again...), I think that I would need another row (like in my code below). I tought that putting my two rows in GroupTemplate would work but ListView doesn't seem to give me the hability to call two different itemtemplates (one for the image and one for the text placed in another row, below his image).

任何帮助将大大AP preciated，如果您有其他的选择，我打开的建议。请记住，我需要一个 DataPager的所以的ListView - 我认为 - 是唯一的出路

Any help would be greatly appreciated and if you have other alternatives, I'm opened to suggestions. Bear in mind that I need a DataPager so the ListView- i think - is the only way to go.

下面是我的CSS

#grid{
    background: lightgreen;
    border-spacing: 10px;
    display: table;
}
#grid .row{display: table-row;}
#grid .result{
    display: table-cell;
    vertical-align: bottom;
}

下面是我的搜索结果的ListView 草案（形象好，但只有蹩脚的测试文本）

Here's my search result ListView draft (image is good, but only crappy "test" text)

<asp:ListView ID="lvSearchResults" runat="server" OnPagePropertiesChanged="DataPager_PreRender" OnPagePropertiesChanging="DataPager_PreRendering" GroupItemCount="5" >
        <LayoutTemplate>
            <div id="grid">
                <asp:PlaceHolder ID="groupPlaceholder" runat="server" />
            </div>
        </LayoutTemplate>
        <GroupTemplate>
            <div class="row">
                <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
            </div>
            <div class="row">
                <asp:PlaceHolder ID="itemPlaceHolder1" runat="server" />
            </div>
        </GroupTemplate>
        <ItemTemplate>
            <div class="result">
                <p><a href='<%# Container.DataItem.URI %>'><img src='<%# Container.DataItem.LesImages.Petite %>' alt="" /></a></p>
            </div>
        </itemtemplate>
        <ItemTemplate>
            <div class="result">
                <p><a href='<%# Container.DataItem.URI %>'>test</a></p>
            </div>
        </itemtemplate>
    </asp:ListView>

非常感谢，
- 埃里克

Thanks a lot, - Eric

推荐答案

不知怎的，我已经能够做到我想要的东西：

Somehow I've been able to do what I wanted:

通过给予一个固定的高度，以剩余的内容（标题和一个链接），图像继续被垂直对齐。所以在我的特定情况下，没有必要在groupTemplate创建第二排。

By giving a fixed height to the remaining content (title and a link), the images continues to be vertically aligned. So in my particular case, no need to create a second row in the groupTemplate.

固定高度，我的标题，因为它可以（但不是更多）两行或者只有一行。由于我下面的标题链接是每一个的ItemTemplate itteration一样的，没必要为他的程序段中指定的高度。

Fixed height for my title because it can take (but not more) two lines or only one line. Since the link below my title is the same for every itemTemplate itteration, no need to specify height for his block.

感谢MajoB的回答，但不知何故，它并没有为我工作。

Thanks MajoB for your answer, but somehow it didn't work for me.

下面是我的新的和改进的code ...;）

Here is my new and improved code... ;)

        <GroupTemplate>
            <div class="row">
                <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
            </div>
        </GroupTemplate>
        <ItemTemplate>
            <div class="result">
                <a href='<%# Container.DataItem.URI %>'><img src='<%# Container.DataItem.LesImages.Petite %>' alt="" /></a>
                <div style="height: 40px;margin-top: 10px;"><asp:Literal ID="litTitre" runat="server" Text='<%# TrunkStringRelay(Container.DataItem.Titre, 40) %>' /></div>                    
                <a href='<%# Container.DataItem.URI %>'>En savoir plus &raquo;</a>
            </div>
        </itemtemplate>

这篇关于asp.net的ListView在grouptemplate两行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！