Controlli utente

Aggiornamento: novembre 2007

I controlli utente mobili ASP.NET consentono di creare un controllo utente personalizzato in una pagina Web ASP.NET per dispositivi mobili in modo rapido ed efficiente. È possibile utilizzare il contenuto delle pagine per dispositivi mobili all'interno di un'altra pagina per dispositivi mobili combinando uno o più controlli con la relativa logica associata e incapsulandoli quindi in un controllo utente. Tranne alcune eccezioni, un controllo utente è identico a un controllo MobilePage.

Un controllo utente mobile ha le seguenti caratteristiche:

• Deve avere l'estensione di file ASCX.

• Non richiede una direttiva @ Page.

• Deve contenere una direttiva @ Register.

Per consentire di dichiarare i controlli mobili nel controllo utente, la direttiva @ Register associa gli alias agli spazi dei nomi e alle classi.

ASP.NET consente di distinguere tra i controlli utente e i controlli compositi. Il controllo utente viene mantenuto in un file di testo ASCX, mentre il controllo composito viene compilato e mantenuto in un assembly. Nelle pagine Web ASP.NET per dispositivi mobili un controllo utente può contenere più controlli, come illustrato negli esempi di questo argomento.

Creazione di un controllo utente

Un nuovo controllo utente viene creato generando un file con estensione ASCX. Nell'esempio di codice che segue è contenuto un controllo utente che utilizza più etichette per visualizzare le informazioni dettagliate relative a un'automobile.

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

Distribuzione di un controllo utente

Dopo aver creato un controllo utente mobile, è possibile aggiungerlo a una pagina Web ASP.NET per dispositivi mobili procedendo nei seguenti modi:

• Registrandolo nella pagina e dichiarandolo nei tag.

• Caricando il controllo a livello di codice nella pagina.

Per registrare un controllo utente, utilizzare la direttiva @ Register. Per caricare il controllo a livello di codice, utilizzare il metodo LoadControl.

Nel codice di esempio riportato di seguito viene descritto come registrare e utilizzare in modo dichiarativo in una pagina un controllo personalizzato, nonché come caricare un controllo utente a livello di codice.

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

Risoluzione di URL

Quando si crea una pagina che accede a un controllo utente contenuto in un'altra directory, tutti gli URL relativi del controllo utente vengono risolti in relazione alla directory del controllo utente anziché alla directory della pagina. Viene descritto di seguito uno scenario tipico:

• L'indirizzo della pagina è /Default.aspx.

• Nella pagina è contenuto il controllo utente sottocartella/UserControl.ascx.

• Nel controllo utente è contenuto a sua volta il controllo utente B.ascx.

In questo scenario B.ascx viene risolto come sottocartella/B.ascx. Risolvendo gli URL in questo modo è possibile incapsulare nel controllo utente tutti i collegamenti o altre risorse relative ritenute necessarie.

Gli URL seguenti vengono risolti in relazione a un controllo utente:

• Tutti gli URL di esplorazione, ad esempio gli URL per un controllo Link.

• Un URL di un'immagine in un controllo Image.

• Un URL di azione per un controllo Form.

Quando si scrivono i controlli o gli adattatori di controllo, è necessario assicurare la risoluzione degli URL relativi se necessario. Nei controlli e negli adattatori chiamare il metodo ResolveUrl del controllo mobile per risolvere un URL relativo alla directory contenente la pagina o il controllo utente. Alcuni metodi di supporto nelle classi base degli adattatori chiamano automaticamente il metodo ResolveUrl per risolvere i collegamenti ipertestuali.

Si verifica un'eccezione se si include un controllo DeviceSpecific in un controllo utente personalizzato e il controllo utente fa riferimento a filtri di periferica elencati nella sezione <deviceFilters> del file Web.config. In questo caso nel controllo viene utilizzato il file Web.config contenuto nella directory in cui si trova la pagina anziché il file Web.config contenuto nella sottodirectory del controllo.

Formattazione e collegamento nei controlli utente e nei riferimenti ai form

