Dodawanie kolumny z polami wyboru w GridView (C#)

W tym samouczku przedstawiono sposób dodawania kolumn pól wyboru do kontrolki GridView w celu zapewnienia użytkownikowi intuicyjnego sposobu wybierania wielu wierszy kontrolki GridView.

Wprowadzenie

W poprzednim samouczku sprawdziliśmy, jak dodać kolumnę przycisków radiowych do kontrolki GridView w celu wybrania określonego rekordu. Kolumna przycisków radiowych jest odpowiednim interfejsem użytkownika, gdy użytkownik jest ograniczony do wyboru co najwyżej jednego elementu z siatki. Czasami jednak możemy zezwolić użytkownikowi na wybranie dowolnej liczby elementów z siatki. Na przykład klienci poczty e-mail opartej na sieci Web zwykle wyświetlają listę wiadomości z kolumną pól wyboru. Użytkownik może wybrać dowolną liczbę wiadomości, a następnie wykonać akcję, taką jak przeniesienie wiadomości e-mail do innego folderu lub usunięcie ich.

W tym samouczku przyjrzymy się, jak dodać kolumnę pól wyboru i określić, jakie pola wyboru zostały zaznaczone podczas przesyłania zwrotnego. W szczególności utworzymy przykład, który ściśle naśladuje internetowy interfejs użytkownika klienta poczty e-mail. W naszym przykładzie zostanie wyświetlona strona GridView zawierająca listę produktów w Products tabeli bazy danych z polem wyboru w każdym wierszu (zobacz Rysunek 1). Po kliknięciu przycisku Usuń wybrane produkty zostaną usunięte.

Rysunek 1. Każdy wiersz produktu zawiera pole wyboru (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 1. Dodawanie stronicowanego widoku GridView zawierającego listę informacji o produkcie

Zanim zaczniemy martwić się o dodanie kolumny pól wyboru, najpierw skupmy się na przedstawieniu produktów w GridView obsługującym stronicowanie. Zacznij od otwarcia strony CheckBoxField.aspx w folderze EnhancedGridView i przeciągnięcia elementu GridView z przybornika do projektanta, ustawiając jego ID na Products. Następnie wybierz powiązanie kontrolki GridView z nowym obiektem ObjectDataSource o nazwie ProductsDataSource. Skonfiguruj obiekt ObjectDataSource do używania ProductsBLL klasy , wywołując metodę GetProducts() w celu zwrócenia danych. Ponieważ ten element GridView będzie tylko do odczytu, ustaw listy rozwijane na kartach UPDATE, INSERT i DELETE na wartość (Brak).

Rysunek 2. Tworzenie nowego obiektuDataSource o nazwie ProductsDataSource (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Rysunek 3. Konfigurowanie obiektu ObjectDataSource do pobierania danych przy użyciu GetProducts() metody (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Rysunek 4. Ustawianie list Drop-Down na kartach UPDATE, INSERT i DELETE na wartość (Brak) (Kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Po zakończeniu pracy kreatora Konfigurowania źródła danych program Visual Studio automatycznie utworzy kolumny BoundColumns i kolumnę CheckBox dla pól danych związanych z produktem. Podobnie jak w poprzednim samouczku, usuń wszystkie elementy z wyjątkiem ProductName, CategoryName, i UnitPrice BoundFields, a następnie zmień właściwości HeaderText na Product, Category i Price. Skonfiguruj pole UnitPrice BoundField tak, aby jego wartość została sformatowana jako waluta. Skonfiguruj również kontrolkę GridView do obsługi stronicowania, zaznaczając pole wyboru Włącz stronicowanie z tagu inteligentnego.

Dodajmy również interfejs użytkownika do usuwania wybranych produktów. Dodaj kontrolkę sieciową pod elementem GridView, ustawiając jej właściwość ID na DeleteSelectedProducts i właściwość Text na Usuń wybrane produkty. Zamiast faktycznie usuwać produkty z bazy danych, w tym przykładzie po prostu wyświetlimy komunikat z informacją o produktach, które zostałyby usunięte. Aby to uwzględnić, dodaj kontrolkę Etykieta webowa poniżej przycisku. Ustaw jego identyfikator na DeleteResults, wyczyść jego właściwość Text, i ustaw jego właściwości Visible i EnableViewState na false.

Po wprowadzeniu tych zmian znaczniki deklaratywne GridView, ObjectDataSource, Button i Label powinny wyglądać podobnie do następujących:

<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>

Pośmiń chwilę, aby wyświetlić stronę w przeglądarce (zobacz Rysunek 5). W tym momencie powinna zostać wyświetlona nazwa, kategoria i cena pierwszych dziesięciu produktów.

Rysunek 5. Wyświetlane są nazwy, kategorii i ceny pierwszych dziesięciu produktów (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 2. Dodawanie kolumny pól wyboru

Ponieważ ASP.NET 2.0 zawiera pole CheckBoxField, można pomyśleć, że może służyć do dodawania kolumny pól wyboru do kontrolki GridView. Niestety, tak nie jest, ponieważ pole CheckBoxField jest przeznaczone do pracy z polem danych logicznych. Oznacza to, że aby użyć pola CheckBoxField, musimy określić bazowe pole danych, którego wartość jest konsultowana, aby określić, czy renderowane pole wyboru jest zaznaczone. Nie możemy użyć pola CheckBoxField, aby po prostu dodać kolumnę niezaznaczonych pól wyboru.

Zamiast tego musimy dodać TemplateField i dodać kontrolkę sieciową CheckBox do jego elementu ItemTemplate. Dodaj pole TemplateField do sekcji Products GridView i ustaw jako pierwsze pole (skrajne po lewej stronie). W tagu inteligentnym GridView kliknij link Edytuj szablony, a następnie przeciągnij kontrolkę Web CheckBox z przybornika do elementu ItemTemplate. Ustaw właściwość ID CheckBox na ProductSelector.

Rysunek 6. Dodawanie kontrolki internetowej CheckBox o nazwie ProductSelector do pola szablonu ItemTemplate (kliknij, aby wyświetlić obraz pełnowymiarowy)

Po dodaniu kontrolki TemplateField i CheckBox Web każdy wiersz zawiera teraz pole wyboru. Rysunek 7 przedstawia tę stronę po wyświetleniu za pośrednictwem przeglądarki po dodaniu pola szablonu i pola wyboru.

Rysunek 7. Każdy wiersz produktu zawiera teraz pole wyboru (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 3. Określanie, które znaczniki wyboru były zaznaczone podczas zwrotnej przesyłki.

W tym momencie mamy kolumnę pól wyboru, ale nie można określić, jakie pola wyboru zostały zaznaczone przy ponownym przesłaniu. Po kliknięciu przycisku Usuń wybrane produkty musimy jednak wiedzieć, jakie pola wyboru zostały zaznaczone, aby usunąć te produkty.

Właściwość GridView Rows zapewnia dostęp do wierszy danych w GridView. Możemy iterować przez te wiersze, programowo uzyskać dostęp do kontrolki CheckBox, a następnie odwołać się do jej Checked właściwości, aby określić, czy pole wyboru zostało wybrane.

Utwórz procedurę obsługi dla DeleteSelectedProducts zdarzenia kontrolki Web przycisku Click i dodaj następujący kod:

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;
}

Właściwość Rows zwraca kolekcję GridViewRow wystąpień, które definiują wiersze danych kontrolki GridView. Pętla foreach w tym miejscu wylicza tę kolekcję. Dla każdego obiektu GridViewRow, CheckBox wiersza jest uzyskiwany programowo przy użyciu row.FindControl("controlID"). Jeśli pole wyboru jest zaznaczone, odpowiednia ProductID wartość wiersza zostanie pobrana z kolekcji DataKeys . W tym ćwiczeniu po prostu wyświetlimy komunikat informacyjny w etykiecie DeleteResults, chociaż w działającej aplikacji wykonamy wywołanie metody klasy ProductsBLL.DeleteProduct(productID)

Po dodaniu tego programu obsługi zdarzeń kliknięcie przycisku Usuń wybrane produkty spowoduje teraz wyświetlenie ProductID dotyczących wybranych produktów.

Rysunek 8. Po kliknięciu przycisku Usuń wybrane produkty są wyświetlane wybrane produkty ProductID (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 4. Dodawanie przycisków 'Zaznacz wszystkie' i 'Odznacz wszystkie'

Jeśli użytkownik chce usunąć wszystkie produkty na bieżącej stronie, musi zaznaczyć każde z dziesięciu pól wyboru. Możemy pomóc przyspieszyć ten proces, dodając przycisk Zaznacz wszystko, który po kliknięciu, zaznacza wszystkie pola wyboru w siatce. Usuń zaznaczenie przycisku Wszystkie byłoby równie przydatne.

Dodaj dwie kontrolki przycisków sieci Web na stronie, umieszczając je nad elementem GridView. Ustaw pierwszy element ID na CheckAll i jego właściwość Text na Check All (Zaznacz wszystko); ustaw drugi element ID na UncheckAll i jego właściwość Text na Uncheck All (Odznacz wszystko).

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

Następnie utwórz metodę w klasie code-behind o nazwie ToggleCheckState(checkState), która po wywołaniu przegląda kolekcję Products kontrolki GridView Rows i ustawia właściwość każdego elementu CheckBox na wartość przekazanego parametru Checked.

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;
    }
}

Następnie utwórz Click programy obsługi zdarzeń dla CheckAll przycisków i UncheckAll . W CheckAll programie obsługi zdarzeń po prostu wywołaj metodę ToggleCheckState(true); w metodzie UncheckAllwywołaj metodę ToggleCheckState(false).

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

Za pomocą tego kodu kliknięcie przycisku Sprawdź wszystko powoduje powrót i sprawdzenie wszystkich pól wyboru w kontrolce GridView. Podobnie kliknij pozycję Usuń zaznaczenie pola wyboru Wszystkie usuń zaznaczenie wszystkich pól wyboru. Rysunek 9 przedstawia ekran po zaznaczeniu przycisku Sprawdź wszystko.

Rysunek 9: Kliknięcie przycisku Zaznacz wszystko zaznacza wszystkie pola wyboru (Kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Uwaga / Notatka

Podczas wyświetlania kolumny pól wyboru jedno podejście do zaznaczenia lub usunięcia zaznaczenia wszystkich pól wyboru odbywa się przez pole wyboru w wierszu nagłówka. Ponadto bieżąca implementacja funkcji "Zaznacz wszystkie / Odznacz wszystkie" wymaga przeładowania strony. Pola wyboru mogą być zaznaczone lub niezaznaczone, jednak w całości za pomocą skryptu po stronie klienta, zapewniając w ten sposób bardziej responsywne środowisko użytkownika. Aby szczegółowo zbadać użycie pola wyboru wiersza nagłówka do zaznaczania wszystkich i odznaczania wszystkich, wraz z dyskusją na temat technik po stronie klienta, zapoznaj się z tematem Zaznaczanie wszystkich pól wyboru w kontrolce GridView przy użyciu skryptu Client-Side i pola wyboru Zaznacz wszystko.

Podsumowanie

W przypadkach, w których należy zezwolić użytkownikom na wybranie dowolnej liczby wierszy z kontrolki GridView przed kontynuowaniem, dodanie kolumny pól wyboru jest jedną z opcji. Jak pokazano w tym samouczku, włączenie kolumny pól wyboru w kontrolce GridView oznacza dodanie pola TemplateField z kontrolką sieciową CheckBox. Korzystając z kontrolki Web (w porównaniu z wprowadzaniem znaczników bezpośrednio do szablonu, jak w poprzednim samouczku), ASP.NET automatycznie pamięta, które pola wyboru były zaznaczone, a które nie były zaznaczone przy ponownym przesyłaniu danych. Możemy również programowo uzyskać dostęp do pól wyboru w kodzie, aby określić, czy dane pole jest zaznaczone, lub zmienić jego stan zaznaczenia.

W tym samouczku i ostatnim z nich przedstawiono dodawanie kolumny selektora wierszy do kontrolki GridView. W następnym samouczku sprawdzimy, w jaki sposób, z odrobiną pracy, możemy dodać możliwości wstawiania do kontrolki GridView.

Szczęśliwe programowanie!

Informacje o autorze

Scott Mitchell, autor siedmiu książek ASP/ASP.NET i założyciel 4GuysFromRolla.com, współpracuje z technologiami internetowymi firmy Microsoft od 1998 roku. Scott pracuje jako niezależny konsultant, trener i pisarz. Jego najnowsza książka to Sams Teach Yourself ASP.NET 2.0 w ciągu 24 godzin. Można go uzyskać pod adresem mitchell@4GuysFromRolla.com.

Poprzedni Następny

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-05-04