ユーザー コントロール

更新 : 2007 年 11 月

ASP.NET モバイル ユーザー コントロールを使用すると、独自のユーザー コントロールをすばやく効率的に ASP.NET モバイル Web ページに作成できます。他のモバイル ページ内のモバイル ページのコンテンツは、関連付けられたロジックで 1 つまたは複数のコントロールを組み合わせ、1 つのユーザー コントロールにカプセル化して使用できます。いくつかの点を除き、ユーザー コントロールは MobilePage コントロールとほぼ同じです。

モバイル ユーザー コントロールの特徴は以下のとおりです。

• ファイルの拡張子は、.ascx にする必要があります。

• @ Page ディレクティブを必要としません。

• @ Register ディレクティブが含まれている必要があります。

@ Register ディレクティブは、エイリアスを名前空間とクラスに関連付けるため、ユーザー コントロールでモバイル コントロールを宣言できます。

ASP.NET では、ユーザー コントロールと複合コントロールは区別されます。ユーザー コントロールは .ascx テキスト ファイルとして保持されるのに対し、複合コントロールはコンパイルされ、アセンブリ内に保持されます。このトピックの例で示すように、ASP.NET モバイル Web ページでは、ユーザー コントロールに複数のコントロールを含めることができます。

ユーザー コントロールの作成

新しいユーザー コントロールを作成するには、拡張子が .ascx のファイルを作成します。次のサンプル コードには、複数のラベルを使用して自動車の詳細を表示するユーザー コントロールが含まれています。

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

ユーザー コントロールの配置

作成したモバイル ユーザー コントロールは、次の方法で ASP.NET モバイル Web ページに追加できます。

• ページに登録し、マークアップで宣言する。

• プログラムでコントロールをページに読み込む。

ユーザー コントロールを登録するには、@ Register ディレクティブを使用します。プログラムでコントロールを読み込むには、LoadControl メソッドを使用します。

次のプログラム例は、カスタム コントロールをページに登録し、宣言して使用する方法、およびプログラムでユーザー コントロールを読み込む方法を示しています。

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

URL の解決

他のディレクトリに置かれているユーザー コントロールにアクセスするページを作成するときは、ページのディレクトリではなく、ユーザー コントロールのディレクトリを基準として、ユーザー コントロールのすべての相対 URL を解決する必要があります。以下に、一般的なケースを説明します。

• ページのアドレスは、/Default.aspx です。

• ページには、subfolder/UserControl.ascx というユーザー コントロールが含まれています。

• さらに、このユーザー コントロールに、B.ascx というユーザー コントロールが含まれています。

このシナリオでは、B.ascx が subfolder/B.ascx として解決されます。この方法で URL を解決すると、ユーザー コントロールは、必要なあらゆるリンクまたは他の関連リソースをカプセル化できます。

以下の URL は、ユーザー コントロールを基準として解決されます。

• 移動先の URL (Link コントロールの URL など)

• Image コントロールのイメージ URL

• Form コントロールのアクション URL

コントロールまたはコントロール アダプタを記述するときは、必要に応じて相対 URL を解決するようにしてください。コントロールおよびアダプタで、モバイル コントロールの ResolveUrl メソッドを呼び出し、ページまたはユーザー コントロールが格納されているディレクトリを基準とする URL を解決します。アダプタ基本クラス内のヘルパー メソッドには、ResolveUrl メソッドを自動的に呼び出してハイパーリンクを解決するものがあります。

ただし、カスタム ユーザー コントロールに DeviceSpecific コントロールを含めると、ユーザー コントロールは Web.config ファイルの <deviceFilters> セクションに記述されたデバイス フィルタを参照します。この場合、ユーザー コントロールは、コントロールのサブディレクトリ内にある Web.config ファイルではなく、ページが格納されているディレクトリ内の Web.config ファイルを使用します。

ユーザー コントロールおよびフォームの参照での書式設定とリンク

