ASP.NET
WebForms

통사론

• <asp : TextBox runat = "server"ID = ""TextMode = ""Text = ""/>
• <asp : Repeater runat = "server"ID = ""OnItemDataBound = "">
  <HeaderTemplate></HeaderTemplate>
<ItemTemplate></ItemTemplate>
<FooterTemplate></FooterTemplate>
</asp:Repeater>

비고

리피터를 사용하여 HTML 테이블 만들기

리피터가 바인딩되면 데이터의 각 항목에 대해 새 테이블 행이 추가됩니다.

<asp:Repeater ID="repeaterID" runat="server" OnItemDataBound="repeaterID_ItemDataBound">
    <HeaderTemplate>
        <table>
            <thead>
                <tr>
                    <th style="width: 10%">Column 1 Header</th>
                    <th style="width: 30%">Column 2 Header</th>
                    <th style="width: 30%">Column 3 Header</th>
                    <th style="width: 30%">Column 4 Header</th>
                </tr>
            </thead>
    </HeaderTemplate>
    <ItemTemplate>
        <tr runat="server" id="rowID">
            <td>
                <asp:Label runat="server" ID="mylabel">You can add ASP labels if you want</asp:Label>
            </td>
            <td>
                <label>Or you can add HTML labels.</label>
            </td>
            <td>
                You can also just type plain text like this.
            </td>
            <td>
                <button type="button">You can even add a button to the table if you want!</button>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

ItemDataBound 메서드는 선택 사항이지만 더 복잡한 데이터를 서식을 지정하거나 채우는 데 유용합니다. 이 예제에서이 메서드는 각 <tr> 에 고유 한 ID를 동적으로 제공하는 데 사용됩니다. 이 ID는 JavaScript에서 특정 행에 액세스하거나 수정할 때 사용할 수 있습니다. tr 은 동적 ID 값을 PostBack에 보관하지 않습니다. 각 행의 <asp:Label> 텍스트도이 메서드에서 설정되었습니다.

protected void repeaterID_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        MyItem item = (MyItem)e.Item.DataItem;

        var row = e.Item.FindControl("rowID");
        row.ClientIDMode = ClientIDMode.Static;
        row.ID = "rowID" + item.ID;

        Label mylabel = (Label)e.Item.FindControl("mylabel");
        mylabel.Text = "The item ID is: " + item.ID;
    }
}

CodeBehind와의 많은 의사 소통을 계획하고 있다면 GridView 사용을 고려할 수 있습니다. 그러나 일반적으로 리피터는 GridView보다 오버 헤드가 적으며 기본 ID 조작을 통해 GridView와 동일한 기능을 수행 할 수 있습니다.

ListView에서 그룹화하기

asp:ListView ASP.NET WebForms 프레임 워크 3.5에 도입 된 asp:ListView 는 프레임 워크의 모든 DataPresentation 컨트롤 중 가장 유연합니다. ListView를 사용하여 그룹화하는 예제 (이미지 갤러리로 편리하게 사용할 수 있음)

목표 : asp:ListView 사용하여 한 행에 세 개의 이미지를 표시하려면 asp:ListView

마크 업

<asp:ListView ID="SportsImageList" runat="server"
    GroupItemCount="3">
    <LayoutTemplate>
        <span class="images-list">
            <ul id="groupPlaceholder" runat="server"></ul>
        </span>
    </LayoutTemplate>
    <GroupTemplate>
        <ul>
            <li id="itemPlaceholder" runat="server"></li>
        </ul>
    </GroupTemplate>
    <ItemTemplate>
        <li>
            <img src='<%# Container.DataItem %>' />
        </li>
    </ItemTemplate>
</asp:ListView>

코드 숨김

protected void Page_Load(object sender, EventArgs e)
{
    if(!IsPostBack)
    {
        SportsImageList.DataSource = GetImages();
        SportsImageList.DataBind();
    }
}

private static IEnumerable<string> GetImages()
{
    var images = Enumerable.Range(1, 9) //get numbers 1 to 9
        .Select(i =>
            string.Format("http://lorempixel.com/100/100/sports/{0}/", i)
        ); //convert the numbers to string
    return images;
}

CSS

.images-list ul{
    clear: both;
    list-style-type: none;
}
.images-list ul li{
    float: left;
    padding: 5px;
}

렌더링 된 출력

예

<script language="VB" runat="server">

    Sub SubmitBtn_Click(sender As Object, e As EventArgs)
        Label1.Text = "Text1.Text = " & Text1.Text
    End Sub

</script>

<h3><font face="Verdana">TextBox Sample</font></h3>

<form runat="server">

  <asp:TextBox id="Text1" Text="Copy this text to the label" Width="200px" runat="server"/>

  <asp:Button OnClick="SubmitBtn_Click" Text="Copy Text to Label" Runat="server"/>

  <p>
  
  <asp:Label id="Label1" Text="Label1" runat="server"/>

</form>

하이퍼 링크

HyperLink 컨트롤은 클라이언트에서 다른 페이지로 이동하는 데 사용됩니다.

<html>

<script language="VB" runat="server">


   Sub Page_Load(sender As Object, e As EventArgs) 
      ' Set hyperlink to "~", which indicates application root.
      HyperLink1.NavigateUrl = "~"
   End Sub

</script>

<body>

    <h3><font face="Verdana">Simple asp:hyperlink Sample</font></h3>

    <form runat=server>

        <p>

        <asp:hyperlink id=HyperLink1 runat="server">
            Go To QuickStart
        </asp:hyperlink>

    </form>

</body>

</html>