Пошаговое руководство. Настройка внешнего вида и поведения полей данных в модели данных

Статья
10/15/2014

В этом пошаговом руководстве показано, как настроить внешний вид и поведение (пользовательский интерфейс) поля данных. Эти настройки можно выполнить на уровне данных, связывая пользовательский шаблон поля с полем данных.

Платформа динамических данных создает пользовательский интерфейс для каждого поля данных, автоматически выбирая соответствующий шаблон поля на основании типа поля данных. Также можно задать применяемый пользовательский шаблон поля. При настройке пользовательского интерфейса на уровне данных настройка применяется глобально ко всему веб-сайту — пользовательский шаблон поля применяется для всех экземпляров настроенного типа данных.

Можно также ограничить настройки одной страницей на уровне представления. Дополнительные сведения о выборе типа для настройки см. в разделе Настройка динамических данных ASP.NET.

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

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

Проект Visual Studio с исходным кодом этого примера доступен на следующей странице: Scaffolding Dynamic Data.

Обязательные компоненты

Visual Studio 2010 или Visual Web Developer 2010, экспресс-выпуск.
Веб-сайт на платформе динамических данных. Дополнительные сведения см. в разделе Пошаговое руководство. Создание нового веб-узла, использующего формирование шаблонов.

Создание пользовательских шаблонов полей

К этому моменту будет создано два пользовательских шаблона поля: один для отображения данных, а другой — для отображения пользовательского интерфейса редактирования данных. Эти шаблоны будут использоваться для настройки пользовательского интерфейса поля данных OrderQty, содержащегося в таблице SalesOrderDetail базы данных AdventureWorks.

Создание шаблона отображения

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

Чтобы создать пользовательский шаблон полей для отображения

В Обозревателе решений щелкните правой кнопкой мыши папку DynamicData\FieldTemplates и выберите команду Добавить новый элемент.
В группе Установленные шаблоны в левой области выберите предпочтительный язык программирования.
В центральной области щелкните Поле динамических данных.
Введите имя для пользовательского шаблона полей в поле Имя. Можно использовать любое имя, которое еще не используется шаблонами по умолчанию. Например, можно ввести имя OrderQty.ascx.
Убедитесь, что флажок Поместить код в отдельный файл установлен.
Нажмите кнопку Добавить.

Visual Studio создает файлы OrderQty.ascx и OrderQty_Edit.ascx. Первый шаблон отображает пользовательский интерфейс для отображения поля данных, а второй шаблон — пользовательский интерфейс для редактирования поля данных.
Откройте файл OrderQty.ascx.
Удалите элемент управления Literal, являющийся частью шаблона, предоставленного платформой динамических данных.
Перейдите в представление Конструктор.
Из группы Стандартные панели элементов добавьте на страницу элемент управления Label.
В окне Свойства задайте для значения свойства Text элемента управления Label следующее выражение:
```
<%# FieldValueString %>
```
Перейдите в представление Исходный код.

В следующем примере показана разметка для созданного элемента управления.
```
<asp:Label id="Label1" 
    runat="server" 
    Text="<%# FieldValueString %>"
>
</asp:Label>
```
Эта разметка предоставляет элементу управления Label доступ к значению поля данных через свойство FieldValueString.
Сохраните файл OrderQty.ascx и закройте его.
Откройте файл класса OrderQty.ascx.cs или OrderQty.ascx.vb.
В переопределенном методе DataControl замените идентификатор Literal1 идентификатором Label1.

В следующем примере показано, как будет выглядеть код после выполнения действий.
```
public override Control DataControl {
  get {return Label1;}
}
```
```
Public Overrides ReadOnly Property DataControl() As Control
  Get
    Return Label1
  End Get
End Property
```

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

