Пользовательские элементы управления

Статья
11/16/2008

Обновлен: Ноябрь 2007

Пользовательские элементы управления для мобильных устройств ASP.NET представляют собой быстрый и эффективный способ создания собственных пользовательских элементов управления на веб-странице ASP.NET. Содержимое любой мобильной страницы можно использовать внутри другой мобильной страницы путем комбинирования одного или нескольких элементов управления со связанной логикой и их последующего инкапсулирования в пользовательский элемент. За некоторыми исключениями пользовательский элемент управления идентичен элементу управления MobilePage.

Пользовательский элемент управления для мобильных устройств:

должен иметь расширение имени ASCX-файла;
не требует директивы @ Page;
должен содержать директиву @ Register.

Директива @ Register связывает псевдонимы с пространствами имен и классами, позволяя объявлять элементы управления для мобильных устройств в пользовательском элементе управления.

ASP.NET различает пользовательские и составные элементы управления. Пользовательский элемент управления сохраняется как текстовый файл с расширением ASCX, а составной элемент управления компилируется и сохраняется в сборке. На веб-страницах ASP.NET для мобильных устройств пользовательский элемент управления может содержать несколько элементов управления, что показано в примерах этого раздела.

Создание пользовательского элемента управления

Новый пользовательский элемент управления создается путем создания файла с расширением 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 для мобильных устройств одним из следующих способов:

путем его регистрации на странице и объявления в разметке;
путем программной загрузки элемента управления на веб-страницу.

Чтобы зарегистрировать пользовательский элемент управления, используйте директиву @ 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-адреса переходов — например, URL-адреса для элемента управления Link.
URL-адрес изображения в элементе управления Image.
URL-адрес действия для элемента управления Form.

При создании элементов управления или адаптеров элементов управления необходимо убедиться, что относительные URL-адреса определяются там, где это необходимо. В элементах управления и адаптерах вызовите метод мобильного элемента ResolveUrl для определения URL-адреса, относительного для каталога, содержащего страницу или пользовательский элемент управления. Некоторые вспомогательные методы в базовых классах адаптера автоматически вызывают метод ResolveUrl для определения гиперссылок.

Исключением является ситуация, когда в настраиваемый пользовательский элемент управления включается элемент управления DeviceSpecific, а пользовательский элемент управления ссылается на фильтры устройств, представленные в разделе <deviceFilters> файла Web.config. В этом случае элемент управления использует файл Web.config в каталоге страницы, а не файл Web.config, расположенный в подкаталоге элемента управления.

Форматирование и ссылки в пользовательских элементах управления и ссылках форм

Ссылку на форму можно расположить на той же странице с помощью URL-адреса, который содержит знак решетки (#) и идентификатор формы. В следующем примере кода для указания URL-адреса используется свойство href элемента управления Link.

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

Обычно пользовательский элемент управления вставлен в страницу на верхнем уровне. Страница и пользовательский элемент управления могут содержать одну или несколько форм. Элементы управления на странице и на каждом пользовательском элементе управления могут ссылаться на формы, содержащиеся друг в друге, согласно следующим правилам:

Если элемент управления на странице ссылается на форму в дочернем элементе управления, то URL-адрес должен включать полный уникальный идентификатор формы. Форматом является ucid:formid, где ucid — это идентификатор пользовательского элемента управления, а formid — идентификатор формы.
Если элемент управления внутри пользовательского элемента управления ссылается на форму, то ASP.NET вначале ищет ее в пользовательском элементе управления, затем в родительском элементе и так далее, до уровня страницы.

Например, предположим, что страница содержит две формы, идентификаторами которых являются FormA и FormB. Страница также содержит пользовательский элемент управления верхнего уровня с идентификатором UserControl1. Данный пользовательский элемент управления содержит две дополнительных формы, идентификаторами которых являются FormA и FormC. В следующей таблице показаны примеры возможных URL-адресов и их поведение для этой ситуации:

Расположение элемента управления	URL-адрес формы	Поведение
На странице	#FormA	Ссылается на саму форму FormA.
На странице	#FormC	Выводит исключение, так как страница не содержит формы с указанным идентификатором. (Только пользовательский элемент управления содержит эту форму.)
На странице	#UserControl1:FormA	Ссылается на FormA в пользовательском элементе управления.
В пользовательском элементе управления	#FormA	Ссылается на FormA в пользовательском элементе управления, поскольку ASP.NET вначале ищет в самом элементе управления.
В пользовательском элементе управления	#FormB	Ссылается на FormB на странице, поскольку ASP.NET определяет ссылку на форму относительно родительского элемента для элемента управления.

Особые вопросы, связанные с созданием пользовательских элементов управления для мобильных устройств

При разработке пользовательских элементов управления для мобильных приложений необходимо принимать во внимание следующие вопросы.

Работа с предопределенными стилями

Для функциональной поддержки стилей в пользовательских элементах управления необходимо при их создании делать их производными от класса MobileUserControl в ASCX-файле, а не от стандартного класса UserControl. Следующий пример кода показывает это.

<%@ 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 определены фильтры для конкретных устройств, этот файл должен располагаться в корне раздела мобильных веб-страниц веб-приложения ASP.NET. Например, если страница с именем /Reports/Report1.aspx включает в себя пользовательский элемент управления с именем /Sales/Inventory.ascx, а файл /Sales/Web.config содержит фильтры устройств, то элемент управления /Sales/Inventory.ascx будет искать определения фильтров устройств в файле /Reports/Web.config, а не в файле /Sales/Web.config.

Обработка текста литерала в пользовательских элементах управления

Текст в пользовательском элементе управления обрабатывается как элемент управления LiteralControl, а не как LiteralText. Если пользовательский элемент управления содержит текст литерала или элементы управления с внутренним разбиением на страницы, например Form, то текст появляется на всех страницах. Чтобы избежать этого, разместите содержимое пользовательского элемента управления в элементе управления Panel. Таким образом, текст будет обрабатываться структурой страниц ASP.NET и рассматриваться как элемент управления LiteralText.

См. также

Ссылки

MobilePage

Другие ресурсы

Создание пользовательских элементов управления для мобильных устройств

Поделиться через