Настройка с помощью шаблонов

157

Анализируя структуру проекта в предыдущей статье, мы хотели обратить внимание на три момента. Во-первых, приложение динамических данных строится на основе ASP.NET. Во-вторых, динамические данные опираются на ряд шаблонов, которые используются для отображения и редактирования данных. В-третьих, и это является темой настоящей статьи, практически все аспекты приложения динамических данных могут быть настроены. Фактически существует такое множество различных способов расширения, изменения и адаптации приложений динамических данных, что выбор самого подходящего из них может оказаться непростым.

Шаблоны являются неотъемлемой частью приложений динамических данных, и в этой статье мы рассмотрим некоторые способы применения шаблонов для настройки представления данных клиентам. Некоторые из этих методик модифицируют существующие шаблоны, другие требуют создания новых шаблонов, а некоторые используют код, чтобы расширить поведение приложения. Все эти методы помогают подчеркнуть гибкость системы динамических данных ASP.NET, которая была разработана, чтобы сделать решение этих задач (сравнительно) безболезненным.

Редактирование шаблонов, используемых по умолчанию

Папка DynamicData\PageTemplates содержит шаблоны, которые используются по умолчанию для отображения, редактирования и создания записей данных. Изменение одного из этих шаблонов влияет на все таблицы в модели данных, которые используют настройки по умолчанию.

В качестве простого примера откройте шаблон по умолчанию List.aspx и переключитесь на представление проектирования. Щелкните на элементе управления GridView в середине страницы, а затем щелкните на небольшой стрелке редактирования, которая отображается у правого края таблицы, чтобы открыть меню GridView Tasks (Задачи GridView), как показано на рисунке ниже:

Меню GridView Tasks

С помощью этого меню можно изменить базовое поведение элемента управления GridView. Например, если снять отметку с флажка Enable Paging (Включить постраничное отображение), при просмотре таблицы все записи будут отображаться в виде длинного списка. Снятие отметки с флажка Enable Sorting (Включить сортировку) приводит к отключению возможности сортировки строк щелчком на заголовке столбца.

Давайте внесем простое, но наглядное изменение, отметив флажок Auto Format (Автоформатирование). В результате откроется диалоговое окно AutoFormat (Автоформат), которое позволяет применять к элементу управления GridView заранее определенные стили. Выберите в списке стиль Classic (Классический) и щелкните на кнопке OK. Выберите пункт Start Without Debugging в меню Debug и щелкните на имени любой таблицы на главной странице после того, как она будет загружена в браузер:

Просматривая таблицы одну за другой, можно убедиться, что примененное изменение форматирования влияет на списковое представление (List) для всех таблиц в модели данных. Именно этого и следует ожидать при изменении шаблона по умолчанию. Остальные представления - Edit (Редактирование), Update (Обновление) и т.д. - остаются неизменными, равно как и Default.aspx.

Создание специального шаблона страницы

Существование возможности изменения шаблона по умолчанию замечательно, но что если требуется настроить способ обработки только одной таблицы? Один из возможных подходов - создание специального шаблона страницы и его помещение в папку DynamicData\CustomPages.

Предположим, что необходимо использовать различные шаблоны для таблицы Products. Разверните дерево в окне Solution Explorer, чтобы можно было видеть папку DynamicData\CustomPages. Щелкните правой кнопкой на папке CustomPages, выберите в контекстном меню пункт New Folder (Создать папку) и назовите новую папку Products. Откройте папку PageTemplates, скопируйте страницу List.aspx и вставьте копию в только что созданную папку Products.

Дважды щелкните на только что созданной копии List.aspx - удостоверьтесь, что редактируете скопированный файл, а не используемый по умолчанию шаблон. Щелкните на смарт-теге справа от элемента управления GridView и снимите отметку с флажка Enable Paging. Снова щелкните на смарт-теге, отметьте флажок Auto Format и выберите в списке схему Brown Sugar (Коричневый сахар). Щелкните на кнопке OK, чтобы применить стиль и закрыть диалоговое окно AutoFormat.

Сохраните файл страницы и выберите пункт Start Without Debugging в меню Debug. Когда страница по умолчанию загрузится в браузер, выберите таблицу Products из списка. Вы увидите, что к ней применен ранее созданный специальный шаблон. Будет использована цветовая схема Brown Sugar, а поскольку постраничное отображение было отключено, все записи отображаются в виде длинного списка:

Применение специального шаблона

Вернитесь к главной странице и выберите одну из остальных таблиц. Вы убедитесь, что ко всем остальным страницам применяется шаблон, используемый по умолчанию.

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

Использование шаблонов сущностей