È possibile eseguire il collegamento a un form nella stessa pagina utilizzando un URL che inizia con un simbolo di cancelletto (#) seguito dall'ID del form. Nell'esempio di codice riportato di seguito viene utilizzata la proprietà href del controllo Link per specificare l'URL.

<mobile:Link ID="Link1" Runat="server"
    href="#form2" Text="Next" />

In uno scenario tipico si dispone di un controllo utente inserito in una pagina nel livello principale. Nella pagina e nel controllo utente possono essere contenuti uno o più form. I controlli presenti nella pagina e in ogni controllo utente possono fare riferimento ai form contenuti l'uno all'interno dell'altro in base alle seguenti regole:

• Quando un controllo nella pagina fa riferimento a un form in un controllo utente figlio, nell'URL deve essere incluso l'ID univoco completo del form. Il formato è ucid:formid, dove ucid è l'ID del controllo utente e formid è l'ID del form.

• Quando un controllo all'interno di un controllo utente fa riferimento a un form, quest'ultimo viene cercato prima nel controllo utente, poi nel relativo elemento padre e così via verso l'alto fino al livello di pagina.

Si supponga ad esempio che in una pagina siano contenuti due form i cui ID sono FormA e FormB. In questa pagina è contenuto inoltre un controllo utente di primo livello con ID UserControl1. Nel controllo utente sono contenuti altri due form i cui ID sono FormA e FormC. Nella tabella riportata di seguito sono illustrati esempi di possibili URL e il relativo comportamento in relazione a questo scenario.

Posizione del controllo	URL del form	Comportamento
Nella pagina	#FormA	Collega a FormA nella pagina stessa.
Nella pagina	#FormC	Genera un'eccezione, perché nella pagina non è contenuto alcun form con l'ID specificato. Solo il controllo utente dispone di form di questo tipo.
Nella pagina	#UserControl1:FormA	Collega a FormA nel controllo utente.
Nel controllo utente	#FormA	Collega a FormA nel controllo utente in quanto in ASP.NET la ricerca viene effettuata prima nel controllo utente stesso.
Nel controllo utente	#FormB	Collega a FormB nella pagina in quanto in ASP.NET il riferimento al form viene risolto in relazione all'elemento padre del controllo utente.

Considerazioni particolari per la creazione di controlli utente mobili

Quando si sviluppano i controlli utente per l'applicazione mobile, è necessario considerare i problemi riportati di seguito.

Utilizzo di stili predefiniti

Per un supporto degli stili completamente funzionale nei controlli utente, quando si creano controlli utente mobili è necessario che i controlli derivino dalla classe MobileUserControl nel file ascx anziché dalla classe UserControl standard, come indicato nell'esempio di codice riportato di seguito:

<%@ Control Language="C#"
    Inherits="System.Web.UI.MobileControls.MobileUserControl" 
    %>
<%@ Register TagPrefix="mobile" 
    Namespace="System.Web.UI.MobileControls" 
    Assembly="System.Web.Mobile" %>

Influenza del percorso del file Web.config sull'utilizzo

In ASP.NET viene utilizzata la directory della pagina attualmente in esecuzione per trovare informazioni sulla configurazione per i controlli della pagina. Se pertanto sono definiti filtri specifici di un dispositivo in un file Web.config, tale file deve essere contenuto nella directory principale della sezione delle pagine Web per dispositivi mobili dell'applicazione Web ASP.NET. Se ad esempio si dispone di una pagina denominata /Reports/Report1.aspx in cui è incluso un controllo utente denominato /Sales/Inventory.ascx e si dispone anche di un file /Sales/Web.config contenente filtri di periferica, il controllo /Sales/Inventory.ascx ricercherà le definizioni dei filtri di periferica nel file /Reports/Web.config anziché nel file /Sales/Web.config.

Gestione di testo letterale nei controlli utente

Il testo di un controllo utente viene analizzato come LiteralControl e non come controllo LiteralText. Se nel controllo utente sono contenuti testo letterale e controlli con impaginazione interna, ad esempio Form, il testo verrà visualizzato in tutte le pagine. Per ovviare a questo problema, inserire il contenuto del controllo utente in un controllo Panel in modo che il testo venga analizzato dal framework della pagina ASP.NET e venga gestito come controllo LiteralText.

Vedere anche

Riferimenti

MobilePage

Altre risorse

Creazione di controlli mobili personalizzati