Добавление столбца GridView флажков (C#)

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

Скачивание примера приложения или Загрузка PDF-файла

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

Введение

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

В этом учебнике будет показано, как добавить столбец флажков и определить, какие флажки были проверены при обратной передаче. В частности, мы создадим пример, который точно имитирует пользовательский веб-интерфейс почтового клиента. В нашем примере будет содержаться страница GridView со списком продуктов в таблице базы данных Products с флажком в каждой строке (см. рис. 1). При нажатии кнопки Удалить выбранные продукты будут удалены выбранные продукты.

каждая строка продукта содержит флажок

Рис. 1. Каждая строка продукта содержит флажок (щелкните, чтобы просмотреть изображение с полным размером)

Шаг 1. Добавление страничного GridView со списком сведений о продукте

Прежде чем беспокоиться о добавлении столбца флажков, давайте рассмотрим список продуктов в элементе управления GridView, который поддерживает разбиение на страницы. Для начала откройте страницу CheckBoxField.aspx в папке EnhancedGridView и перетащите элемент GridView с панели элементов в конструктор, установив для его ID значение Products. Затем выберите привязку GridView к новому элементу ObjectDataSource с именем ProductsDataSource. Настройте ObjectDataSource для использования класса ProductsBLL, вызвав метод GetProducts() для возврата данных. Поскольку этот элемент GridView будет доступен только для чтения, установите в раскрывающихся списках на вкладках обновление, вставка и удаление значение (нет).

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

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

настроить ObjectDataSource для получения данных с помощью метода Products ()

Рис. 3. Настройка ObjectDataSource для получения данных с помощью метода GetProducts() (щелкните, чтобы просмотреть изображение с полным размером)

установить в раскрывающихся списках на вкладках обновления, вставки и удаления значение (нет)

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

После завершения работы мастера настройки источника данных Visual Studio автоматически создаст Баундколумнс и Чеккбоксколумн для полей данных, связанных с продуктом. Как и в предыдущем руководстве, удалите все, кроме ProductName, CategoryNameи UnitPrice BoundFields, а также измените свойства HeaderText на "продукт", "Категория" и "цена". Настройте UnitPrice BoundField, чтобы его значение было отформатировано как денежная единица. Также настройте GridView для поддержки разбиения на страницы, установив флажок Включить разбиение по страницам в смарт-теге.

Также добавим пользовательский интерфейс для удаления выбранных продуктов. Добавьте элемент управления "Кнопка" под элементом GridView, установив для его ID значение DeleteSelectedProducts и его свойство Text, чтобы удалить выбранные продукты. Вместо фактического удаления продуктов из базы данных в этом примере будет просто отображено сообщение с информацией о продуктах, которые были бы удалены. Для этого добавьте элемент управления Label под кнопкой. Задайте для его идентификатора значение DeleteResults, очистите свойство Text и задайте для его свойства Visible и EnableViewState значение false.

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

<p>
    <asp:GridView ID="Products" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ProductID" DataSourceID="ProductsDataSource" 
        AllowPaging="True" EnableViewState="False">
        <Columns>
            <asp:BoundField DataField="ProductName" HeaderText="Product" 
                SortExpression="ProductName" />
            <asp:BoundField DataField="CategoryName" HeaderText="Category" 
                ReadOnly="True" SortExpression="CategoryName" />
            <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}" 
                HeaderText="Price" HtmlEncode="False" 
                SortExpression="UnitPrice" />
        </Columns>
    </asp:GridView>
    <asp:ObjectDataSource ID="ProductsDataSource" runat="server" 
        OldValuesParameterFormatString="original_{0}" 
        SelectMethod="GetProducts" TypeName="ProductsBLL">            
    </asp:ObjectDataSource>
</p>
<p>
    <asp:Button ID="DeleteSelectedProducts" runat="server" 
        Text="Delete Selected Products" />
</p>
<p>
    <asp:Label ID="DeleteResults" runat="server" EnableViewState="False" 
        Visible="False"></asp:Label>
</p>

Уделите время просмотру страницы в браузере (см. рис. 5). На этом этапе вы увидите имя, категорию и цену первых десяти продуктов.

указаны имя, Категория и цена первых десяти продуктов

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

Шаг 2. Добавление столбца флажков

Поскольку ASP.NET 2,0 включает CheckBoxField, можно предположить, что он может использоваться для добавления столбца флажков в GridView. К сожалению, это не так, так как CheckBoxField предназначен для работы с логическими полями данных. То есть, чтобы использовать CheckBoxField, необходимо указать базовое поле данных, к значению которого обращается, чтобы определить, установлен ли флажок для визуализации. Мы не можем использовать CheckBoxField, чтобы просто включить столбец непроверенных флажков.

Вместо этого необходимо добавить TemplateField и добавить в его ItemTemplateвеб-элемент управления CheckBox. Добавьте TemplateField в Products GridView и сделайте его первым (крайним левым) полем. Из смарт-тега GridView s щелкните ссылку Edit Templates (изменить шаблоны), а затем перетащите элемент управления CheckBox из панели элементов в ItemTemplate. Установите этот флажок s ID для свойства ProductSelector.

добавить веб-элемент управления CheckBox с именем Продуктселектор в TemplateField s ItemTemplate

Рис. 6. Добавление веб-элемента управления CheckBox с именем ProductSelector в ItemTemplate TemplateField s (щелкните, чтобы просмотреть изображение с полным размером)

После добавления TemplateField и веб-элемента управления CheckBox каждая строка включает флажок. На рис. 7 показана эта страница при просмотре в браузере после добавления TemplateField и CheckBox.