Шаблоны сущностей являются новым компонентом ASP.NET 4 и позволяют управлять компоновкой элементов на странице, не прибегая к созданию полностью нового шаблона.

Взглянув на шаблоны по умолчанию Edit.aspx, Insert.aspx и Details.aspx, несложно убедиться, что они используют элемент управления DynamicEntity. Этот компонент в представлении Design шаблона Edit.aspx показан на рисунке ниже:

Компонент DynamicEntity в шаблоне Edit.aspx

Если взглянуть на представление Source, можно видеть следующий оператор:

<asp:DynamicEntity runat="server" Mode="Edit" />

Элемент управления DynamicEntity генерирует представление для каждого отображаемого элемента данных. Для него существуют три режима, Default, Edit и Insert, которые соответствуют трем файлам в папке DynamicData\EntityTemplates - Default.ascx, Default_Edit.ascx, Default_Insert.ascx.

Изменение одного из этих шаблонов элемента управления изменяет способ отображения элементов данных для всех таблиц. Взгляните на файл Default.ascx:

<%@ Control Language="C#" CodeFile="Default.ascx.cs" Inherits="DefaultEntityTemplate" %>

<asp:EntityTemplate runat="server" ID="EntityTemplate1">
    <ItemTemplate>
        <tr class="td">
            <td class="DDLightHeader">
                <asp:Label runat="server" OnInit="Label_Init" />
            </td>
            <td>
                <asp:DynamicControl runat="server" OnInit="DynamicControl_Init" />
            </td>
        </tr>
    </ItemTemplate>
</asp:EntityTemplate>

В шаблоне страницы, в котором применяется этот шаблон сущности, каждое поле будет отображаться в виде двух столбцов. Первый столбец будет содержать имя поля (имя столбца таблицы базы данных), а второй - значение. Шаблон страницы Details.aspx использует шаблон элемента Default.ascx, поэтому при щелчке на ссылке Details (Подробные сведения) строки любой из таблиц отобразится примерно то, что показано на рисунке ниже:

Стандартный шаблон сущности Default.ascx

Изменение этого шаблона сущности приведет к изменению внешнего вида каждого элемента данных, который визуализируется таким образом. Добавьте в шаблон следующую дополнительную структуру:

<%@ Control Language="C#" CodeFile="Default.ascx.cs" Inherits="DefaultEntityTemplate" %>

<asp:EntityTemplate runat="server" ID="EntityTemplate1">
    <ItemTemplate>
        <tr class="td">
            <td class="DDLightHeader">
                <asp:Label ID="Label1" runat="server" Text="Имя поля: " />
            </td>
            <td>
                <asp:Label runat="server" OnInit="Label_Init" />
            </td>
            <td class="DDLightHeader">
                <asp:Label ID="Label2" runat="server" Text="Значение: " />
            </td>
            <td>
                <asp:DynamicControl runat="server" OnInit="DynamicControl_Init" />
            </td>
        </tr>
    </ItemTemplate>
</asp:EntityTemplate>

Все, что здесь было сделано - это добавление заголовков "Имя поля: " и "Значение: ". Сохраните эти изменения и просмотрите сведения о записи данных. Влияние изменений показано на рисунке ниже:

Результаты изменения шаблона сущности

Если взглянуть на представление сведений для других таблиц, можно убедиться, что изменение шаблона сущности повлияло на их все. Чтобы изменить способ отображения элементов данных только для одной таблицы, понадобится создать новый шаблон сущности.

Изменяя универсальный шаблон сущности, следует позаботиться о том, чтобы оставить DynamicControl на месте. Это требование обусловлено тем, что шаблон будет использоваться с рядом таблиц, и заранее не известно, какой будет структура таблицы. При создании шаблона для единственной таблицы можно ссылаться на отдельные столбцы таблицы и указывать совершенно точно, что следует включить или исключить из отображения.

Давайте создадим специальный шаблон сущности для таблицы Products. Щелкните правой кнопкой на папке EntityTemplates, в контекстном меню выберите пункт Add New Item (Добавить новый элемент) и укажите в списке шаблон Web User Control (Пользовательский веб-элемент управления}. Имя шаблона сущности должно соответствовать таблице базы данных, к которой его требуется применить. В данном случае используйте имя Products.ascx.

Скопируйте следующий код разметки в Products.ascx. Листинг содержит четыре строки таблицы, каждая из которых имеет именованную ссылку на столбец таблицы Products базы указанный свойством DataField элемента управления DynamicControl:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Products.ascx.cs" Inherits="DynamicData_EntityTemplates_Products" %>

