Manipular propiedades de control de usuario

Artículo
04/11/2008

Una vez creado un control de usuario y especificadas las propiedades de ese control, puede cambiar los valores de las propiedades de forma declarativa o mediante programación desde la página que contiene el control de usuario. También puede utilizar estas técnicas cuando agregue controles de usuario a otros controles de usuario, lo que se denomina anidamiento.

Para manipular de forma declarativa valores de propiedades de controles de usuario

Declare el nombre de la propiedad de control de usuario y un valor como un par de atributo y valor en la etiqueta de control de usuario. En el ejemplo siguiente, Color y Text son las propiedades de la instancia de un control creada por la etiqueta de control de servidor Acme:Login personalizada. La propiedad Color se establece en blue y la propiedad Text se establece en This is a sample.
```
<Acme:Login Color="blue" Text="This is a sample." Runat="server" />
```

Para manipular valores de propiedades de controles de usuario mediante programación.

Cree un control de usuario con propiedades y un control de servidor ASP.NET o elemento HTML para mostrar los valores de la propiedad. En el ejemplo siguiente se utiliza un elemento <span> para mostrar los valores de la propiedad Color y Text.

<script runat="server">
    Public Color As String = "blue"
    Public Text As String = "This is a simple message user control!"  
</script>

<span id="Message" style="color:<%=Color%>"><%=Text%></span>
[C#]
<script language="C#" runat="server">
    public String Color = "blue";
    public String Text = "This is a simple message user control!";
</script>

<span id="Message" style="color:<%=Color%>"><%=Text%></span>

Registre el control de usuario en la página o el control de usuario que lo contienen con una directiva @ Register, definiendo tanto el tagname y el tagprefix del control de usuario como la ruta al archivo del control de usuario. Para obtener información sobre cómo puede incluir un control de usuario en una página o en otro control de usuario mediante programación, vea Crear instancias de controles de usuario mediante programación
En el bloque de declaración de código, cree código que manipule las propiedades del control de usuario.

En el cuerpo de la página o control de usuario contenedores, incluya cualquier otro control de servidor ASP.NET que quiera que participe en la manipulación de las propiedades del control de usuario. Por ejemplo, podría incluir un control de servidor Web DropDownList o un control de servidor HtmlSelect para seleccionar colores y, de este modo, manipular una propiedad Color.

El siguiente ejemplo muestra una página que manipula el control de usuario presentado en el paso 1.

<%@ Register TagPrefix="Acme" TagName="Message"    Src="simpleusercontrol.ascx" %>

<html>

    <script language="VB" runat="server">
        Sub SubmitBtn_Click(sender As Object, E As EventArgs)
            MyMessage.Text = "Message text changed!"
            MyMessage.Color = "red"
        End Sub 'SubmitBtn_Click
    </script>
    <body style="font: 10pt verdana">
        <h3>A Simple User Control w/ Properties</h3>
        <form runat="server">
            <Acme:Message id="MyMessage" Text="This is a custom message!" Color="blue" runat="server"/>
            <p>
            <asp:button text="Change Properties" OnClick="SubmitBtn_Click" runat=server/>

        </form>
    </body>
</html>
[C#]
<%@ Register TagPrefix="Acme" TagName="Message"    Src="simpleusercontrol.ascx" %>

<html>

    <script language="C#" runat="server">
            void SubmitBtn_Click(Object sender, EventArgs E) {
                    MyMessage.Text = "Message text changed!";
                    MyMessage.Color = "red";
            }
    </script>

<body style="font: 10pt verdana">
    <h3>A Simple User Control w/ Properties</h3>
    <form runat="server">
        <Acme:Message id="MyMessage" Text="This is a custom message!" Color="blue" runat="server"/>
        <p>
        <asp:button text="Change Properties" OnClick="SubmitBtn_Click" runat=server/>

    </form>
</body>
</html>

Aunque hay muchas semejanzas en la manipulación de las propiedades de un control de usuario desde una página declarativa o control de usuario y desde una página de código subyacente o clase de control de usuario, hay también diferencias significativas. En concreto, si crea la página o control de usuario contenedores con una clase de código subyacente, como hacen todos los diseñadores de desarrollo rápido de aplicaciones (RAD), también debería crear con una clase de código subyacente el control de usuario que piensa utilizar. Así se proporciona una clara delimitación entre los archivos de código y los archivos que se usan para enviar HTML al cliente que lo solicite (archivos .aspx y .ascx). Para obtener más información, vea Desarrollar controles de usuario en un archivo de código subyacente.

Nota Los ejemplos del siguiente procedimiento son modificaciones de los ejemplos del procedimiento Para manipular propiedades de controles de usuario mediante programación. Se ha modificado el código para que funcione en archivos de código subyacente.

Para manipular valores de propiedades de control de usuario mediante programación desde un archivo de código subyacente.

En un archivo de código subyacente, cree código de control de usuario que incluya propiedades que desee manipular. El ejemplo siguiente es una adaptación del control de usuario simple del procedimiento anterior.

Imports System
Imports System.Web.UI
Imports System.Web.UI.HtmlControls

Namespace UserControlTest
    Public Class MyUserControl
        Inherits UserControl
         Public Color As String = "blue"
         Public [Text] As String = "This is a simple message user control!"
    End Class 'MyUserControl
End Namespace 'UserControlTest
[C#]
using System;
using System.Web.UI;
using System.Web.UI.HtmlControls;

namespace UserControlTest {
    public class MyUserControl : UserControl {
        public string Color = "blue";
        public string Text = "This is a simple message user control!";
    }
}

En un archivo de código subyacente separado, cree la página o control de usuario contenedor que manipulará los valores de propiedades de control de usuario. Para este ejemplo, el código se almacena en un archivo MyPage con la extensión apropiada del lenguaje.

Imports System
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports UserControlTest

Namespace PageTest
    Public Class MyPage
        Inherits Page
        Public mybutton As Button
        Public MyMessage As MyUserControl
        Public Placeholder As PlaceHolder

        Sub Page_Load(sender As [Object], e As EventArgs)
            Dim MyMessage As Control = LoadControl("uc.ascx")
            Placeholder.Controls.Add(MyMessage)

            Dim mybutton As New Button()
            mybutton.Text = "Change property values"
            mybutton.OnClick = "SubmitBtn_Click"
            Placeholder.Controls.Add(mybutton)
        End Sub 'Page_Load

        Protected Sub SubmitBtn_Click(sender As [Object], e As EventArgs)
            MyMessage.Text = "Message text changed!"
            MyMessage.Color = "red"
        End Sub 'SubmitBtn_Click
    End Class 'MyPage
End Namespace 'PageTest
[C#]
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using UserControlTest;

namespace PageTest {
    public class MyPage : Page {
        public Button mybutton;
        public MyUserControl MyMessage;
        public PlaceHolder Placeholder;

        void Page_Load(Object sender, EventArgs e) {
            Control MyMessage = LoadControl("uc.ascx");
            Placeholder.Controls.Add(MyMessage);

            Button mybutton = new Button();
            mybutton.Text = "Change property values";
            mybutton.OnClick = "SubmitBtn_Click";
            Placeholder.Controls.Add(mybutton);
        }

        protected void SubmitBtn_Click(Object sender, EventArgs e) {
            MyMessage.Text = "Message text changed!";
            MyMessage.Color = "red";
        }
    }
}

Compile el archivo de código subyacente del control de usuario y el archivo de código subyacente del control de usuario o página contenedora en ensamblados. Debe asegurarse de que la página o el control de usuario que lo contienen tienen acceso al código del control de usuario con el que está trabajando. Puede compilarlos en el mismo archivo .dll, o usar las siguientes instrucciones del compilador en la línea de comandos cuando compile la página o el control de usuario que los contienen. En el ejemplo siguiente, uc.dll representa la DLL compilada desde el archivo de código fuente del control de usuario.

Note Las siguientes instrucciones de la línea de comandos del compilador suponen que está compilando desde el directorio donde residen los archivos de código fuente. También se supone que está compilando en el directorio \bin. En este caso, el directorio \bin es un subdirectorio del directorio donde residen los archivos de código fuente.
```
vbc /r:.\bin\uc.dll /target:library /out:.\bin\p.dll MyPage.vb
[C#]
csc /r:.\bin\uc.dll /target:library /out:.\bin\p.dll MyPage.cs
```
Si todavía no lo ha hecho, asegúrese de que todas las DLL creadas están almacenadas en el directorio \bin de la aplicación de forma que las clases se puedan vincular automáticamente a los archivos .aspx o .ascx asociados con ellas.
Cree los archivos .aspx y .ascx apropiados. Asegúrese de que incluye un control de servidor PlaceHolder en el archivo .aspx. Este control contendrá la interfaz de usuario generada dinámicamente a partir de los controles declarados en la DLL del código subyacente de la página. Incluya también cualquier elemento HTML necesario para la página y el código de control de usuario que haya creado.

Nota En este caso, no utilice el atributo Src en las directivas @ Control o @ Page. Como las dos clases se heredan de un ensamblado, use simplemente el atributo Inherits. Además, si crea la página y el control de usuario en espacios de nombres, debe incluir el nombre del espacio de nombres en el valor del atributo Inherits.

El ejemplo siguiente demuestra el archivo .ascx para el control de usuario y el archivo .aspx para la página de los ejemplos anteriores.

Archivo .ascx:
```
<%@ Control Inherits="UserControlTest.MyUserControl" %>
<span id="Message" style="color:<%=Color%>"><%=Text%></span>
```
Archivo .aspx:
```
<%@ Import Namespace="PageTest" %>
<%@ Page language="VB" Inherits="PageTest.MyPage" %>
<%@ Reference control="uc.ascx" %>

<html>

    <body style="font: 10pt verdana">
        <h3>A Simple User Control w/ Properties</h3>
        <form runat="server">

            <asp:placeholder id="Placeholder" runat="server" />

        </form>
    </body>
</html>
[C#]
<%@ Import Namespace="PageTest" %>
<%@ Page language="C#" Inherits="PageTest.MyPage" %>
<%@ Reference control="uc.ascx" %>

<html>

    <body style="font: 10pt verdana">
        <h3>A Simple User Control w/ Properties</h3>
        <form runat="server">

            <asp:placeholder id="Placeholder" runat="server" />

        </form>
    </body>
</html>
```

Vea también

Controles de usuario de formularios Web Forms | Incluir un control de usuario en una página de formularios Web Forms | Control de eventos de servidor en páginas de formularios Web Forms | Controlar eventos de control de usuario

Compartir a través de

Manipular propiedades de control de usuario

Vea también

Recursos adicionales