каждая строка продуктов теперь содержит флажок

Рис. 7. Теперь каждая строка продукта содержит флажок (щелкните, чтобы просмотреть изображение с полным размером).

Шаг 3. Определение флажков, которые были проверены при обратной передаче

На этом этапе у нас есть столбец флажков, но нет способа определить, какие флажки были проверены при обратной передаче. Однако при нажатии кнопки Удалить выбранные продукты необходимо знать, какие флажки были проверены, чтобы удалить эти продукты.

СвойствоRows GridView s предоставляет доступ к строкам данных в GridView. Можно выполнить итерацию по этим строкам, программно получить доступ к элементу управления CheckBox, а затем обратиться к свойству Checked, чтобы определить, выбран ли флажок.

Создайте обработчик событий для Click события DeleteSelectedProducts Web Control Button и добавьте следующий код:

protected void DeleteSelectedProducts_Click(object sender, EventArgs e)
{
    bool atLeastOneRowDeleted = false;
    // Iterate through the Products.Rows property
    foreach (GridViewRow row in Products.Rows)
    {
        // Access the CheckBox
        CheckBox cb = (CheckBox)row.FindControl("ProductSelector");
        if (cb != null && cb.Checked)
        {
            // Delete row! (Well, not really...)
            atLeastOneRowDeleted = true;
            // First, get the ProductID for the selected row
            int productID = 
                Convert.ToInt32(Products.DataKeys[row.RowIndex].Value);
            // "Delete" the row
            DeleteResults.Text += string.Format(
                "This would have deleted ProductID {0}<br />", productID);
        }
    }
    // Show the Label if at least one row was deleted...
    DeleteResults.Visible = atLeastOneRowDeleted;
}

Свойство Rows Возвращает коллекцию экземпляров GridViewRow, описывающего строки данных GridView s. В этом цикле foreach перечисление этой коллекции. Для каждого GridViewRow объекта флажок Row s программным способом обращается с помощью row.FindControl("controlID"). Если флажок установлен, то строка s, соответствующая ProductID значение, извлекается из коллекции DataKeys. В этом упражнении мы просто отображаем информативное сообщение в метке DeleteResults, хотя в работающем приложении вместо этого выполняется вызов метода ProductsBLL класса s DeleteProduct(productID).

После добавления этого обработчика событий после нажатия кнопки Удалить выбранные продукты отображается ProductID s выбранных продуктов.

при нажатии кнопки Удалить выбранные продукты отображаются продукты ProductID.

Рис. 8. при нажатии кнопки Удалить выбранные продукты отображаются выбранные продукты ProductID s (щелкните, чтобы просмотреть изображение с полным размером).

Шаг 4. Добавление кнопок "проверить все" и "снять все"

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

Добавьте на страницу два веб-элемента управления Button, поместив их над GridView. Установите первый ID s в CheckAll и его свойство Text, чтобы проверить все. Задайте для второго ID s значение UncheckAll и его свойство Text, чтобы снять все флажки.

<asp:Button ID="CheckAll" runat="server" Text="Check All" />
 
<asp:Button ID="UncheckAll" runat="server" Text="Uncheck All" />

Затем создайте метод в классе кода программной части с именем ToggleCheckState(checkState), который при вызове перечисляет коллекцию Products GridView s Rows коллекции и устанавливает для каждого свойства CheckBox Checked значение переданного параметра свойство CheckState .

private void ToggleCheckState(bool checkState)
{
    // Iterate through the Products.Rows property
    foreach (GridViewRow row in Products.Rows)
    {
        // Access the CheckBox
        CheckBox cb = (CheckBox)row.FindControl("ProductSelector");
        if (cb != null)
            cb.Checked = checkState;
    }
}

Затем создайте Click обработчики событий для кнопок CheckAll и UncheckAll. В обработчике событий CheckAll s просто вызовите ToggleCheckState(true). в UncheckAllвызовите ToggleCheckState(false).

protected void CheckAll_Click(object sender, EventArgs e)
{
    ToggleCheckState(true);
}
protected void UncheckAll_Click(object sender, EventArgs e)
{
    ToggleCheckState(false);
}

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

нажатии кнопки "проверить все", выбирают все флажки

Рис. 9. нажатие кнопки "проверить все" устанавливает все флажки (щелкните, чтобы просмотреть изображение с полным размером)

Note

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

Сводка

В случаях, когда необходимо разрешить пользователям выбирать произвольное число строк из элемента управления GridView перед продолжением, Добавление столбца флажков является одним из вариантов. Как мы видели в этом учебнике, включая столбец флажков в GridView, добавляет TemplateField с веб-элементом управления CheckBox. С помощью веб-элемента управления (по сравнению с внедрением разметки непосредственно в шаблон, как мы делали в предыдущем учебном курсе) ASP.NET автоматически запоминает, какие флажки были и не проверялись в обратной передаче. Можно также программно получить доступ к флажкам в коде, чтобы определить, установлен ли данный флажок, или изменить состояние проверки.

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

Поздравляем с программированием!

Об авторе

Скотт Митчелл, автор семи книг по ASP/ASP. NET и основатель 4GuysFromRolla.com, работал с веб-технологиями Майкрософт с 1998. Скотт работает как независимый консультант, преподаватель и модуль записи. Его последняя книга — Sams обучать себя ASP.NET 2,0 за 24 часа. Он доступен по адресу mitchell@4GuysFromRolla.com. или через его блог, который можно найти по адресу http://ScottOnWriting.NET.