ASP.NET Вертикальная упаковка списка, созданного повторителем - PullRequest
Новая
       6

ASP.NET Вертикальная упаковка списка, созданного повторителем

2 голосов
/ 21 июля 2010

Мой репитер генерирует список ссылок, которые должны появляться в определенном порядке. Это значит, что мой список должен выглядеть так 

-Item1 -Item4
-Item2 -Item5
-Item3

Каждое решение, которое я нашел, включает в себя знание того, что будет в вашем списке, и настройку классов, в которых список должен сломаться. Моя проблема в том, что это может быть от 1 до 18 предметов.

Итак, мой вопрос: есть ли хороший, простой способ вертикальной упаковки списка, который динамически генерируется с использованием элемента управления репитера ASP.NET?

Ответы [ 2 ]

5 голосов
/ 21 июля 2010

Вот идея.Это предполагает, что количество элементов, отображаемых по вертикали перед переносом, является фиксированным числом или, по крайней мере, числом, которое может определить сервер (см. Константу VerticalWrapLimit).Т.е. это не связано с высотой браузера пользователя. 

<script runat="server">
    void Page_Load(object sender, EventArgs e)
    {
        rptVerticalWrap.DataSource = new[] {
            new { ID = 1, Name = "ABC" },
            new { ID = 2, Name = "BCD" },
            new { ID = 3, Name = "CDE" },
            new { ID = 4, Name = "DEF" },
            new { ID = 5, Name = "EFG" },
            new { ID = 6, Name = "FGH" },
            new { ID = 7, Name = "GHI" },
            new { ID = 8, Name = "HIJ" },
        };
        rptVerticalWrap.DataBind(); 
    }

    int count;
    const int VerticalWrapLimit = 5;
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    <% count = 0; %>
    <div style="float:left;">
            <asp:Repeater ID="rptVerticalWrap" runat="server">
                <ItemTemplate>
                    <%
                        if (count % VerticalWrapLimit == 0 && count > 0)
                        {
                            %></div><div style="float:left;"><%                     
                        }
                        count++;
                    %>
                    <div>
                        <asp:Label runat="server" Text="ID: " /><asp:TextBox runat="server" Text='<%# Eval("ID") %>' />
                        <asp:Label runat="server" Text="Name: " /><asp:TextBox runat="server" Text='<%# Eval("Name") %>' />
                    </div>
                </ItemTemplate>
            </asp:Repeater>
    </div>
    </div>
    </form>
</body>
</html>

Для решения этой проблемы, я думаю, вам нужно определить, как вы хотите, чтобы в результате выглядел полученный HTML-код, а затем написатьASP-код для его генерации.

В этом случае я обернул каждый вертикальный столбец данных с помощью style = "float: left;".Я использовал переменную count в области видимости, чтобы определить, когда мне нужно закрыть текущий div и начать новый.Переменная count должна быть переменной уровня класса, поскольку содержимое ItemTemplate репитера имеет область действия, отличную от остальной части страницы.

0 голосов
/ 04 февраля 2015

Я успешно достиг с использованием тегов div со стилем, как показано в коде ниже: 

<asp:Repeater ID="rptAnswers" runat="server">
	<ItemTemplate>
		<div style="width:100%;display:table-row;">
			<div style="display: table-cell; padding: 5px; margin-left: 25px">
				<asp:Label ID="lblOrdPos" runat="server" ClientIDMode="Predictable" Text='<%# Eval("ansLetter")%>'></asp:Label>)
			</div>
			<div style="display: table-cell; padding: 5px;" class="ansCtrl">
				<asp:RadioButton ID="gvrbAns" ClientIDMode="Predictable" CssClass="gvrbAnswers" GroupName="gvrbAnswers" runat="server" Checked='<%# Eval("ansVal") = 1 %>' />
				<asp:CheckBox ID="gvchkAns" ClientIDMode="Predictable" CssClass="gvchkAnswer" runat="server" Checked='<%# Eval("ansVal") = 1 %>' />
				<asp:RadioButtonList ID="rblAnswer" ClientIDMode="Predictable" CssClass="ansTrueFalse" runat="server">
					<asp:ListItem Value="1" Text="True"></asp:ListItem>
					<asp:ListItem Value="0" Text="False"></asp:ListItem>
				</asp:RadioButtonList>
			</div>
			<div style="display: table-cell; padding: 5px;">
				<asp:Label runat="server" ID="lblAnswerTxt" ClientIDMode="Predictable" Text='<%# Eval("txt") %>'></asp:Label>
			</div>
		</div>
		
	</ItemTemplate>
</asp:Repeater>
...