2010-07-21 2 views
2

중계기에서 특정 순서로 표시해야하는 링크 목록을 생성했습니다. 내가 그렇게ASP.NET 중계기에서 생성 된 목록을 세로로 배치하는 중

-Item1 -Item4 
-Item2 -Item5 
-Item3 

내가 찾은 모든 솔루션과 같이 표시 내 목록이 필요 의미하는 것은 목록에 될 것하고 목록이 파손될 클래스를 설정 뭐죠 아는 포함한다. 내 문제는 1 ~ 18 개 항목이 될 수 있다는 것입니다.

내 질문에, ASP.NET 리피터 컨트롤을 사용하여 동적으로 생성되는 목록을 세로로 줄이기위한 좋은 방법이 있습니까?

+1

그것은이에 대한 답변은 HTML과 CSS를 포함 할 것으로 보인다. 이러한 태그를 추가하는 것이 좋습니다. –

답변

5

아이디어가 있습니다. 이것은 랩핑하기 전에 세로로 표시 할 항목의 수가 고정 된 숫자이거나 적어도 서버가 판별 할 수있는 수임을 전제로합니다 (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;"로 감 쌉니다. 현재 div를 닫고 새 div를 시작해야 할 때를 식별하기 위해 클래스 범위 "count"변수를 사용했습니다. Repeater의 ItemTemplate 내용이 나머지 페이지와 다른 범위를 가지기 때문에 count 변수는 클래스 수준 변수 여야합니다. 아래의 코드와 같이

+0

아픈 오늘 밤에 이것을 구현하려고합니다. 그리고 만약 내가 어떤 행운이 있다면 나는 이것을 대답으로 표시 할 것입니다. 감사. – Gallen

+0

이것은 당신이 묘사 한 상황에서 작동 할 것입니다. 그러나 목록 항목을 고정 된 너비로 가로로 배치하여 두 열로 표시되도록했습니다. 매번 정해진 수의 항목이 아니기 때문에 목록의 크기를 결정하는 것은 너무 어려웠습니다. – Gallen

0

나는 성공적 스타일 div 태그를 사용하여 달성 :

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

관련 문제