ASP.NET
WebForms

Syntaxe

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

Remarques

Utilisation d'un répéteur pour créer une table HTML

Lorsque le répéteur est lié, une nouvelle ligne de tableau sera ajoutée pour chaque élément des données.

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

La méthode ItemDataBound est facultative, mais utile pour formater ou remplir des données plus compliquées. Dans cet exemple, la méthode est utilisée pour donner dynamiquement à chaque <tr> un identifiant unique. Cet identifiant peut alors être utilisé en JavaScript pour accéder ou modifier une ligne spécifique. Notez que le tr ne conservera pas sa valeur d'ID dynamique sur PostBack. Le texte de chaque ligne <asp:Label> a également été défini dans cette méthode.

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

Si vous envisagez de faire beaucoup de communication avec CodeBehind, vous pouvez envisager d'utiliser GridView. Les répéteurs, en général, ont moins de charge que GridView et, avec une manipulation de base des identifiants, peuvent effectuer les mêmes fonctions que GridView.

Grouper dans ListView

asp:ListView introduit dans ASP.NET WebForms Framework 3.5 est le plus flexible de tous les contrôles DataPresentation du framework. Un exemple de regroupement à l'aide de ListView (qui sera utile en tant que galerie d'images)

Objectif : afficher trois images dans une ligne en utilisant asp:ListView

Balisage

<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 Derrière

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

Sortie rendue

Exemple

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

Lien hypertexte

Le contrôle HyperLink permet de naviguer du client vers une autre page.

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