Controles de usuario
Actualización: noviembre 2007
Los controles de usuario móviles de ASP.NET proporcionan una técnica rápida y eficaz para crear controles de usuario propios en una página Web de ASP.NET Mobile. El contenido de cualquier página móvil se puede utilizar en otra página móvil mediante la combinación de uno o varios controles con su lógica asociada y la encapsulación en un control de usuario. Con algunas excepciones, un control de usuario es idéntico a un control MobilePage.
Un control de usuario móvil:
Deben tener la extensión de nombre de archivo .ascx.
No requiere una directiva @ Page.
Debe contener la directiva @ Register.
La directiva @ Register asocia alias a espacios de nombres y clases para que se puedan declarar controles móviles en el control de usuario.
ASP.NET distingue entre controles de usuario y controles compuestos. Un control de usuario se almacena como un archivo de texto .ascx, mientras que un control compuesto se compila y se almacena en un ensamblado. En las páginas Web de ASP.NET Mobile, un control de usuario puede contener varios controles, como se demuestra en los ejemplos de este tema.
Crear un control de usuario
Los controles de usuario se crean generando un archivo con la extensión .ascx. El ejemplo de código siguiente incluye un control de usuario que usa varias etiquetas para mostrar los detalles de un automóvil.
<%@ Control Language="VB" ClassName="CarControl"
Inherits="System.Web.UI.MobileControls.MobileUserControl" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<script >
' Private field of externally defined CarInfo type
Private _car As New CarInfo()
' Public Property for the CarInfo
Public Property Car() As CarInfo
Get
Return _car
End Get
Set(ByVal value As CarInfo)
_car = value
End Set
End Property
</script>
<mobile:Panel ID="Panel1" Runat="server" BreakAfter="true">
<mobile:Label id="Label1" BreakAfter="true">
Make: <%# Car.Make %></mobile:Label>
<mobile:Label id="Label2" BreakAfter="true">
Model: <%# Car.Model %></mobile:Label>
<mobile:Label id="Label3" BreakAfter="true">
Year: <%# Car.Year %></mobile:Label>
<mobile:Label id="Label4" BreakAfter="true">
Color: <%# Car.Color %></mobile:Label>
</mobile:Panel>
<%@ Control Language="C#" ClassName="CarControl"
Inherits="System.Web.UI.MobileControls.MobileUserControl" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<script >
// Private field of externally defined CarInfo type
private CarInfo _car = new CarInfo();
// Public Property for the CarInfo
public CarInfo Car
{
get { return _car; }
set { _car = value; }
}
</script>
<mobile:Panel ID="Panel1" Runat="server" BreakAfter="true">
<mobile:Label id="Label1" BreakAfter="true">
Make: <%# Car.Make %></mobile:Label>
<mobile:Label id="Label2" BreakAfter="true">
Model: <%# Car.Model %></mobile:Label>
<mobile:Label id="Label3" BreakAfter="true">
Year: <%# Car.Year %></mobile:Label>
<mobile:Label id="Label4" BreakAfter="true">
Color: <%# Car.Color %></mobile:Label>
</mobile:Panel>
Implementar un control de usuario
Después de crear un control de usuario móvil, puede agregarlo a una página Web de ASP.NET Mobile de las maneras siguientes:
Puede registrarlo en la página y declararlo en el marcado.
Puede cargarlo en la página mediante programación.
Para registrar un control de usuario, utilice la directiva @ Register. Para cargar el control mediante programación, utilice el método LoadControl.
En el ejemplo de código siguiente se muestra cómo registrar y utilizar un control personalizado de forma declarativa en una página y también cómo cargar un control de usuario mediante programación.
<%@ Page Language="VB"
Inherits="System.Web.UI.MobileControls.MobilePage" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<%@ Register TagPrefix="carp" TagName="CarControl"
Src="~/CarControl.ascx" %>
<script >
Protected Sub Page_Load( _
ByVal sender As Object, ByVal e As EventArgs)
' Set the existing car control's data
CarCtl.Car = New CarInfo("TreeCars", "Rooter", _
2003, "Tan")
' Load a new car control and set the data
Dim ccar As CarControl = _
CType(Page.LoadControl("~/CarControl.ascx"), _
CarControl)
ccar.ID = "newCarCtl"
' Set the new car control's data
ccar.Car = New CarInfo("TreeCars", "Climber", _
2001, "Green")
' Add the new car control to form2.Controls
form2.Controls.Add(ccar)
' Bind the data and the controls
DataBind()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<mobile:form id="form1" >
<carp:CarControl ID="CarCtl" /><br />
<mobile:Link ID="Link1" Runat="server"
href="#form2" Text="Next" />
</mobile:form>
<mobile:form ID="form2" Runat="server">
<mobile:Link id="Link2"
BreakAfter="true"
Text="Return" href="#form1" />
<br />
</mobile:form>
</body>
</html>
<%@ Page Language="C#"
Inherits="System.Web.UI.MobileControls.MobilePage" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<%@ Register TagPrefix="carp" TagName="CarControl"
Src="CarControl.ascx" %>
<script >
protected void Page_Load(
object sender, EventArgs e)
{
// Set the existing car control's data
CarCtl.Car = new CarInfo("TreeCars", "Rooter",
2003, "Tan");
// Load a new car control and set the data
CarControl ccar =
(CarControl)Page.LoadControl("~/CarControl.ascx");
ccar.ID = "newCarCtl";
// Set the new car control's data
ccar.Car = new CarInfo("TreeCars", "Climber",
2001, "Green");
// Add the new car control to form2.Controls
form2.Controls.Add(ccar);
// Bind the data and the controls
DataBind();
}
// Toggles the visible form
protected void Command_Click(
object sender, EventArgs e)
{
if (this.ActiveForm == form1)
this.ActiveForm = form2;
else
this.ActiveForm = form1;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<mobile:form id="form1" >
<carp:CarControl ID="CarCtl" /><br />
<mobile:Command ID="Command1" Runat="server"
OnClick="Command_Click">Next</mobile:Command>
</mobile:form>
<mobile:form ID="form2" Runat="server">
<mobile:Command ID="Command2" Runat="server"
OnClick="Command_Click">Return</mobile:Command>
<br />
</mobile:form>
</body>
</html>
Resolver direcciones URL
Cuando se crea una página que tiene acceso a un control de usuario ubicado en un directorio diferente, todas las direcciones URL relativas que figuran en el control se resuelven en relación con el directorio del control de usuario, no con respecto al directorio de la página. A continuación se describe un escenario típico:
La dirección de la página es /Default.aspx.
La página contiene el control de usuario subcarpeta/UserControl.ascx.
El control de usuario, a su vez, contiene el control de usuario B.ascx.
En este escenario, B.ascx se resuelve como subcarpeta/B.ascx. Esta manera de resolver las direcciones URL permite al control de usuario encapsular vínculos u otros recursos relativos que pudiera necesitar.
Las direcciones URL siguientes se resuelven con respecto a un control de usuario:
Todas las direcciones URL de exploración; por ejemplo, las direcciones URL para un control Link.
Las direcciones URL de una imagen en un control Image.
Las direcciones URL de una acción para un control Form.
Al escribir controles o adaptadores de controles, se debe garantizar que las direcciones URL relativas se resuelvan donde sea necesario. En los controles y adaptadores, llame al método ResolveUrl del control móvil para resolver una dirección URL relativa al directorio que contiene la página o el control de usuario. Algunos métodos auxiliares de las clases base de adaptadores llaman de forma automática al método ResolveUrl para resolver hipervínculos.
Una excepción es cuando se incluye un control DeviceSpecific en un control de usuario personalizado y el control de usuario hace referencia a filtros de dispositivo incluidos en la sección <deviceFilters> del archivo Web.config. En ese caso, el control utiliza el archivo Web.config del directorio donde se encuentra la página, no el archivo Web.config ubicado en el subdirectorio del control.
Formato y vínculos en controles de usuario y referencias de formularios
Es posible establecer un vínculo a un formulario en la misma página mediante una dirección URL que empiece por el signo de número (#) seguido del id. del formulario. En el ejemplo de código siguiente se utiliza la propiedad href del control Link para especificar la dirección URL.
<mobile:Link ID="Link1" Runat="server"
href="#form2" Text="Next" />
En un escenario típico, un control de usuario se encuentra insertado en una página en el nivel superior. La página y el control de usuario podrían contener uno o más formularios. Los controles de la página y de cada control de usuario pueden hacer referencia a formularios contenidos unos en otros, de acuerdo con las normas siguientes:
Cuando un control de la página hace referencia a un formulario en un control de usuario secundario, la dirección URL debe incluir el id. único completo del formulario. El formato es ucid:formid, donde ucid es el id. del control de usuario y formid es el id. del formulario.
Si un control ubicado dentro de un control de usuario hace referencia a un formulario, ASP.NET busca primero el formulario en el control de usuario, a continuación en su superior, y así sucesivamente, siguiendo toda la jerarquía en orden ascendente hasta llegar al nivel de página.
Supongamos, por ejemplo, que una página contiene dos formularios cuyos identificadores son FormA y FormB. La página contiene también un control de usuario de nivel superior con el id. UserControl1. Este control de usuario contiene dos formularios adicionales cuyos identificadores FormA y FormC. La tabla siguiente muestra ejemplos de posibles direcciones URL y su comportamiento en este escenario.
Ubicación del control |
URL de formulario |
Comportamiento |
|---|---|---|
En la página |
#FormA |
Se vincula a FormA en la propia página. |
En la página |
#FormC |
Inicia una excepción, porque la página no contiene ningún formulario con el id. especificado. (Sólo el control de usuario tiene este tipo de formulario.) |
En la página |
#UserControl1:FormA |
Se vincula a FormA en el control de usuario. |
En el control de usuario |
#FormA |
Se vincula a FormA en el control de usuario, debido a que ASP.NET busca primero en el propio control de usuario. |
En el control de usuario |
#FormB |
Se vincula a FormB en la página, ya que ASP.NET resuelve la referencia de formulario con respecto al elemento principal del control de usuario. |
Consideraciones especiales para crear controles de usuario móviles
Al desarrollar controles de usuario para aplicaciones móviles se deben tener en cuenta los aspectos siguientes.
Trabajar con estilos predefinidos
Para obtener una compatibilidad total en los controles de usuario en cuanto a funcionalidad de estilos, al crear controles de usuario móviles, éstos se deben derivar de la clase MobileUserControl en el archivo .ascx, en lugar de derivarlos de la clase UserControl estándar. El ejemplo de código siguiente lo demuestra.
<%@ Control Language="C#"
Inherits="System.Web.UI.MobileControls.MobileUserControl"
%>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
La ubicación del archivo Web.config afecta a su uso
ASP.NET utiliza el directorio de la página que se está ejecutando para encontrar la información de configuración de los controles de esa página. Por tanto, si se han definido filtros específicos del dispositivo en un archivo Web.config, ese archivo Web.config se debe encontrar en la raíz de la sección de páginas Web móviles de la aplicación Web ASP.NET. Por ejemplo, si tiene una página denominada /Reports/Report1.aspx que incluye un control de usuario denominado /Sales/Inventory.ascx y también tiene un archivo /Sales/Web.config que contiene filtros de dispositivo, el control /Sales/Inventory.ascx buscará las definiciones de filtro de dispositivo en el archivo /Reports/Web.config, no en el archivo /Sales/Web.config.
Administrar texto literal en controles de usuario
El texto de un control de usuario se analiza como LiteralControl y no como un control LiteralText. Si el control de usuario contiene texto literal y contiene controles con paginación interna, como Form, el texto aparece en todas las páginas. Para evitar este problema, el contenido del control de usuario debe situarse en un control Panel; de este modo, el marco de trabajo de páginas ASP.NET analizará el texto y lo tratará como un control LiteralText.