Dodawanie potwierdzenia po stronie klienta podczas usuwania (VB)

Autor : Scott Mitchell

Pobierz plik PDF

W interfejsach, które utworzyliśmy do tej pory, użytkownik może przypadkowo usunąć dane, klikając przycisk Usuń, gdy zamierza kliknąć przycisk Edytuj. W tym samouczku dodamy okno dialogowe potwierdzenia po stronie klienta, które będzie wyświetlane, gdy kliknięty zostanie przycisk Usuń.

Wprowadzenie

W ciągu ostatnich kilku samouczków widzieliśmy, jak używać naszej architektury aplikacji, ObjectDataSource i kontrolek danych Web w połączeniu, aby zapewnić możliwości wstawiania, edytowania i usuwania. Interfejsy usuwania, które badaliśmy do tej pory, składają się z przycisku Usuń, który po kliknięciu powoduje postback i wywołuje metodę ObjectDataSource Delete(). Następnie metoda Delete() wywołuje skonfigurowaną funkcję z warstwy logiki biznesowej, która przesyła wywołanie do warstwy dostępu do danych, wykonując rzeczywiste polecenie DELETE do bazy danych.

Chociaż ten interfejs użytkownika umożliwia odwiedzającym usuwanie rekordów za pomocą kontrolek GridView, DetailsView lub FormView, nie ma żadnego rodzaju potwierdzenia, gdy użytkownik kliknie przycisk Usuń. Jeśli użytkownik przypadkowo kliknie przycisk Usuń po kliknięciu przycisku Edytuj, rekord, który ma zostać zaktualizowany, zostanie usunięty. Aby temu zapobiec, w tym samouczku dodamy po stronie klienta okno dialogowe potwierdzenia, które pojawi się po kliknięciu przycisku Usuń.

Funkcja JavaScript confirm(string) wyświetla parametr wejściowy ciągu jako tekst wewnątrz modalnego okna dialogowego, który jest wyposażony w dwa przyciski — OK i Anuluj (zobacz Rysunek 1). Funkcja confirm(string) zwraca wartość logiczną w zależności od kliknięć przycisku (truejeśli użytkownik kliknie przycisk OK, a false jeśli kliknie przycisk Anuluj).

Rysunek 1: Metoda JavaScript confirm(string) wyświetla modalne okno dialogowe, Client-Side okno komunikatu

Podczas przesyłania formularza, jeśli wartość false jest zwracana z programu obsługi zdarzeń po stronie klienta, przesyłanie formularza jest anulowane. Za pomocą tej funkcji możemy mieć procedurę obsługi zdarzeń po stronie onclick klienta przycisku Usuń, która zwraca wartość wywołania metody confirm("Are you sure you want to delete this product?"). Jeśli użytkownik kliknie przycisk Anuluj, confirm(string) zwróci wartość false, co spowoduje anulowanie przesłania formularza. Bez ponownego wysłania, produkt, w którym kliknięto przycisk Usuń, nie zostanie usunięty. Jeśli jednak użytkownik kliknie przycisk OK w oknie dialogowym, postback będzie kontynuowany bez przeszkód, a produkt zostanie usunięty. Zapoznaj się z tematem "Używanie metody JavaScript do sterowania przesyłaniem formularzy" confirm() aby uzyskać więcej informacji na temat tej techniki.

Dodanie niezbędnego skryptu po stronie klienta różni się nieco w przypadku używania szablonów niż w przypadku używania pola commandfield. W związku z tym w tym samouczku przyjrzymy się zarówno przykładowi FormView, jak i GridView.

Uwaga / Notatka

Korzystając z technik potwierdzenia po stronie klienta, takich jak te omówione w tym samouczku, przyjęto założenie, że użytkownicy odwiedzają przeglądarki obsługujące język JavaScript i mają włączony język JavaScript. Jeśli jedno z tych założeń nie jest prawdziwe dla określonego użytkownika, kliknięcie przycisku Usuń spowoduje natychmiastowe wyświetlenie komunikatu zwrotnego (bez wyświetlania pola komunikatu potwierdzającego).

Krok 1. Tworzenie kontrolki FormView obsługującej usuwanie

Zacznij od dodania elementu FormView do ConfirmationOnDelete.aspx strony w EditInsertDelete folderze, powiązania go z nowym obiektem ObjectDataSource, który ściąga informacje o produkcie za pomocą ProductsBLL metody klasy s GetProducts() . Skonfiguruj również ObjectDataSource, tak aby metoda ProductsBLL klasy DeleteProduct(productID) została zmapowana do metody ObjectDataSource Delete(). Upewnij się, że listy rozwijane INSERT i UPDATE są ustawione na wartość (Brak). Na koniec zaznacz pole wyboru "Włącz stronicowanie" w inteligentnym tagu FormView.

