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

2025-06-21

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

Введение

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

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

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

Шаг 1. Добавление paged GridView, которое содержит сведения о продукте

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

Рис. 2. Создайте новый объект ObjectDataSource с именем ProductsDataSource (Щелкните, чтобы просмотреть изображение в полном размере)

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

Рис. 4: Установите списки Drop-Down в вкладках UPDATE, INSERT и DELETE на (Нет) (Щелкните, чтобы просмотреть изображение в полном размере)

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

Давайте также добавим пользовательский интерфейс для удаления выбранных продуктов. Добавьте веб-элемент управления Button под 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 и добавить веб-элемент управления CheckBox в его ItemTemplate. Перейдите вперед и добавьте TemplateField в Products GridView и сделайте его первым (крайним левым) полем. В смарт-теге GridView щелкните ссылку "Изменить шаблоны" и перетащите элемент управления CheckBox из панели элементов в ItemTemplate. Задайте для свойства ID CheckBox значение ProductSelector.

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

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

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

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

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

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

Создайте обработчик событий для события DeleteSelectedProducts веб-элемента управления Button Click и добавьте следующий код:

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. Цикл foreach здесь перечисляет коллекцию. Для каждого GridViewRow объекта доступ к флажку строки осуществляется программно через row.FindControl("controlID"). Если флажок CheckBox отмечен, из коллекции извлекается значение строки, соответствующее ProductID. В этом упражнении мы просто отображаем информативное сообщение в DeleteResults метке, тогда как в рабочем приложении мы вместо этого вызвали бы метод ProductsBLL класса DeleteProduct(productID).

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

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

Шаг 4. Добавление кнопок "Выбрать все" и "Отменить выбор всех"

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

Добавьте два веб-элемента управления Button на страницу, поместив их над GridView. Задайте для первого значения s IDCheckAll его свойству Text значение Check All; задайте для второго значения s IDUncheckAll его свойству Text значение Uncheck All.

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

Затем создайте метод в классе code-behind с именем ToggleCheckState(checkState), который при вызове перечисляет коллекцию Products GridView 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 просто вызовите 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. Нажатие кнопки "Выбрать все" выбирает все флажки (Нажмите для просмотра изображения в полном размере)

Замечание

При отображении столбца флажков один подход для выбора или отмены выбора всех флажков выполняется через флажок в строке заголовка. Кроме того, для текущей реализации check All /Uncheck All требуется обратная связь. Флажки можно выставить галочку или снять её целиком с помощью скрипта на стороне клиента, тем самым обеспечивая более быстрое взаимодействие с пользователем. Чтобы подробно изучить использование флажка в строке заголовка для функций "Выделить все" и "Снять выделение со всех", а также обсудить применение клиентских методик, ознакомьтесь со статьей "Выделение всех флажков в GridView с помощью скрипта Client-Side и флажка 'Выделить все'.

Сводка

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

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

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

Сведения о авторе

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

Назад Далее