<tr class="td">
    <td class="DDLightHeader">
        <asp:Label ID="Label1" runat="server" Text="Продукт" />
    </td>
    <td>
        <asp:DynamicControl ID="DynamicControll" runat="server" DataField="ProductName" />
    </td>
</tr>
<tr class="td">
    <td class="DDLightHeader">
        <asp:Label ID="Label2" runat="server" Text="Цена за штуку" />
    </td>
    <td>
        <asp:DynamicControl ID="DynamicControl2" runat="server" DataField="UnitPrice" />
    </td>
</tr>
<tr class="td">
    <td class="DDLightHeader">
        <asp:Label ID="Label3" runat="server" Text="Скидка?" />
    </td>
    <td>
        <asp:DynamicControl ID="DynamicControl3" runat="server" DataField="Discontinued" />
    </td>
</tr>
<tr class="td">
    <td class="DDLightHeader">
        <asp:Label ID="Label4" runat="server" Text="На складе, шт" />
    </td>
    <td>
        <asp:DynamicControl ID="DynamicControl4" runat="server" DataField="UnitsInStock" />
    </td>
</tr>

Откройте файл отделенного кода Products.ascx.cs, добавьте оператор using для пространства имен System.Web.DynamicData и измените базовый класс на EntityTemplateUserControl, как показано в следующем примере:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.DynamicData;

public partial class DynamicData_EntityTemplates_Products : EntityTemplateUserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

Сохраните все изменения и выберите пункт Start Without Debugging в меню Debug. Когда браузер загрузит страницу Default.aspx, выберите таблицу Products в списке и щелкните на ссылке Details для одной из показанных записей. Если вы следовали приведенным указаниям, специальный шаблон сущности должен быть применен, и вы должны увидеть нечто подобное рисунке ниже:

Применение специального шаблона сущности

В этом случае создан шаблон сущности по умолчанию для таблицы Products. Чтобы создать специальную замену для одного из других шаблонов по умолчанию, нужно соблюдать соглашение об именовании. Например, для создания специального шаблона сущности для редактирования таблицы Products понадобится создать шаблон с именем Products_Edit.ascx в папке EntityTemplates.

Настройка шаблонов полей

Развернув папку DynamicData\FieldTemplates в окне Solution Explorer, вы увидите набор шаблонов полей по умолчанию, как показано на рисунке ниже. Точно так же как шаблоны сущностей управляют внешним видом строк данных, шаблоны полей управляют внешним видом отдельных типов данных:

Шаблоны полей по умолчанию

Система динамических данных использует типы модели данных для управления тем, какой шаблон должен применяться для отображения поля. Лучший способ разобраться в этом - выполнить настройку. Откройте шаблон Text_Edit.ascx. Модифицируйте его так, чтобы он соответствовал показанному ниже:

<%@ Control Language="C#" CodeFile="Text_Edit.ascx.cs" Inherits="Text_EditField" %>

<asp:TextBox ID="TextBox1" runat="server" Text='<%# FieldValueEditString %>' CssClass="DDTextBox"
    BackColor="Gray" ForeColor="White"></asp:TextBox>

<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" CssClass="DDControl DDValidator" 
    ControlToValidate="TextBox1" Display="Static" Enabled="false" />
<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator1" 
    CssClass="DDControl DDValidator" ControlToValidate="TextBox1" Display="Static" Enabled="false" />
<asp:DynamicValidator runat="server" ID="DynamicValidator1" CssClass="DDControl DDValidator" 
    ControlToValidate="TextBox1" Display="Static" />

Сохраните изменения и выберите пункт Start Without Debugging в меню Debug. Когда браузер загрузит стартовую страницу проекта, выберите одну из таблиц в списке и щелкните на ссылке Edit для одной из строк данных. Вы увидите нечто подобное рисунке ниже:

Изменение шаблона поля

Цветовая схема некоторых полей изменилась. Это касается текстовых полей, что вполне естественно, поскольку изменен шаблон поля Text_Edit. Чтобы изменить все поля, понадобится модифицировать также шаблоны Decimal_Edit, Integer_Edit и т.д.

Изменяя шаблоны полей, имена которых заканчивается на _Edit, мы указываем, как определенные виды полей отображаются при редактировании или вставке записи. Чтобы изменить отображение представления сведений, нужно отредактировать шаблоны полей, не имеющие суффикса Edit, такие как Text.ascx или Boolean.ascx.

Шаблон поля, который применяется только к заданному типу в конкретной таблице, невозможно создать, просто создав новый файл. Например, нельзя создать шаблон, который применяется только к булевским типам в таблице Products. Но этого эффекта можно достигнуть с помощью метаданных. Более подробно это рассматривается позже.

Пройди тесты
Лучший чат для C# программистов