Sdílet prostřednictvím


Benutzersteuerelemente

Aktualisiert: November 2007

ASP.NET Mobile-Benutzersteuerelemente bieten ein schnelles, effizientes Verfahren zum Erstellen eines eigenes Benutzersteuerelements auf einer ASP.NET Mobile-Webseite. Sie können den Inhalt einer beliebigen mobilen Seite in einer anderen mobilen Seite verwenden, indem Sie ein oder mehrere Steuerelemente mit der zugeordneten Logik kombinieren und in einem Benutzersteuerelement kapseln. Mit wenigen Ausnahmen ist ein Benutzersteuerelement mit einem MobilePage-Steuerelement identisch.

Ein mobiles Benutzersteuerelement:

  • Muss die Dateinamenerweiterung .ascx haben

  • Erfordert keine @ Page-Direktive.

  • Muss eine @ Register-Direktive enthalten.

Die @ Register-Direktive ordnet Aliasen Namespaces und Klassen zu, sodass Sie im Benutzersteuerelement mobile Steuerelemente deklarieren können.

In ASP.NET wird zwischen Benutzersteuerelementen und zusammengesetzten Steuerelementen unterschieden. Ein Benutzersteuerelement wird als ASCX-Textdatei gespeichert, während ein zusammengesetztes Steuerelement in einer Assembly kompiliert und gespeichert wird. In ASP.NET Mobile-Webseiten kann ein Benutzersteuerelement mehre Steuerelemente enthalten, wie die Beispiele in diesem Thema zeigen.

Erstellen eines Benutzersteuerelements

Neue Benutzersteuerelemente werden durch das Anlegen einer Datei mit der Erweiterung .ascx erstellt. Das folgende Codebeispiel enthält ein Benutzersteuerelement, das mehrere Bezeichnungen verwendet, um Informationen über ein Auto anzuzeigen.

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

<script runat="server">
    ' 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" runat="server" BreakAfter="true">
        Make: <%# Car.Make %></mobile:Label>
    <mobile:Label id="Label2" runat="server" BreakAfter="true">
        Model: <%# Car.Model %></mobile:Label>
    <mobile:Label id="Label3" runat="server" BreakAfter="true">
        Year: <%# Car.Year %></mobile:Label>
    <mobile:Label id="Label4" runat="server" 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 runat="server">
    // 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" runat="server" BreakAfter="true">
        Make: <%# Car.Make %></mobile:Label>
    <mobile:Label id="Label2" runat="server" BreakAfter="true">
        Model: <%# Car.Model %></mobile:Label>
    <mobile:Label id="Label3" runat="server" BreakAfter="true">
        Year: <%# Car.Year %></mobile:Label>
    <mobile:Label id="Label4" runat="server" BreakAfter="true">
        Color: <%# Car.Color %></mobile:Label>
</mobile:Panel>

Bereitstellen eines Benutzersteuerelements

Nachdem Sie ein mobiles Benutzersteuerelement erstellt haben, können Sie es auf folgende Arten einer ASP.NET Mobile-Webseite hinzufügen:

  • Sie registrieren es auf der Seite und deklarieren es im Markup.

  • Sie laden das Steuerelement programmgesteuert in die Seite.

Um ein Benutzersteuerelement zu registrieren, verwenden Sie die @ Register-Direktive. Um das Steuerelement programmgesteuert zu laden, verwenden Sie die LoadControl-Methode.

Der folgende Beispielcode zeigt, wie ein benutzerdefiniertes Steuerelement deklarativ in einer Seite registriert und verwendet wird, außerdem, wie ein Benutzersteuerelement programmgesteuert geladen wird.

<%@ 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 runat="server">
    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" runat="server">
        <carp:CarControl ID="CarCtl" runat="server" /><br />
        <mobile:Link ID="Link1" Runat="server"
            href="#form2" Text="Next" />
    </mobile:form>
    <mobile:form ID="form2" Runat="server">
        <mobile:Link runat="server" 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 runat="server">
    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" runat="server">
        <carp:CarControl ID="CarCtl" runat="server" /><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>

Auflösen von URLs

Wenn Sie eine Seite mit Zugriff auf ein Benutzersteuerelement erstellen, das sich in einem anderen Verzeichnis befindet, werden alle relativen URLs im Benutzersteuerelement relativ zum Verzeichnis des Benutzersteuerelements aufgelöst und nicht relativ zum Verzeichnis der Seite. Im Folgenden wird ein typisches Szenario beschrieben:

  • Die Adresse der Seite lautet /Default.aspx.

  • Die Seite enthält das Benutzersteuerelement Unterordner/UserControl.ascx.

  • Das Benutzersteuerelement wiederum enthält das Benutzersteuerelement B.ascx.

In diesem Szenario wird B.ascx als Unterordner/B.ascx aufgelöst. Werden URLs auf diese Weise aufgelöst, kann das Benutzersteuerelement alle Verknüpfungen oder andere verwandte Ressourcen, die es möglicherweise benötigt, kapseln.

Die folgenden URLs werden relativ zu einem Benutzersteuerelement aufgelöst:

  • Navigations-URLs, zum Beispiel URLs für ein Link-Steuerelement.

  • Eine Bild-URL für ein Image-Steuerelement.

  • Eine Aktions-URL für ein Form-Steuerelement.

Beim Schreiben von Steuerelementen oder Steuerelementadaptern müssen Sie sicherstellen, dass Sie relative URLs auflösen, wenn dies erforderlich ist. Rufen Sie in eigenen Steuerelementen und Adaptern die ResolveUrl-Methode des mobilen Steuerelements auf, um einen URL relativ zum Verzeichnis mit der Seite oder dem Benutzersteuerelement aufzulösen. Einige Hilfsmethoden der Adapterbasisklassen rufen die ResolveUrl-Methode automatisch auf, um Hyperlinks aufzulösen.

