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 po kliknięciu przycisku Usuń.

Wprowadzenie

W ciągu ostatnich kilku samouczków widzieliśmy, jak używać naszej architektury aplikacji, ObjectDataSource i danych kontrolki sieci Web w celu zapewnienia możliwości wstawiania, edytowania i usuwania. Interfejsy usuwania, które zbadaliśmy do tej pory, składają się z przycisku Usuń, który po kliknięciu powoduje ogłaszanie zwrotne i wywołuje metodę ObjectDataSource.Delete() Następnie Delete() metoda wywołuje skonfigurowaną metodę z warstwy logiki biznesowej, która propaguje wywołanie do warstwy dostępu do danych, wydając rzeczywistą DELETE instrukcję 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 potwierdzenia, gdy użytkownik kliknie przycisk Usuń. Jeśli użytkownik przypadkowo kliknie przycisk Usuń po kliknięciu przycisku Edytuj, rekord przeznaczony do zaktualizowania zostanie usunięty. Aby temu zapobiec, w tym samouczku dodamy okno dialogowe potwierdzenia po stronie klienta, które będzie wyświetlane 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ętego przycisku (truejeśli użytkownik kliknie przycisk OK, a false jeśli kliknie przycisk Anuluj).

Rysunek 1. Metoda JavaScript confirm(string) wyświetla modalne, Client-Side messagebox

W trakcie przesyłania formularza, jeśli wartość false jest zwracana z programu obsługi zdarzeń po stronie klienta, przesyłanie formularza jest anulowane. Korzystając z tej funkcji, możemy mieć procedurę obsługi zdarzeń po stronie onclick klienta przycisku Usuń, aby zwrócić 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 ogłaszania zwrotnego produkt, którego kliknięto przycisk Usuń, nie zostanie usunięty. Jeśli jednak użytkownik kliknie przycisk OK w oknie dialogowym potwierdzenia, ogłaszanie zwrotne będzie kontynuowane bez pobudowania i produkt zostanie usunięty. Aby uzyskać więcej informacji na temat tej techniki, zapoznaj się z tematem Using JavaScript s Method to confirm() Control Form Submission (Używanie metody języka JavaScript do przesyłania formularza sterującego ).

Dodanie niezbędnego skryptu po stronie klienta różni się nieznacznie w przypadku używania szablonów niż w przypadku używania polecenia CommandField. W związku z tym w tym samouczku przyjrzymy się przykładowi kontrolki FormView i GridView.

Uwaga

Korzystając z technik potwierdzenia po stronie klienta, takich jak te omówione w tym samouczku, założono, ż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 ogłaszania zwrotnego (nie wyświetla potwierdzenia pola komunikatu).

Krok 1. Tworzenie widoku formularza obsługującego usuwanie

Zacznij od dodania elementu FormView do ConfirmationOnDelete.aspx strony w EditInsertDelete folderze, powiąż go z nowym obiektem ObjectDataSource, który pobiera informacje o produkcie ProductsBLL za pośrednictwem metody klasy .GetProducts() Skonfiguruj również obiekt ObjectDataSource tak, ProductsBLL aby metoda s DeleteProduct(productID) klasy została zamapowana na metodę ObjectDataSource Delete() . Upewnij się, że listy rozwijane INSERT i UPDATE są ustawione na wartość (Brak). Na koniec zaznacz pole wyboru Włącz stronicowanie w tagu inteligentnym kontrolki 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 ItemTemplate FormView oferuje tylko przycisk Usuń, bez przycisków Nowy i Aktualizuj. Adiustacja deklaratywna elementu FormView obejmuje jednak nadmiarowe EditItemTemplate elementy i InsertItemTemplate, które można usunąć. Poświęć chwilę, aby dostosować element ItemTemplate , aby wyświetlić tylko podzbiór pól danych produktu. Skonfigurowano moje wyświetlanie nazwy produktu w <h3> nagłówku powyżej nazw dostawców 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 przez kliknięcie przycisku Usuń. Rysunek 2 przedstawia zrzut ekranu przedstawiający postęp do tej pory po wyświetleniu w przeglądarce.

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

Krok 2. Wywoływanie funkcji confirm(string) z przycisków usuwania Client-Side zdarzenia onclick

Po utworzeniu obiektu FormView ostatnim krokiem jest skonfigurowanie przycisku Usuń, tak aby po kliknięciu przez osobę odwiedzającą wywoływano funkcję JavaScript confirm(string) . Dodanie skryptu po stronie klienta do zdarzenia po stronie klienta onclick przycisku, linku lub elementu ImageButton można wykonać za pomocą polecenia OnClientClick property, który jest nowy w celu 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 jest do tego! Rysunek 3 przedstawia zrzut ekranu przedstawiający to potwierdzenie w działaniu. Kliknięcie przycisku Usuń powoduje wyświetlenie okna dialogowego potwierdzania. Jeśli użytkownik kliknie przycisk Anuluj, ogłaszanie zwrotne zostanie anulowane i produkt nie zostanie usunięty. Jeśli jednak użytkownik kliknie przycisk OK, ogłaszanie zwrotne będzie kontynuowane i wywoływana Delete() jest metoda ObjectDataSource, której kulminacją jest usunięcie rekordu bazy danych.

