Buscar..


Sintaxis

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

Observaciones

Todos los controles de ASP.Net WebForm requieren runat="server" para comunicarse con el CodeBehind.

Usando un repetidor para crear una tabla HTML

Cuando el repetidor está enlazado, para cada elemento de los datos, se agregará una nueva fila de la tabla.

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

El método ItemDataBound es opcional, pero útil para formatear o ItemDataBound datos más complicados. En este ejemplo, el método se utiliza para dar dinámicamente a cada <tr> una ID única. Esta ID se puede usar en JavaScript para acceder o modificar una fila específica. Tenga en cuenta que el tr no mantendrá su valor de ID dinámico en PostBack. El texto de cada fila <asp:Label> también se estableció en este método.

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 planeas hacer mucha comunicación con el CodeBehind, deberías considerar usar GridView. Sin embargo, los repetidores, en general, tienen menos sobrecarga que GridView y, con la manipulación de ID básica, pueden realizar las mismas funciones que GridView.

Agrupación en ListView

asp:ListView introducido en ASP.NET WebForms framework 3.5 es el más flexible de todos los controles de presentación de datos en el marco. Un ejemplo de agrupación usando ListView (que será útil como galería de imágenes)

Objetivo : Mostrar tres imágenes en una fila usando asp:ListView

Margen

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

Código detrás

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

Salida renderizada

Galería de imágenes deportivas

Ejemplo

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

Hiperenlace

El control HyperLink se utiliza para navegar desde el cliente a otra página.

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


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow