Cómo: Crear controles de usuario ASP.NET con plantillas

Actualización: noviembre 2007

Puede crear controles de usuario que implementen plantillas, que son una característica de ASP.NET que permite separar los datos del control de su presentación. Los controles con plantilla no proporcionan una interfaz de usuario. En lugar de ello, se escriben para que implementen un contenedor de nombres e incluyan una clase a cuyas propiedades y métodos puede tener acceso la página que aloja el control (o página host).

La interfaz de usuario correspondiente al control de usuario la proporciona un desarrollador de páginas en tiempo de diseño. El desarrollador crea las plantillas del tipo definido por el control de usuario y, a continuación, puede agregar a ellas controles y formato.

Para crear un control de usuario con plantillas

  1. En el archivo .ascx, agregue un control PlaceHolder de ASP.NET donde desee que aparezca la plantilla.

  2. En el código del control de usuario, implemente una propiedad de tipo ITemplate.

  3. Defina una clase de control de servidor que implemente la interfaz INamingContainer como contenedor, en la que se creará una instancia de la plantilla. Esta clase se denomina contenedor de nombres de la plantilla.

    Nota:

    El control se convierte básicamente en una clase anidada del control de usuario, aunque esto no es necesario.

  4. Aplique el atributo TemplateContainerAttribute a la propiedad que implementa ITemplate y pase el tipo del contenedor de nombres de la plantilla como argumento al constructor de atributos.

  5. En el método Init del control, repita los pasos siguientes una o varias veces:

    • Cree una instancia de la clase del contenedor de nombres.

    • Cree una instancia de la plantilla en el contenedor de nombres.

    • Agregue la instancia del contenedor de nombres a la propiedad Controls del control de servidor PlaceHolder.

      Nota:

      Desde el punto de vista de la página que utiliza el control de usuario, la sintaxis del control de usuario con plantilla es idéntica a la de un control con plantilla personalizado.

Ejemplo

En el ejemplo siguiente se muestra un control de usuario con plantilla y una página que lo contiene. El control de usuario crea una plantilla que puede declararse en una página host como <MessageTemplate>. El control de plantilla también expone dos propiedades, Index y Message, a las que puede tener acceso la página host dentro de la plantilla.

En el primer ejemplo se muestra el control de usuario con plantilla. En el segundo ejemplo se muestra una página que contiene el control de usuario.

<%@ Control language="VB" ClassName="TemplatedUC" %>
<script  >
    Private m_messageTemplate As ITemplate = Nothing
    <TemplateContainer(GetType(MessageContainer))> Public Property _
            MessageTemplate() As ITemplate
        Get
            Return m_messageTemplate
        End Get
        Set(ByVal value As ITemplate)
            m_messageTemplate = Value
        End Set
    End Property
    
    Sub Page_Init()
        If Not (MessageTemplate Is Nothing) Then
            Dim i As Integer
            Dim fruits() As String = _
                {"apple", "orange", "banana", "pineapple"}
            For i = 0 To 3
                Dim container As New MessageContainer(i, fruits(i))
                MessageTemplate.InstantiateIn(container)
                PlaceHolder1.Controls.Add(container)
            Next i
        End If
    End Sub

    Public Class MessageContainer
        Inherits Control
        Implements INamingContainer

        Private m_index As Integer
        Private m_message As String
        Friend Sub New(ByVal i As Integer, ByVal msg As String)
            Me.Index = i
            Me.Message = msg
        End Sub
    
        Public Property Index() As Integer
            Get
                Return m_index
            End Get
            Set(ByVal value As Integer)
                m_index = value
            End Set
        End Property

        Public Property Message() As String
            Get
                Return m_message
            End Get
            Set(ByVal value As String)
                m_message = value
            End Set
        End Property
    End Class
</script>
<asp:placeholder runat=server id="PlaceHolder1" />
<%@ Control language="C#" ClassName="TemplatedUC" %>
<script runat=server>
private ITemplate messageTemplate = null;

[ TemplateContainer(typeof(MessageContainer)) ]
public ITemplate MessageTemplate {
    get 
    { 
        return messageTemplate; 
    }
    set 
    { 
        messageTemplate = value; 
    }
}

void Page_Init() {
    if (messageTemplate != null) {
        String[] fruits = {"apple", "orange", "banana", "pineapple" };
        for (int i=0; i<4; i++) 
        {
            MessageContainer container = new MessageContainer(i, fruits[i]);
            messageTemplate.InstantiateIn(container);
            PlaceHolder1.Controls.Add(container);
        }
    }
}

public class MessageContainer: Control, INamingContainer {
    private int m_index;
    private String m_message;
    internal MessageContainer(int index, String message)
    { 
        m_index = index;
        m_message = message;
    }
    public int Index {
        get 
        { 
            return m_index; 
        } 
    }
    public String Message 
    { 
        get 
        { 
            return m_message; 
        } 
    }
}
</script>
<asp:placeholder runat=server id="PlaceHolder1" />
<%@ Page Language="VB" %>
<%@ Register TagPrefix="uc" tagname="TemplateTest" 
    Src="TemplatedUC.ascx" %>
<html>
<script runat=server>
    Sub Page_Load()
        DataBind()
    End Sub
</script>
<head>
<title>Templated User Control Test</title>
</head>
<body>
<h1>Testing Templated User Control</h1>
<form id="Form1" runat=server>
<uc:TemplateTest runat=server>
  <MessageTemplate>
    Index: <asp:Label  ID="Label1" 
                Text='<%# Container.Index %>' />
    <br />
    Message: <asp:Label  ID="Label2" 
        Text='<%# Container.Message %>' />
    <hr />
  </MessageTemplate>
</uc:TemplateTest>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Register TagPrefix="uc" tagname="TemplateTest" 
    Src="TemplatedUC.ascx" %>
<html>
<script runat=server>
    protected void Page_Load()
    {
        DataBind();
    }
    
</script>
<head>
<title>Templated User Control Test</title>
</head>
<body>
<h1>Testing Templated User Control</h1>
<form id="Form1" runat=server>
<uc:TemplateTest runat=server>
  <MessageTemplate>
    Index: <asp:Label  ID="Label1" 
        Text='<%# Container.Index %>' />
    <br />
    Message: <asp:Label  ID="Label2" 
        Text='<%# Container.Message %>' />
    <hr />
  </MessageTemplate>
</uc:TemplateTest>
</form>
</body>
</html>

Vea también

Conceptos

Información general sobre los controles de usuario ASP.NET