Настройка интерфейса изменения данных (C#)

Скотт Митчелл

Скачивание PDF

В этом руководстве мы рассмотрим, как настроить интерфейс редактируемого GridView, заменив стандартные элементы управления TextBox и CheckBox альтернативными входными веб-элементами управления.

Введение

Элементы управления BoundFields и CheckBoxFields, используемые элементами управления GridView и DetailsView, упрощают процесс изменения данных благодаря их способности отображать интерфейсы, доступные только для чтения, а также редактируемые и вставляемые интерфейсы. Эти интерфейсы можно отобразить без необходимости добавления дополнительной декларативной разметки или кода. Однако интерфейсы BoundField и CheckBoxField не имеют настраиваемости, часто необходимой в реальных сценариях. Чтобы настроить редактируемый или вставляемый интерфейс в GridView или DetailsView, необходимо вместо этого использовать TemplateField.

В предыдущем руководстве мы узнали, как настроить интерфейсы изменения данных, добавив веб-элементы управления проверки. В этом руководстве мы рассмотрим, как настроить веб-элементы управления для сбора данных, заменив стандартные элементы управления BoundField и CheckBoxField с TextBox и CheckBox на альтернативные веб-элементы управления ввода. В частности, мы создадим редактируемый GridView, который позволяет обновлять имя продукта, категорию, поставщик и прекращенное состояние. При редактировании определенной строки поля категории и поставщика будут отображаться как DropDownLists, содержащие набор доступных категорий и поставщиков для выбора. Кроме того, мы заменим флажок по умолчанию CheckBoxField элементом управления RadioButtonList, который предлагает два варианта: "Активный" и "Прекращено".

Рис. 1. Интерфейс редактирования GridView включает dropDownLists и RadioButtons (щелкните, чтобы просмотреть полноразмерное изображение)

Шаг 1. Создание соответствующейUpdateProductперегрузки

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

1. Получите сведения о продукте из базы данных для указанного ProductID.
2. Обновите поля ProductName, CategoryID, SupplierID, и Discontinued
3. Отправьте запрос на обновление в DAL с помощью метода TableAdapter Update() .

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

Следующий код показывает новую в классе ProductsBLL перегрузку UpdateProduct.

[System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Update, false)]
public bool UpdateProduct(string productName, int? categoryID,
    int? supplierID, bool discontinued, int productID)
{
    Northwind.ProductsDataTable products = Adapter.GetProductByProductID(productID);
    if (products.Count == 0)
        // no matching record found, return false
        return false;
    Northwind.ProductsRow product = products[0];
    product.ProductName = productName;
    if (supplierID == null) product.SetSupplierIDNull();
      else product.SupplierID = supplierID.Value;
    if (categoryID == null) product.SetCategoryIDNull();
      else product.CategoryID = categoryID.Value;
    product.Discontinued = discontinued;
    // Update the product record
    int rowsAffected = Adapter.Update(product);
    // Return true if precisely one row was updated, otherwise false
    return rowsAffected == 1;
}

Шаг 2. Создание редактируемого GridView

После добавления перегрузки мы готовы создать редактируемый UpdateProduct GridView. CustomizedUI.aspx Откройте страницу в папке EditInsertDelete и добавьте элемент управления GridView в визуальный редактор. Затем создайте объект ObjectDataSource из смарт-тега GridView. Настройте ObjectDataSource для получения сведений о продукте путем использования метода GetProducts() класса ProductBLL и для обновления данных продукта с помощью только что созданной перегрузки UpdateProduct. На вкладках INSERT и DELETE выберите (Нет) из раскрывающихся списков.

Рис. 2. Настройте ObjectDataSource для использования только что созданной перегрузки UpdateProduct (Нажмите, чтобы просмотреть изображение в полном размере)

Как мы видели во всех руководствах по изменениям данных, декларативный синтаксис объекта ObjectDataSource, созданного Visual Studio, назначает OldValuesParameterFormatString свойство original_{0}. Это, конечно, не будет работать с уровнем бизнес-логики, так как наши методы не ожидают, что исходное ProductID значение будет передано. Поэтому, как мы сделали в предыдущих руководствах, удаляйте это назначение свойства из декларативного синтаксиса или, вместо этого, задайте для этого свойства значение {0}.