Uwaga

Ciąg przekazywany do confirm(string) funkcji Języka JavaScript jest rozdzielany apostrofami (zamiast cudzysłowów). 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 Usuwania w pole polecenia

Podczas pracy z elementem Button, LinkButton lub ImageButton bezpośrednio w szablonie można skojarzyć z nim okno dialogowe potwierdzenia, konfigurując jego OnClientClick właściwość w celu zwrócenia wyników 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 obsługi zdarzeń GridView lub DetailsView DataBound , a następnie ustawić jego OnClientClick właściwość.

Uwaga

Podczas ustawiania właściwości Usuń przycisk w OnClientClick odpowiednim DataBound procedurze 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 do używania 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 Włącz usuwanie z tagu inteligentnego GridView. Spowoduje to dodanie pola commandfield do kolekcji GridView Columns z jej ShowDeleteButton właściwością ustawioną na .true

Po wprowadzeniu tych zmian znacznik deklaratywny 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 Delete LinkButton, do którego można uzyskać dostęp programowo z programu obsługi zdarzeń gridView RowDataBound . Po odwołaniu możemy odpowiednio ustawić jej OnClientClick właściwość. Utwórz program 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ę od programowego odwoływania się do przycisku Usuń. Ogólnie rzecz biorąc, należy użyć 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 obiektu CommandField w kolekcji GridViewColumns, natomiast kontrolkaIndex jest indeksem przycisku Usuń w kolekcji CommandFieldControls. Wartość controlIndex zależy od pozycji 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. Przyczyną użycia indeksu 2 jest to, że dwa kontrolki są dodawane przez pole polecenia przed przyciskiem Usuń: przycisk Edytuj i kontrolkę LiteralControl, która służy do dodawania spacji między przyciskami Edytuj i Usuń.

W naszym konkretnym przykładzie pole CommandField używa elementu LinkButtons i, będąc polem najbardziej po lewej stronie, ma właściwość commandFieldIndex o wartości 0. Ponieważ nie ma żadnych innych przycisków, ale przycisk Usuń w pole polecenia, używamy kontrolkiIndex 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ść Usuń przycisk na OnClientClick odpowiedni kod JavaScript, który zawiera nazwę produktu. Ponieważ ciąg języka JavaScript przekazywany 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 wszelkie apostrofy w nazwie produktu są poprzedzone znakiem "\'".

Po zakończeniu tych zmian kliknięcie przycisku Usuń w elementy GridView powoduje wyświetlenie dostosowanego okna dialogowego potwierdzenia (zobacz Rysunek 4). Podobnie jak w przypadku pola komunikatu potwierdzenia z widoku FormView, jeśli użytkownik kliknie przycisk Anuluj ogłaszanie zwrotne zostanie anulowane, co uniemożliwia usunięcie.

Uwaga

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 jednak utworzyć procedurę obsługi zdarzeń dla DataBound zdarzenia, ponieważ element DetailsView nie ma RowDataBound zdarzenia.

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

Korzystanie z pól szablonów

Jedną z wad pola commandfield jest to, że jego przyciski muszą być dostępne za pośrednictwem indeksowania i że wynikowy obiekt musi być rzutowany do odpowiedniego typu przycisku (Button, LinkButton lub ImageButton). Używanie "liczb magicznych" i zakodowanych typów zaprasza do problemów, których nie można odnaleźć do czasu wykonania. Jeśli na przykład ty lub inny deweloper dodajesz nowe przyciski do pola polecenia w pewnym momencie w przyszłości (na przykład przycisk Edytuj) lub zmienisz ButtonType właściwość, istniejący kod będzie nadal kompilowany bez błędów, 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 obiektów GridView i DetailsView s CommandFields na templateFields. Spowoduje to wygenerowanie pola szablonu z elementem ItemTemplate z przyciskiem LinkButton (lub Button lub ImageButton) dla każdego przycisku w pole polecenia. Te właściwości przycisków OnClientClick można przypisać deklaratywnie, jak pokazano w widoku FormView, lub można uzyskać do nich dostęp programowo w odpowiedniej DataBound procedurze obsługi zdarzeń przy użyciu następującego wzorca:

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

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

Podsumowanie

Funkcja Języka JavaScript confirm(string) jest powszechnie używaną techniką kontrolowania przepływu pracy przesyłania formularzy. Po wykonaniu funkcja wyświetla modalne, po stronie klienta okno dialogowe zawierające dwa przyciski, OK i Anuluj. Jeśli użytkownik kliknie przycisk OK, confirm(string) funkcja zwróci wartość true. Kliknięcie przycisku Anuluj zwraca wartość false. Ta funkcja, w połączeniu z zachowaniem przeglądarki w celu anulowania przesyłania formularza, jeśli program obsługi zdarzeń podczas procesu przesyłania zwraca falsewartość , może służyć do wyświetlania pola komunikatu potwierdzenia podczas usuwania rekordu.

Funkcję confirm(string) można skojarzyć z procedurą obsługi zdarzeń po stronie klienta kontrolki Przycisk onclick 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 do niego dotrzeć pod adresem mitchell@4GuysFromRolla.com. Lub za pośrednictwem swojego bloga, który można znaleźć na stronie http://ScottOnWriting.NET.

WsteczDalej