ASP.NET
WebForms

Syntaxis

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

Opmerkingen

Een repeater gebruiken om een HTML-tabel te maken

Wanneer de repeater gebonden is, wordt voor elk item in de gegevens een nieuwe tabelrij toegevoegd.

<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>

De ItemDataBound methode is optioneel, maar toch handig voor het formatteren of ItemDataBound meer gecompliceerde gegevens. In dit voorbeeld wordt de methode gebruikt om elke <tr> dynamisch een uniek ID te geven. Deze ID kan vervolgens in JavaScript worden gebruikt om een specifieke rij te openen of te wijzigen. Let op, de tr zal zijn dynamische ID-waarde niet behouden op PostBack. De tekst van het <asp:Label> van elke rij was ook ingesteld in deze methode.

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;
    }
}

Als u van plan bent om veel met de CodeBehind te communiceren, kunt u overwegen om GridView te gebruiken. Repeaters hebben echter over het algemeen minder overhead dan GridView en kunnen met basis-ID-manipulatie dezelfde functies uitvoeren als GridView.

Groeperen in lijstweergave

asp:ListView geïntroduceerd in ASP.NET WebForms framework 3.5 is de meest flexibele van alle DataPresentation Controls in het framework. Een voorbeeld van groeperen met behulp van ListView (handig als afbeeldingengalerij)

Doel : drie afbeeldingen op een rij weergeven met asp:ListView

markup

<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>

Code achter

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;
}

Gesmolten uitvoer

Voorbeeld

<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

Het besturingselement HyperLink wordt gebruikt om van de client naar een andere pagina te navigeren.

<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>