シャープ記号 (#) で始まり、その後にフォームの ID が続く URL を使用すると、同じページのフォームにリンクできます。次のプログラム例は、Link コントロールの href プロパティを使用して URL を指定しています。

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

一般的なケースでは、ユーザー コントロールはページの最上位に挿入されます。このページには、1 つまたは複数のフォームが含まれている場合があります。ページおよび各ユーザー コントロール上のコントロールは、以下の規則に従って、互いのコントロール内部にあるフォームを参照できます。

• ページ上のコントロールが子ユーザー コントロール内のフォームを参照するときは、完全に一意なフォームの ID が URL に含まれている必要があります。ID は ucid:formid の形式で指定し、ucid はユーザー コントロールの ID、formid はフォームの ID です。

• ユーザー コントロール内のコントロールがフォームを参照するときは、ASP.NET は、最初にユーザー コントロールでフォームを検索し、次にその親でフォームを検索するというように、ページ レベルの上位に向かって検索していきます。

たとえば、ID が FormA と FormB の 2 つのフォームがページにあるとします。このページには ID が UserControl1 の最上位のユーザー コントロールもあります。このユーザー コントロールには、ID が FormA と FormC である追加のフォームが 2 つあります。このような場合に推定される URL、およびその動作を以下の表に示します。

コントロールの場所	フォームの URL	動作
ページ上	#FormA	このページ自身の FormA にリンクします。
ページ上	#FormC	ページには指定された ID のフォームがないため、例外が発生します (このようなフォームはユーザー コントロールにのみあります)。
ページ上	#UserControl1:FormA	ユーザー コントロールの FormA にリンクします。
ユーザー コントロール内	#FormA	ASP.NET が最初にユーザー コントロール自体を検索するため、ユーザー コントロールの FormA にリンクします。
ユーザー コントロール内	#FormB	ASP.NET はユーザー コントロールの親を基準としてフォームの参照を解決するため、ページの FormB にリンクします。

モバイル ユーザー コントロールを作成する場合の特別な考慮事項

モバイル アプリケーションのユーザー コントロールを開発するときには、次の事項を考慮する必要があります。

定義済みスタイルの使用方法

ユーザー コントロールで機能性の高いスタイルをサポートするには、モバイル ユーザー コントロールを作成するときに、標準の UserControl クラスではなく、.ascx ファイルの MobileUserControl クラスからモバイル ユーザー コントロールを派生させる必要があります。次のコード例は、この処理を示しています。

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

Web.config ファイルの場所による用途への影響

ASP.NET は、現在実行しているページのディレクトリを使用して、そのページのコントロールの構成情報を検索します。このため、Web.config ファイルで定義されているデバイス固有のフィルタがある場合、その Web.config ファイルは、ASP.NET Web アプリケーションのモバイル Web ページ セクションのルートに格納されている必要があります。たとえば、/Sales/Inventory.ascx という名前のユーザー コントロールが含まれている /Reports/Report1.aspx という名前のページがあり、また、デバイス フィルタが含まれている /Sales/Web.config ファイルもある場合、/Sales/Inventory.ascx コントロールは、/Sales/Web.config ファイルではなく /Reports/Web.config ファイルでデバイス フィルタの定義を検索します。

ユーザー コントロールのリテラル テキストの処理

ユーザー コントロールのテキストは、LiteralText コントロールではなく、LiteralControl として解析されます。ユーザー コントロールにリテラル テキストが含まれている場合、そのユーザー コントロールに、内部改ページ調整が指定された Form などのコントロールが含まれていると、すべてのページにリテラル テキストが表示されます。この問題を回避するには、ユーザー コントロールのコンテンツを Panel コントロール内に配置し、このテキストが ASP.NET ページ フレームワークによって解析され、LiteralText として処理されるようにします。

参照

参照

MobilePage

その他の技術情報

カスタム モバイル コントロールの作成