Eine Ausnahme liegt vor, wenn Sie ein DeviceSpecific-Steuerelement in ein angepasstes Benutzersteuerelement einschließen und das Benutzersteuerelement auf Gerätefilter im <deviceFilters>-Abschnitt der Datei Web.config verweist. In diesem Fall verwendet das Steuerelement die Datei Web.config aus dem Verzeichnis, in dem sich die Seite befindet, nicht die Datei Web.config aus dem Unterverzeichnis des Steuerelements.

Formatieren und Verknüpfen in Benutzersteuerelementen und Formularverweisen

Sie können mit einem URL, der mit einem Nummernzeichen (#) beginnt und danach die Formular-ID enthält, eine Verknüpfung zu einem Formular auf derselben Seite setzen. Das folgende Codebeispiel verwendet zur Angabe des URL die href-Eigenschaft des Link-Steuerelements.

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

Bei einem typischen Szenario wird ein Benutzersteuerelement auf der obersten Ebene in eine Seite eingefügt. Die Seite und das Benutzersteuerelement können ein oder mehrere Formulare enthalten. Steuerelemente auf der Seite und in jedem Benutzersteuerelement können unter Einhaltung folgender Regeln auf Formulare verweisen, die in einem anderen Formular enthalten sind:

  • Wenn ein Steuerelement auf der Seite auf ein Formular in einem untergeordneten Benutzersteuerelement verweist, muss der URL die vollständige, eindeutige ID des Formulars enthalten. Das Format lautet ucid:formid, wobei ucid die ID des Benutzersteuerelements ist und formid die ID des Formulars.

  • Wenn ein Steuerelement in einem Benutzersteuerelement auf ein Formular verweist, sucht ASP.NET zunächst im Benutzersteuerelement nach dem Formular, dann in dem übergeordneten Steuerelement usw. bis zur Seitenebene.

Angenommen, eine Seite enthält zwei Formulare mit den IDs FormA und FormB. Die Seite enthält auch ein Benutzersteuerelement der obersten Ebene mit der ID UserControl1. Dieses Benutzersteuerelement enthält zwei weitere Formulare mit den IDs FormA und FormC. In der folgenden Tabelle sind für dieses Szenario Beispiele möglicher URLs und ihr Verhalten aufgeführt.

Position des Steuerelements

Formular-URL

Verhalten

Auf der Seite

#FormA

Stellt eine Verknüpfung zu FormA auf der Seite selbst her.

Auf der Seite

#FormC

Löst eine Ausnahme aus, da die Seite kein Formular mit der angegebenen ID enthält. (Nur das Benutzersteuerelement besitzt ein solches Formular.)

Auf der Seite

#UserControl1:FormA

Stellt eine Verknüpfung zu FormA im Benutzersteuerelement her.

Im Benutzersteuerelement

#FormA

Stellt eine Verknüpfung zu FormA im Benutzersteuerelement her, da ASP.NET zunächst im Benutzersteuerelement selbst sucht.

Im Benutzersteuerelement

#FormB

Stellt eine Verknüpfung zu FormB auf der Seite her, da ASP.NET den Formularverweis relativ zum übergeordneten Steuerelement des Benutzersteuerelements auflöst.

Besonderheiten beim Erstellen mobiler Benutzersteuerelemente

Wenn Sie Benutzersteuerelemente für eine mobile Anwendung entwickeln, müssen Sie folgende Punkte beachten.

Arbeiten mit vordefinierten Stilen

Für die vollständig funktionsfähige Unterstützung von Stilen in Benutzersteuerelementen müssen Sie beim Erstellen mobiler Benutzersteuerelemente diese in der ASCX-Datei von der MobileUserControl-Klasse statt von der UserControl-Standardklasse ableiten. Im folgenden Codebeispiel wird dies verdeutlicht.

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

Der Speicherort der Datei Web.config wirkt sich auf die Verwendung aus

ASP.NET sucht Konfigurationsinformationen für Steuerelemente in der aktuell ausgeführten Seite im Verzeichnis dieser Seite. Wenn also gerätespezifische Filter in einer Web.config-Datei definiert sind, muss sich diese Datei im Stamm des Abschnitts für mobile Webseiten der ASP.NET-Webanwendung befinden. Wenn zum Beispiel eine Seite mit dem Namen /Reports/Report1.aspx vorhanden ist, die ein Benutzersteuerelement mit dem Namen /Sales/Inventory.ascx enthält, und wenn außerdem die Datei /Sales/Web.config vorhanden ist, die Gerätefilter enthält, wird das Steuerelement /Sales/Inventory.ascx in der Datei /Reports/Web.config nach Gerätefilterdefinitionen suchen, nicht in der Datei /Sales/Web.config.

Behandeln von Literaltext in Benutzersteuerelementen

Text in einem Benutzersteuerelement wird als LiteralControl-Steuerelement analysiert und nicht als LiteralText-Steuerelement. Wenn das Benutzersteuerelement Literaltext und Steuerelemente mit interner Paginierung enthält (z. B. Form), wird der Text auf allen Seiten angezeigt. Sie können dies vermeiden, indem Sie den Inhalt des Benutzersteuerelements in einem Panel-Steuerelement platzieren, sodass der Text durch das ASP.NET-Seitenframework analysiert und als LiteralText-Steuerelement behandelt wird.

Siehe auch

Referenz

MobilePage

Weitere Ressourcen

Erstellen von benutzerdefinierten mobilen Steuerelementen