После этого изменения декларативная разметка ObjectDataSource должна выглядеть следующим образом:

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    SelectMethod="GetProducts" TypeName="ProductsBLL"
    UpdateMethod="UpdateProduct">
    <UpdateParameters>
        <asp:Parameter Name="productName" Type="String" />
        <asp:Parameter Name="categoryID" Type="Int32" />
        <asp:Parameter Name="supplierID" Type="Int32" />
        <asp:Parameter Name="discontinued" Type="Boolean" />
        <asp:Parameter Name="productID" Type="Int32" />
    </UpdateParameters>
</asp:ObjectDataSource>

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

Хотя ObjectDataSource настроен для обновления только подмножества значений продукта, GridView в настоящее время отображает все поля продукта. Потратьте немного времени, чтобы отредактировать GridView так, чтобы...

• Он включает только ProductName, поля SupplierName, CategoryName BoundFields и Discontinued CheckBoxField.
• Поля CategoryName и SupplierName должны появляться перед (слева от) Discontinued CheckBoxField
• Свойства CategoryName и SupplierName BoundFields HeaderText установлено в "Category" и "Supplier" соответственно
• Поддержка редактирования включена (установите флажок "Включить редактирование" в смарт-теге GridView)

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

Рис. 3. Удаление ненужных полей из GridView (щелкните, чтобы просмотреть изображение полного размера)

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:BoundField DataField="ProductName"
           HeaderText="ProductName" SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
           ReadOnly="True"
           SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
           ReadOnly="True"
           SortExpression="SupplierName" />
        <asp:CheckBoxField DataField="Discontinued"
           HeaderText="Discontinued" SortExpression="Discontinued" />
    </Columns>
</asp:GridView>

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

Рис. 4. Интерфейс Read-Only GridView завершен (щелкните, чтобы просмотреть изображение полного размера)

Шаг 3. Использование раскрывающегося списка для интерфейсов редактирования категорий и поставщиков

Помните, что ProductsRow объект содержит CategoryIDи CategoryNameSupplierIDSupplierNameсвойства, которые предоставляют фактические значения идентификатора внешнего ключа в Products таблице базы данных и соответствующие Name значения в Categories таблицах и Suppliers таблицах. ProductRow, CategoryID и SupplierID могут и читаться, и записываться, в то время как свойства CategoryName и SupplierName отмечены как только для чтения.

Из-за того, что свойства CategoryName и SupplierName находятся в состоянии только для чтения, соответствующие BoundFields имеют свойство ReadOnly, установленное на true, что предотвращает изменение этих значений при редактировании строки. Хотя мы можем задать свойство ReadOnly до false, при рендеринге CategoryName и SupplierName BoundFields как TextBoxes во время редактирования, такой подход приведет к исключению, если пользователь попытается обновить продукт, так как не существует перегрузки UpdateProduct, принимающей входные данные CategoryName и SupplierName. На самом деле, мы не хотим создать такую перегрузку по двум причинам:

• В таблице Products нет полей SupplierName или CategoryName, но есть SupplierID и CategoryID. Поэтому мы хотим, чтобы наш метод принимал эти определенные значения идентификаторов, а не их значения таблиц подстановки.
• Требование, чтобы пользователь ввел название поставщика или категории, не является идеальным решением, так как от пользователя требуется знание доступных категорий и поставщиков, а также их правильного написания.

Поля поставщика и категории должны отображать имена категорий и поставщиков в режиме только для чтения (как сейчас) и раскрывающийся список применимых параметров при редактировании. Используя раскрывающийся список, конечный пользователь может быстро увидеть, какие категории и поставщики доступны для выбора, и может упростить выбор.

Для обеспечения такого поведения необходимо преобразовать SupplierName и CategoryName BoundFields в TemplateFields, которые выводят значения ItemTemplate и SupplierName, и используют элемент управления DropDownList для перечисления доступных категорий и поставщиков.

CategoriesДобавление иSuppliersвыпадающих списков

Начните с преобразования SupplierName и BoundFields в TemplateFields: щелкните ссылку "Изменить столбцы" в смарт-теге GridView, выберите BoundField в списке в нижнем левом углу и нажмите ссылку "Преобразовать это поле в TemplateField". Процесс преобразования создаст TemplateField как с ItemTemplate, так и с EditItemTemplate, с использованием декларативного синтаксиса, как показано ниже.

<asp:TemplateField HeaderText="Category" SortExpression="CategoryName">
    <EditItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Eval("CategoryName") %>'></asp:Label>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Bind("CategoryName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Так как BoundField был помечен как только для чтения, и ItemTemplate, и EditItemTemplate содержат веб-элемент управления Label, свойство Text которого привязано к применимому полю данных (CategoryName, в синтаксисе выше). Нам нужно изменить EditItemTemplate, заменив элемент управления Label Web на элемент управления DropDownList.