protected override void OnDataBinding(EventArgs e)
{
  // Read the quantity value.
  Int16 currentQty = (Int16)FieldValue;
  if (FieldValue != null)
  {
    // Set quantity stock thresholds.
    int min = 30;
    int max = 1500;
    if (currentQty <= min)
    {
      // Quantity is less than the minimum 
      // stock threshold.
      Label1.ForeColor = System.Drawing.Color.Red;
      Label1.Font.Bold = true;
    }
    else
      if (currentQty >= max)
      {
        // Quantity is greater than the maximum 
        // stock threshold.
        Label1.ForeColor = System.Drawing.Color.Blue;
        Label1.Font.Bold = true;
      }
  }
}

Protected Overloads Overrides Sub OnDataBinding(ByVal e As EventArgs)
  ' Read quantity value.
  Dim currentQty As Int16 = DirectCast(FieldValue, Int16)
  If FieldValue <> Nothing Then
    'Set quantity stock thresholds.
    Dim min As Integer = 30
    Dim max As Integer = 1500
    If currentQty <= min Then
      ' Quantity is less than the minimum
      ' stock threshold.
      Label1.ForeColor = System.Drawing.Color.Red
      Label1.Font.Bold = True
    ElseIf currentQty >= max Then
      ' Quantity is greater than the maximum 
      ' stock threshold.
      Label1.ForeColor = System.Drawing.Color.Blue
      Label1.Font.Bold = True
    End If
  End If
End Sub

В этом методе доступа значение текущего поля данных извлекается с помощью свойства FieldValue.

Сохраните и закройте файл.

Создание шаблона изменения

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

Чтобы создать пользовательский шаблон полей для редактирования

Откройте файл OrderQty_Edit.ascx.
Перейдите в представление Конструктор.
Из группы Проверка панели элементов добавьте на страницу элемент управления CustomValidator.
В окне Свойства присвойте свойству Display значение Dynamic.
Задайте для свойства ControlToValidate значение TextBox1.
В окне Свойства панели инструментов окна нажмите кнопку События.
Задайте для свойства ServerValidate значение OrderQtyValidadtion, являющееся именем пользовательского обработчика проверки, который будет создан позднее.
Перейдите в представление Исходный код.

В следующем примере показана разметка для созданного элемента управления.
```
<asp:CustomValidator id="CustomValidator1" runat="server" 
  ControlToValidate="TextBox1" Display="Dynamic"
  OnServerValidate="OrderQtyValidadtion" />
```
Сохраните файл OrderQty_Edit.ascx и закройте его.
Откройте файл класса OrderQty.ascx_edit.cs или OrderQty.ascx_Edit.vb.

Скопируйте следующий код в файл класса, чтобы создать пользовательский обработчик для элемента управления CustomValidator.

protected void OrderQtyValidation(object source, 
    ServerValidateEventArgs args)
{
  bool result = false;
  short intUnits;
  // Convert the user's input into an integer.
  result = Int16.TryParse(TextBox1.Text, out intUnits); 
  if (result == true)
  {
    result = CheckRange(intUnits);
    // Return result.
    args.IsValid = result;
  }
  else
  {
    CustomValidator1.ErrorMessage = string.Format(
      "The value is greater than the maximum integer.");
    args.IsValid = result;
  }
}

protected bool CheckRange(int intUnits)
{
  bool result = true;
  // Set quantity range limits.
  int min = 10;
  int max = 2000;
  // Check whether the value is in the allowed range.
  if (intUnits < min)
  {
    CustomValidator1.ErrorMessage = string.Format(
      "Value is less than the minimum threshold: {0} ", min);
       result = false;
  }
  else
    if (intUnits > max)
    {
      CustomValidator1.ErrorMessage = string.Format(
        "Value is greater than the maximum threshold: {0} ", max);
      result = false;
    }
    return result;
}

Protected Sub OrderQtyValidation(ByVal source As Object, _
  ByVal args As ServerValidateEventArgs)
  Dim result As Boolean = False
  ' Convert the user's input into an integer.
  result = Int16.TryParse(TextBox1.Text, out intUnits)
  If result = True Then
    ' Check whether the input is in the allowed range.
    result = CheckRange(intUnits)
    ' Return result.
    args.IsValid = result
  Else
    CustomValidator1.ErrorMessage = _
      String.Format("The value is greater than the maximum integer.")
    args.IsValid = result
  End If
