ASP.NET
WebForms

Syntax

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

Bemerkungen

Verwenden eines Repeaters zum Erstellen einer HTML-Tabelle

Wenn der Repeater gebunden ist, wird für jedes Element in den Daten eine neue Tabellenzeile hinzugefügt.

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

Die ItemDataBound Methode ist optional, jedoch nützlich zum Formatieren oder ItemDataBound komplizierteren Daten. In diesem Beispiel wird die Methode verwendet, um jedem <tr> dynamisch eine eindeutige ID zuzuweisen. Diese ID kann dann in JavaScript verwendet werden, um auf eine bestimmte Zeile zuzugreifen oder diese zu ändern. Beachten Sie, dass der tr seinen dynamischen ID-Wert nicht für PostBack behält. Der Text von <asp:Label> jeder Zeile wurde ebenfalls in dieser Methode festgelegt.

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

Wenn Sie vorhaben, viel mit CodeBehind zu kommunizieren, empfiehlt es sich, GridView zu verwenden. Repeater haben jedoch im Allgemeinen weniger Overhead als GridView und können mit grundlegenden ID-Manipulationen die gleichen Funktionen wie GridView ausführen.

Gruppierung in ListView

asp:ListView eingeführt in ASP.NET WebForms Framework 3.5, ist das flexibelste aller DataPresentation-Steuerelemente im Framework. Ein Beispiel für das Gruppieren mit ListView (das sich als Bildergalerie eignet)

Ziel : Anzeige von drei Bildern in einer Reihe mit 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 hinter

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

Gerenderte Ausgabe

Beispiel

<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

Das HyperLink-Steuerelement wird verwendet, um vom Client zu einer anderen Seite zu navigieren.

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