Как мы видели в предыдущих руководствах, шаблон можно изменить с помощью конструктора или непосредственно из декларативного синтаксиса. Чтобы изменить это через дизайнер, щелкните ссылку "Изменить шаблоны" в смарт-теге GridView и выберите для работы поле "Категория" EditItemTemplate. Удалите веб-элемент управления Label и замените его элементом управления DropDownList, установив идентификатор DropDownList в Categories.

Рис. 5: Удалите TexBox и добавьте раскрывающийся список в EditItemTemplate (Щелкните, чтобы просмотреть изображение в полном размере)

Далее необходимо заполнить dropDownList доступными категориями. Щелкните ссылку "Выбрать источник данных" из смарт-тега DropDownList и выберите создать объект ObjectDataSource с именем CategoriesDataSource.

Рис. 6. Создайте новый элемент управления ObjectDataSource с именем CategoriesDataSource (Щелкните, чтобы просмотреть изображение в полном размере)

Чтобы этот объект ObjectDataSource возвращал все категории, привязывайте его к методу CategoriesBLL класса GetCategories() .

Рис. 7. Привязка ObjectDataSource к методу CategoriesBLL (GetCategories())

Наконец, настройте параметры DropDownList таким образом, чтобы CategoryName поле отображалось в каждом раскрывающемся ListItem списке с CategoryID полем, используемым в качестве значения.

Рис. 8: Показать поле CategoryName и CategoryID использовать как значение (щелкните, чтобы просмотреть изображение полного размера)

После внесения этих изменений декларативная разметка для EditItemTemplate объекта CategoryName TemplateField будет включать как DropDownList, так и ObjectDataSource:

<asp:TemplateField HeaderText="Category" SortExpression="CategoryName">
    <EditItemTemplate>
        <asp:DropDownList ID="Categories" runat="server"
          DataSourceID="CategoriesDataSource"
          DataTextField="CategoryName" DataValueField="CategoryID">
        </asp:DropDownList>
        <asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
            OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetCategories" TypeName="CategoriesBLL">
        </asp:ObjectDataSource>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Bind("CategoryName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Повторите эти действия, чтобы добавить DropDownList с именем Suppliers в SupplierName TemplateField EditItemTemplate. Это приведет к добавлению DropDownList в EditItemTemplate и созданию другого ObjectDataSource. Однако объект ObjectDataSource Suppliers в SuppliersBLL DropDownList должен быть настроен на вызов метода класса GetSuppliers(). Кроме того, настройте Suppliers DropDownList, чтобы отобразить CompanyName поле и использовать SupplierID поле в качестве значения для его ListItem s.

После добавления выпадающих списков в два EditItemTemplate, загрузите страницу в браузере и нажмите кнопку «Изменить» для продукта Chef Anton's Cajun Seasoning. Как показано на рисунке 9, столбцы категории и поставщика продукта отображаются в виде раскрывающихся списков, содержащих доступные категории и поставщики для выбора. Тем не менее, обратите внимание, что первые элементы в обоих раскрывающихся списках выбраны по умолчанию (напитки для категории и экзотические жидкости поставщиком), даже если каджунская приправа шеф-повара Антона является приправой, поставляемой New Orleans Cajun Delights.

Рис. 9. Первый элемент в списках Drop-Down выбран по умолчанию (щелкните, чтобы просмотреть изображение полного размера)

Кроме того, если щелкнуть "Обновить", вы обнаружите, что значения продукта CategoryID и SupplierID установлены на NULL. Оба этих нежелательных поведения вызваны тем, что раскрывающиеся списки в EditItemTemplate не привязаны к каким-либо полям данных из основных данных продукта.

Привязка выпадающих списков к CategoryIDи SupplierIDполям данных

Чтобы в раскрывающихся списках отредактированных продуктов и поставщиков были заданы соответствующие значения, и чтобы эти значения были отправлены обратно в метод BLL UpdateProduct при нажатии кнопки "Обновить", необходимо привязать свойства DropDownLists SelectedValue к CategoryIDSupplierID полям данных с помощью двусторонней привязки данных. Для этого с помощью Categories DropDownList можно добавить SelectedValue='<%# Bind("CategoryID") %>' непосредственно в декларативный синтаксис.

Кроме того, можно задать привязки данных DropDownList, изменив шаблон с помощью конструктора и щелкнув ссылку "Изменить DataBindings" из смарт-тега DropDownList. Затем укажите, что SelectedValue свойство должно быть привязано к CategoryID полю с помощью двусторонней привязки данных (см. рис. 10). Продублируйте либо декларативный, либо конструкторский процесс, чтобы привязать SupplierID поле данных к Suppliers DropDownList.

Рис. 10. Привяжите CategoryID к свойству SelectedValue элемента DropDownList с использованием привязки данных Two-Way (нажмите, чтобы просмотреть изображение в полном размере)

После применения привязок к SelectedValue свойствам двух dropDownLists, категория и столбцы поставщика редактируемого продукта по умолчанию будут иметь значения текущего продукта. После нажатия кнопки "Обновить" значения CategoryID и SupplierID выбранного элемента раскрывающегося списка будут переданы в метод UpdateProduct. На рисунке 11 показан учебник после добавления инструкций привязки данных; обратите внимание, что выбранные элементы раскрывающегося списка для Шеф-повара Антона Cajun Seasoning правильно являются Специя и New Orleans Cajun Delights.

Рис. 11. Значения текущей категории и поставщика измененного продукта выбраны по умолчанию (щелкните, чтобы просмотреть изображение полного размера)

ОбработкаNULLзначений

Столбцы CategoryID и SupplierID в таблице Products могут быть NULL, но раскрывающиеся списки в EditItemTemplate не содержат элемента списка для представления значения NULL. Это имеет два последствия:

• Пользователь не может использовать наш интерфейс для изменения категории или поставщика продукта со значения NULL на значение NULL.
• Если у продукта есть NULL, CategoryID или SupplierID, нажатие кнопки "Изменить" приведет к исключению. Это связано с тем, что значение NULL, возвращаемое оператором CategoryID (или SupplierID) в выражении Bind(), не сопоставляется со значением в выпадающем списке (выпадающий список вызывает исключение, если его свойству SelectedValue присваивается значение, которого нет в коллекции элементов списка).

Для поддержки значений NULL, CategoryID и SupplierID необходимо добавить еще один ListItem в каждый DropDownList, чтобы представить значение NULL. В руководстве Master/Detail Filtering With a DropDownList мы узнали, как добавить дополнительный ListItem в привязанный к данным раскрывающийся список, что включало установку свойства AppendDataBoundItems DropDownList в true и ручное добавление ListItem. Однако в том предыдущем руководстве мы добавили ListItem с Value-1. Однако логика привязки данных в ASP.NET автоматически преобразует пустую строку в NULL значение и наоборот. Поэтому для этого руководства мы хотим, чтобы элемент Value для ListItem был пустой строкой.

Начните с того, чтобы задать свойство обоих AppendDataBoundItemsDropDownLists в значение true. Затем добавьте следующий элемент <asp:ListItem> в каждый DropDownList, чтобы декларативная разметка выглядела следующим образом:

<asp:DropDownList ID="Categories" runat="server"
    DataSourceID="CategoriesDataSource" DataTextField="CategoryName"
    DataValueField="CategoryID" SelectedValue='<%# Bind("CategoryID") %>'
    AppendDataBoundItems="True">
    <asp:ListItem Value="">(None)</asp:ListItem>
</asp:DropDownList>

Я выбрал использовать "(Нет)" в качестве текстового значения для этого ListItem, но вы можете изменить его на пустую строку, если вы хотите.

Повторите эти действия для выпадающего списка поставщиков.

Теперь с помощью этого дополнительного ListItem интерфейса редактирования можно назначать значения NULL для полей CategoryID и SupplierID продукта, как показано на рис. 12.

Рис. 12. Выберите (нет) для назначения NULL значения категории или поставщика продукта (щелкните, чтобы просмотреть изображение полного размера)

Шаг 4: Использование радиокнопок для Статуса прекращения

В настоящее время данные продуктов Discontinued выражаются с помощью CheckBoxField: он отображает отключенный флажок для строк только для чтения и включенный флажок для редактируемой строки. Хотя этот пользовательский интерфейс часто подходит, мы можем настроить его при необходимости с помощью TemplateField. В этом руководстве мы изменим CheckBoxField на TemplateField, который использует элемент управления RadioButtonList с двумя вариантами: "Активный" и "Прекращено", с помощью которых пользователь может указать значение продукта Discontinued.

Начните с преобразования Discontinued CheckBoxField в TemplateField, который создаст TemplateField с ItemTemplate и EditItemTemplate. Оба шаблона включают CheckBox, у которого свойство Checked привязано к полю данных Discontinued, и единственное различие между ними заключается в том, что у CheckBox ItemTemplate свойство Enabled установлено в false.

Замените CheckBox как в ItemTemplate, так и в EditItemTemplate на элемент управления RadioButtonList, установив свойства обоих RadioButtonList на DiscontinuedChoice. Затем укажите, что RadioButtonLists должен содержать два переключателя, один помечен как "Активный" со значением False, а один — "Прекращено" со значением True. Для этого можно ввести <asp:ListItem> элементы непосредственно через декларативный синтаксис или использовать ListItem редактор коллекции из конструктора. На рисунке 13 показан ListItem редактор коллекции после того, как выбраны два варианта радиокнопок.

Рис. 13. Добавление параметров "Активный" и "Прекращено" в RadioButtonList (щелкните, чтобы просмотреть изображение полного размера)

Так как элемент RadioButtonList в объекте ItemTemplate не должен быть редактируемым, задайте его свойству Enabled значение false, оставив свойству Enabled для RadioButtonList в EditItemTemplate значение по умолчанию true. Это сделает переключатели в строке, которую нельзя редактировать, доступными только для чтения, но позволит пользователю изменять значения RadioButton для изменяемой строки.

Нам по-прежнему нужно назначить свойства компонентов управления SelectedValue RadioButtonList, чтобы был выбран соответствующий переключатель на основе поля данных продукта Discontinued. Как и в случае с dropDownLists, рассмотренным ранее в этом руководстве, этот синтаксис привязки данных можно добавить непосредственно в декларативную разметку или через ссылку Edit DataBindings в смарт-тегах RadioButtonLists.

После добавления двух RadioButtonLists и их настройки, декларативная разметка TemplateField должна выглядеть следующим образом:

<asp:TemplateField HeaderText="Discontinued" SortExpression="Discontinued">
    <ItemTemplate>
        <asp:RadioButtonList ID="DiscontinuedChoice" runat="server"
          Enabled="False" SelectedValue='<%# Bind("Discontinued") %>'>
            <asp:ListItem Value="False">Active</asp:ListItem>
            <asp:ListItem Value="True">Discontinued</asp:ListItem>
        </asp:RadioButtonList>
    </ItemTemplate>
    <EditItemTemplate>
        <asp:RadioButtonList ID="DiscontinuedChoice" runat="server"
            SelectedValue='<%# Bind("Discontinued") %>'>
            <asp:ListItem Value="False">Active</asp:ListItem>
            <asp:ListItem Value="True">Discontinued</asp:ListItem>
        </asp:RadioButtonList>
    </EditItemTemplate>
</asp:TemplateField>

При этих изменениях Discontinued столбец был преобразован из списка флажков в список пар переключателей (см. рис. 14). При редактировании продукта выбирается соответствующий переключатель, и статус продукта может быть обновлён на "прекращён", выбрав другой переключатель и нажав кнопку "Обновить".

Рис. 14. Снятые флажки были заменены парами переключателей (щелкните, чтобы просмотреть изображение полного размера)

Итоги

Хотя BoundField и CheckBoxField автоматически создают интерфейсы только для чтения, редактирования и вставки, они не поддерживают возможность настройки. Однако часто необходимо настроить интерфейс редактирования или вставки, возможно, добавив элементы управления проверкой (как мы видели в предыдущем руководстве) или настроив пользовательский интерфейс сбора данных (как мы видели в этом руководстве). Настройка интерфейса с помощью TemplateField может быть приведена в следующих шагах:

1. Добавьте TemplateField или преобразуйте существующий BoundField или CheckBoxField в TemplateField
2. Расширение интерфейса по мере необходимости
3. Привязка соответствующих полей данных к недавно добавленным веб-элементам управления с помощью двусторонней привязки данных

Помимо использования встроенных веб-элементов управления ASP.NET, можно также настроить шаблоны TemplateField, используя пользовательские, скомпилированные серверные элементы управления и пользовательские элементы управления.

Счастливое программирование!

Об авторе

Скотт Митчелл, автор семи книг ASP/ASP.NET и основатель 4GuysFromRolla.com, работает с технологиями Microsoft Web с 1998 года. Скотт работает независимым консультантом, тренером и писателем. Его последняя книга Sams Teach Yourself ASP.NET 2.0 за 24 часа. С ним можно связаться по адресу mitchell@4GuysFromRolla.com.