Po wykonaniu tych kroków nowy znacznik deklaratywny ObjectDataSource będzie wyglądać następująco:

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    DeleteMethod="DeleteProduct" OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
    <DeleteParameters>
        <asp:Parameter Name="productID" Type="Int32" />
    </DeleteParameters>
</asp:ObjectDataSource>

Podobnie jak w poprzednich przykładach, które nie używały optymistycznej współbieżności, poświęć chwilę, aby wyczyścić właściwość ObjectDataSource OldValuesParameterFormatString.

Ponieważ jest ona powiązana z kontrolką ObjectDataSource, która obsługuje tylko usuwanie, kontrolka FormView ItemTemplate oferuje tylko przycisk Usuń, bez przycisków Nowy i Aktualizuj. Znacznik deklaratywny kontrolki FormView zawiera jednak zbędne EditItemTemplate i InsertItemTemplate, które można usunąć. Poświęć chwilę, aby dostosować składnik ItemTemplate, tak aby wyświetlał tylko część danych dotyczących produktu. Skonfigurowałem moje tak, aby wyświetlało nazwę produktu w <h3> nagłówku powyżej nazw dostawcy i kategorii (wraz z przyciskiem Usuń).

<asp:FormView ID="FormView1" AllowPaging="True" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" runat="server">
    <ItemTemplate>
        <h3><i><%# Eval("ProductName") %></i></h3>
        <b>Category:</b>
        <asp:Label ID="CategoryNameLabel" runat="server"
            Text='<%# Eval("CategoryName") %>'>
        </asp:Label><br />
        <b>Supplier:</b>
        <asp:Label ID="SupplierNameLabel" runat="server"
            Text='<%# Eval("SupplierName") %>'>
        </asp:Label><br />
        <asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False"
            CommandName="Delete" Text="Delete">
        </asp:LinkButton>
    </ItemTemplate>
</asp:FormView>

Dzięki tym zmianom mamy w pełni funkcjonalną stronę internetową, która umożliwia użytkownikowi przełączanie się między produktami pojedynczo z możliwością usunięcia produktu, klikając przycisk Usuń. Rysunek 2 przedstawia zrzut ekranu przedstawiający postęp do tej pory po wyświetleniu w przeglądarce.

