Compartir a través de

Cómo: Convertir páginas de formularios Web Forms en controles de usuario ASP.NET

  • Artículo

Actualización: noviembre 2007

Si ha desarrollado una página Web ASP.NET y desea tener acceso a su funcionalidad en toda la aplicación, puede realizar algunos cambios menores en la página para convertirla en un control de usuario.

Para convertir una página Web ASP.NET de un solo archivo en un control de usuario

  1. Cambie el nombre del control para que la extensión del nombre de archivo sea .ascx.

  2. Quite los elementos html, body y form de la página.

  3. Cambie la directiva @ Page por una directiva @ Control.

  4. Quite todos los atributos de la directiva @ Control, excepto Language, AutoEventWireup (si existe), CodeFile e Inherits.

  5. Incluya un atributo className en la directiva @ Control. Esto permite agregar el control de usuario a una página con establecimiento inflexible de tipos.

Para convertir una página Web ASP.NET de código subyacente en un control de usuario

  1. Cambie el nombre del archivo .aspx para que la extensión del nombre de archivo sea .ascx.

  2. Cambie el nombre del archivo de código subyacente para que tenga la extensión de nombre de archivo .ascx.vb o .ascx.cs, según el lenguaje de programación en el que esté el archivo.

  3. Abra el archivo de código subyacente y cambie la clase de la que hereda de Page a UserControl.

  4. En el archivo .aspx, haga lo siguiente:

    1. Quite los elementos html, body y form de la página.

    2. Cambie la directiva @ Page por una directiva @ Control.

    3. Quite todos los atributos de la directiva @ Control, excepto Language, AutoEventWireup (si existe), CodeFile e Inherits.

    4. En la directiva @ Control, cambie el atributo CodeFile para que señale al archivo de código subyacente cuyo nombre acaba de cambiar.

  5. Incluya un atributo className en la directiva @ Control. Esto permite agregar el control de usuario a una página con establecimiento inflexible de tipos.

Ejemplo

En el ejemplo siguiente se muestra una página Web ASP.NET de un solo archivo en su formato original y el control de usuario resultante después de convertir la página.

Nota de seguridad:

En este ejemplo hay un cuadro de texto que acepta datos del usuario, lo que puede suponer una amenaza para la seguridad. De forma predeterminada, las páginas Web ASP.NET validan los datos escritos por el usuario para comprobar que no incluyen script ni elementos HTML. Para obtener más información, vea Información general sobre los ataques mediante secuencias de comandos.

 
<%@ Page Language="VB" %>
<html>
<script runat=server>
Sub EnterBtn_Click(sender as Object, e as EventArgs)
    Label1.Text = "Hi " & Name.Text & " welcome to ASP.NET!"
End Sub
</script>
<body>
<h3> <u>Web Forms Page</u> </h3>
<form>
    Enter Name: <asp:textbox id="Name" runat=server/>
    <asp:button Text="Enter" OnClick="EnterBtn_Click"
        runat=server/>
<br>
<br>
<asp:label id="Label1" runat=server/>
</form>
</body>
</html>

<%@ Page Language="C#" %>
<html>
<script runat=server>
void EnterBtn_Click(Object sender, EventArgs e)
{
    Label1.Text = "Hi " + Name.Text + " welcome to ASP.NET!";
}
</script>
<body>
<h3> <u>Web Forms Page</u> </h3>
<form>
Enter Name: <asp:textbox id="Name" runat=server/>
<asp:button Text="Enter" OnClick="EnterBtn_Click"
    runat=server/>
<br>
<br>
<asp:label id="Label1" runat=server/>
</form>
</body>
</html>

<%@ Control Language="VB" ClassName="SampleUserControl" %>
<h3> <u>User Control</u> </h3>
<script runat=server>
Sub EnterBtn_Click(sender as Object, e as EventArgs)
    Label1.Text = "Hi " & Name.Text & " welcome to ASP.NET!"
End Sub
</script>
Enter Name: <asp:textbox id="Name" runat=server/>
<asp:button Text="Enter" OnClick="EnterBtn_Click"
    runat=server/>
<br>
<br>
<asp:label id="Label1" runat=server/>

<%@ Control Language="C#" ClassName="SampleUserControl" %>
<h3> <u>User Control</u> </h3>
<script runat=server>
void EnterBtn_Click(Object Sender, EventArgs e)
{
    Label1.Text = "Hi " + Name.Text + " welcome to ASP.NET!";
}
</script>
Enter Name: <asp:textbox id="Name" runat=server/>
<asp:button Text="Enter" OnClick="EnterBtn_Click"
runat=server/>
<br>
<br>
<asp:label id="Label1" runat=server/>

Vea también

Tareas

Cómo: Crear controles de usuario ASP.NET

Conceptos

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