End Sub

Protected Function CheckRange(ByVal intUnits As Integer) As Boolean
  Dim result As Boolean = True

  ' Set quantity range limits.
  Dim min As Integer = 10
  Dim max As Integer = 2000

  ' Check whether the value is in the allowed range.
  If intUnits < min Then
    CustomValidator1.ErrorMessage = _
      String.Format("Value is greater than the minimum threshold: {0} ", min)
    result = False
  ElseIf intUnits > max Then
    CustomValidator1.ErrorMessage = _
      String.Format("Value is greater than the maximum threshold: {0} ", max)
    result = False
  End If
  Return result
End Function

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

Сохраните и закройте файл.

Создание классов метаданных для модели данных

В этом разделе создается разделяемый класс. Этот класс расширяет модель данных и позволяет связать пользовательский шаблон поля с конкретным полем данных.

Создание разделяемого класса

В обозревателе решений щелкните правой кнопкой мыши папку App_Code и выберите команду Добавить новый элемент.
В левой области группы Установленные шаблоны выберите язык программирования.
В центральной области выберите пункт Класс .
В поле Имя введите SalesOrderDetail.cs или SalesOrderDetail.vb.

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

Visual Studio открывает новый файл класса.
Добавьте ключевое слово Partial (Visual Basic) или ключевое слово partial (C#) в определение класса, чтобы сделать его разделяемым, как показано в следующем примере.
```
public partial class SalesOrderDetail
{

}
```
```
Partial Public Class SalesOrderDetail

End Class 
```
В случае использования языка C# удалите конструктор по умолчанию.
Импортируйте пространства имен System.Web.DynamicData и System.ComponentModel.DataAnnotations, используя ключевое слово Imports (Visual Basic) или ключевое слово using (C#), как показано в следующем примере.
```
using System.Web.DynamicData;
using System.ComponentModel.DataAnnotations;
```
```
Imports System.Web.DynamicData
Imports System.ComponentModel.DataAnnotations 
```
В файле класса добавьте приведенный ниже код, чтобы создать еще один разделяемый класс, который будет выступать в качестве связанного класса метаданных. Для класса можно использовать любое имя.
```
public partial class SalesOrderDetailMetadata
{

}
```
```
Partial Public Class SalesOrderDetailMetadata

End Class 
```
Добавьте атрибут MetadataTypeAttribute в класс SalesOrderDetail. Задайте в качестве параметра имя только что созданного метакласса (например, SalesOrderDetailMetadata), как показано в следующем примере.
```
[MetadataType(typeof(SalesOrderDetailMetadata))]
public partial class SalesOrderDetail 
{

}
```
```
<MetadataType(GetType(SalesOrderDetailMetadata))> _
Partial Public Class SalesOrderDetail 

End Class
```
Этот атрибут связывает разделяемый класс SalesOrderDetail с классом метаданных SalesOrderDetailMetadata.
Сохраните файл, но не закрывайте его.

Связывание пользовательского шаблона поля с полем данных

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

Связывание пользовательского шаблона поля с полем данных

В классе метаданных создайте открытое свойство с именем OrderQty (соответствующее настраиваемому полю данных), как показано в следующем примере.
```
public partial class SalesOrderDetailMetadata
{    
  public object OrderQty;
}
```
```
Partial Public Class SalesOrderDetailMetadata
  Public OrderQty As Object
End Class 
```
Тип Object используется в качестве заполнителя для представления поля данных. Платформа динамических данных выводит фактический тип из модели данных во время выполнения.
Добавьте к свойству атрибут UIHintAttribute и задайте имя применяемого пользовательского шаблона поля (OrderQty), как показано в следующем примере.
```
public partial class SalesOrderDetailMetadata
{    
  [UIHint("OrderQty")]
  public object OrderQty;
}
```
```
Partial Public Class SalesOrderDetailMetadata
  <UIHint("OrderQty")> _
  Public OrderQty As Object
End Class 
```
Сохраните и закройте файл.

Проверка настройки поля данных

Теперь можно проверить приведенное ниже поведение пользовательского шаблона.

Пользовательский шаблон используется во время отображения или изменения значений в поле OrderQty.
Шаблон поля OrderQty.ascx отображает значение поля красным цветом, если значение OrderQty равно минимальному биржевому порогу или меньше его. Шаблон отображает значение синим цветом, если оно равно максимальному биржевому порогу или превышает его.
Шаблон поля OrderQty_Edit.ascx проверяет, попадает ли введенное пользователем значение OrderQty в абсолютные границы диапазона. Если введенное пользователем значение находится за пределами допустимого диапазона, отображается настроенное сообщение об ошибке.

Проверка настройки поля данных

В обозревателе решений щелкните правой кнопкой мыши страницу Default.aspx и выберите команду Просмотреть в обозревателе.
В отображаемом списке таблиц щелкните ссылку SalesOrderDetails.

Платформа динамических данных отображает таблицу SalesOrderDetail, используя разработанный пользовательский шаблон полей.
В любой из строк нажмите кнопку Изменить.
Для столбца OrderQty введите значение, меньшее минимального биржевого порога (30), например 25.
В той же строке нажмите кнопку Обновить.

Платформа динамических данных отображает введенное значение красным цветом. Это означает, что введенное значение меньше минимального биржевого порога.
В любой из строк нажмите кнопку Изменить.
Для столбца OrderQty введите значение, большее минимального биржевого порога, но меньшее максимального биржевого порога(1500), например 250.
В той же строке нажмите кнопку Обновить.

Платформа динамических данных отображает значение, используя цвет по умолчанию. Это означает, что введенное значение попадает в заданный диапазон биржевых порогов.
В любой из строк нажмите кнопку Изменить.
Для столбца OrderQty введите значение, большее максимального биржевого порога (1500), например 1800.
В той же строке щелкните Обновить.

Платформа динамических данных отображает это значение синим цветом. Это означает, что введенное значение больше биржевого порога.
В любой из строк нажмите кнопку Изменить.
Для столбца OrderQty введите значение, меньшее минимального значения (10), например 5.
В той же строке нажмите кнопку Обновить.

Платформа динамических данных выводит сообщение об ошибке, показывающее, что введенное значение меньше минимального значения.
Нажмите кнопку Отмена.
В любой из строк нажмите кнопку Изменить.
Для столбца OrderQty введите значение, большее максимального значения (2000), например 2800.
В той же строке нажмите кнопку Обновить.

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

Следующие действия

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

Используйте Реляционный конструктор объектов в веб-приложении для создания классов данных, представляющих базу данных SQL Server. Дополнительные сведения см. в разделе Практическое руководство. Создание классов LINQ to SQL в веб-проекте.
Узнайте больше о том, как выбрать тип настройки. Дополнительные сведения см. в разделе Настройка динамических данных ASP.NET.
Рассмотрите объектно-реляционное сопоставление LINQ-to-SQL. Дополнительные сведения см. в разделе LINQ to SQL.
Рассмотрите реляционный конструктор объектов. Дополнительные сведения см. в разделе Реляционный конструктор объектов.

См. также

Пошаговое руководство. Настройка внешнего вида и поведения полей данных в модели данных

Обязательные компоненты

Создание пользовательских шаблонов полей

Создание шаблона отображения

Чтобы создать пользовательский шаблон полей для отображения

Создание шаблона изменения

Чтобы создать пользовательский шаблон полей для редактирования

Создание классов метаданных для модели данных

Создание разделяемого класса

Связывание пользовательского шаблона поля с полем данных

Связывание пользовательского шаблона поля с полем данных

Проверка настройки поля данных

Проверка настройки поля данных

Следующие действия

См. также

Ссылки

Основные понятия

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

Дополнительные ресурсы