Rysunek 2. Widok Formularza zawiera informacje o pojedynczym produkcie (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Krok 2: Wywoływanie funkcji confirm(string) ze zdarzenia onclick przycisku Client-Side usuwania.

Po utworzeniu kontrolki FormView ostatnim krokiem jest skonfigurowanie przycisku Usuń, tak aby po kliknięciu przez gościa funkcja JavaScript confirm(string) została wywołana. Dodanie skryptu po stronie klienta do zdarzenia po stronie klienta onclick przycisku, linku lub elementu ImageButton można wykonać za pomocą OnClientClick property, który jest nowością w ASP.NET 2.0. Ponieważ chcemy mieć zwróconą wartość confirm(string) funkcji, po prostu ustaw tę właściwość na: return confirm('Are you certain that you want to delete this product?');

Po tej zmianie składni deklaratywnej Delete LinkButton powinna wyglądać następująco:

<asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False"
    CommandName="Delete" Text="Delete"
    OnClientClick="return confirm('Are you certain you want to delete this product?');">
</asp:LinkButton>

To wszystko! Rysunek 3 przedstawia zrzut ekranu przedstawiający to potwierdzenie w akcji. Kliknięcie przycisku Usuń powoduje wyświetlenie okna dialogowego potwierdzania. Jeśli użytkownik kliknie przycisk Anuluj, wycofanie zostanie anulowane i produkt nie zostanie usunięty. Jeśli jednak użytkownik kliknie przycisk OK, proces postback będzie kontynuowany i zostanie wywołana metoda ObjectDataSource Delete(), co w efekcie kończy się usunięciem rekordu z bazy danych.

Uwaga / Notatka

Ciąg przekazywany do confirm(string) funkcji Języka JavaScript jest rozdzielany apostrofami (a nie cudzysłowami). W języku JavaScript ciągi można rozdzielać przy użyciu dowolnego znaku. W tym miejscu używamy apostrofów, aby ograniczniki ciągu przekazanego do confirm(string) nie wprowadzały niejednoznaczności z ogranicznikami używanymi dla OnClientClick wartości właściwości.

Rysunek 3. Potwierdzenie jest teraz wyświetlane po kliknięciu przycisku Usuń (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Krok 3. Konfigurowanie właściwości OnClientClick dla przycisku Usuń w polu poleceń

Jeśli pracujesz z przyciskiem, elementem LinkButton lub ImageButton bezpośrednio w szablonie, możesz powiązać z nim okno dialogowe potwierdzenia, konfigurując jego OnClientClick właściwość tak, aby zwracała wyniki funkcji JavaScript confirm(string). Jednak pole CommandField — które dodaje pole przycisków Usuń do kontrolki GridView lub DetailsView — nie ma OnClientClick właściwości, którą można ustawić deklaratywnie. Zamiast tego musimy programowo odwołać się do przycisku Usuń w programie DataBound obsługi zdarzeń GridView lub DetailsView, a następnie ustawić jej OnClientClick właściwość.

Uwaga / Notatka

Podczas ustawiania właściwości przycisku OnClientClick Usuń w odpowiednim DataBound programie obsługi zdarzeń mamy dostęp do danych powiązanych z bieżącym rekordem. Oznacza to, że możemy rozszerzyć komunikat potwierdzający, aby uwzględnić szczegóły dotyczące określonego rekordu, takie jak "Czy na pewno chcesz usunąć produkt Chai?" Takie dostosowanie jest również możliwe w szablonach przy użyciu składni powiązania danych.

Aby przećwiczyć ustawianie OnClientClick właściwości przycisków Usuń w pole polecenia, dodajmy element GridView do strony. Skonfiguruj ten obiekt GridView tak, aby używał tej samej kontrolki ObjectDataSource używanej przez kontrolkę FormView. Ogranicz również pole BoundFields kontrolki GridView, aby uwzględnić tylko nazwę, kategorię i dostawcę produktu. Na koniec zaznacz pole wyboru „Zezwól na usuwanie” w inteligentnym tagu GridView. To doda pole CommandField do kolekcji GridView Columns, w której właściwość ShowDeleteButton będzie ustawiona na true.

Po wprowadzeniu tych zmian znacznik deklaratywnej kontrolki GridView powinien wyglądać następująco:

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

Pole CommandField zawiera pojedyncze wystąpienie przycisku Delete LinkButton, do którego można uzyskać dostęp programowo z obsługi zdarzeń GridView RowDataBound. Po odwołaniu możemy odpowiednio ustawić jego OnClientClick właściwość. Utwórz procedurę obsługi zdarzeń dla RowDataBound zdarzenia przy użyciu następującego kodu:

Protected Sub GridView1_RowDataBound(ByVal sender As Object, _
    ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles GridView1.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then
        ' reference the Delete LinkButton
        Dim db As LinkButton = CType(e.Row.Cells(0).Controls(0), LinkButton)

        ' Get information about the product bound to the row
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, _
            Northwind.ProductsRow)

        db.OnClientClick = String.Format( _
            "return confirm('Are you certain you want to delete the {0} product?');", _
            product.ProductName.Replace("'", "\'"))
    End If
End Sub

Ta procedura obsługi zdarzeń działa z wierszami danych (tymi, które będą miały przycisk Usuń) i rozpoczyna się programowo odwołując się do przycisku Usuń. Ogólnie użyj następującego wzorca:

Dim obj As ButtonType = _
    CType(e.Row.Cells(commandFieldIndex).Controls(controlIndex), ButtonType)

ButtonType to typ przycisku używanego przez pole polecenia — Przycisk, LinkButton lub ImageButton. Domyślnie pole polecenia używa elementu LinkButtons, ale można to dostosować za pomocą polecenia CommandField s ButtonType property. commandFieldIndex jest indeksem porządkowym elementu CommandField w kolekcji GridViewColumns, natomiast controlIndex jest indeksem przycisku usuń w kolekcji CommandFieldControls. Wartość controlIndex zależy od położenia przycisku względem innych przycisków w pole polecenia. Jeśli na przykład jedynym przyciskiem wyświetlanym w pole polecenia jest przycisk Usuń, użyj indeksu 0. Jeśli jednak istnieje przycisk Edytuj poprzedzający przycisk Usuń, użyj indeksu 2. Powodem użycia indeksu 2 jest to, że pole CommandField dodaje dwie kontrolki przed przyciskiem Usuń: przycisk Edytuj oraz LiteralControl, który służy do dodawania odstępu między przyciskami Edytuj i Usuń.

W naszym konkretnym przykładzie pole CommandField używa parametrów LinkButtons, a będąc polem najbardziej po lewej stronie, ma właściwość CommandFieldIndex o wartości 0. Ponieważ w polu komend nie ma żadnych przycisków poza przyciskiem Usuń, używamy controlIndex o wartości 0.

Po odwołaniu się do przycisku Usuń w pole polecenia następnie pobierzemy informacje o produkcie powiązanym z bieżącym wierszem GridView. Na koniec ustawiliśmy właściwość przycisku Usuń na odpowiedni kod JavaScript, który zawiera nazwę produktu. Ponieważ ciąg języka JavaScript przekazany do confirm(string) funkcji jest rozdzielany przy użyciu apostrofów, musimy uniknąć wszelkich apostrofów, które pojawiają się w nazwie produktu. W szczególności apostrofy w nazwie produktu są zamienione na "\'".

Po zakończeniu tych zmian kliknięcie przycisku Usuń w GridView wyświetli dostosowane okno dialogowe potwierdzenia, co widać na Rysunku 4. Podobnie jak w przypadku okna dialogowego potwierdzenia z widoku FormView, jeśli użytkownik kliknie przycisk Anuluj, postback zostanie anulowany, uniemożliwiając w ten sposób usunięcie.

Uwaga / Notatka

Ta technika może również służyć do programowego uzyskiwania dostępu do przycisku Usuń w pole polecenia w widoku DetailsView. Dla kontrolki DetailsView należy utworzyć procedurę zdarzenia dla DataBound zdarzenia, ponieważ kontrolka DetailsView nie ma RowDataBound zdarzenia.

Rysunek 4. Kliknięcie przycisku Usuń kontrolki GridView powoduje wyświetlenie dostosowanego okna dialogowego potwierdzenia (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Używanie pól szablonów

Jedną z wad pola CommandField jest to, że jego przyciski muszą być uzyskiwane poprzez indeksowanie i że wynikowy obiekt musi być przekształcony na odpowiedni typ przycisku (Button, LinkButton lub ImageButton). Używanie "liczb magicznych" i typów zakodowanych w kodzie zaprasza do problemów, których nie można odnaleźć do czasu uruchomienia. Jeśli na przykład użytkownik lub inny deweloper dodaje nowe przyciski do pola commandfield w pewnym momencie w przyszłości (na przykład przycisk Edytuj) lub zmienia ButtonType właściwość, istniejący kod będzie nadal kompilowany bez błędu, ale odwiedzanie strony może spowodować wyjątek lub nieoczekiwane zachowanie, w zależności od tego, jak kod został napisany i jakie zmiany zostały wprowadzone.

Alternatywną metodą jest przekonwertowanie pól poleceń GridView i DetailsView na pola templateFields. Spowoduje to wygenerowanie pola TemplateField z elementem ItemTemplate z LinkButtonem (lub Buttonem lub ImageButtonem) dla każdego przycisku w polach polecenia. Te właściwości przycisków OnClientClick można przypisać deklaratywnie, jak widzieliśmy w przypadku FormView, lub można do nich uzyskać dostęp programowo w odpowiednim obsługiwaczu zdarzeń DataBound, używając następującego wzorca:

Dim obj As ButtonType = CType(e.Row.FindControl("controlID"), ButtonType)

Gdzie controlID jest wartością właściwości s ID przycisku. Mimo że ten wzorzec nadal wymaga zakodowanego typu rzutowania, eliminuje potrzebę indeksowania, co pozwala na zmianę układu bez wystąpienia błędu w czasie wykonywania.

Podsumowanie

Funkcja JavaScript confirm(string) jest powszechnie używaną techniką kontrolowania przepływu pracy przesyłania formularzy. Po wykonaniu funkcja wyświetla modalne okno dialogowe po stronie klienta, które zawiera dwa przyciski, OK i Anuluj. Jeśli użytkownik kliknie przycisk OK, confirm(string) funkcja zwróci truewartość ; kliknięcie przycisku Anuluj zwraca wartość false. Ta funkcja, wraz z zachowaniem przeglądarki, które powoduje anulowanie przesyłania formularza, jeśli program obsługi zdarzeń w trakcie tego procesu zwraca false, może być użyta do wyświetlania okna wiadomości potwierdzenia podczas usuwania rekordu.

Funkcję confirm(string) można skojarzyć z procedurą obsługi zdarzeń po stronie onclick klienta kontrolki Internetowej przycisku za pomocą właściwości s kontrolki OnClientClick . Podczas pracy z przyciskiem Usuń w szablonie — w jednym z szablonów kontrolki FormView lub w polu TemplateField w widoku DetailsView lub GridView — tę właściwość można ustawić deklaratywnie lub programowo, jak pokazano w tym samouczku.

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.

PoprzedniNastępny