Přidání potvrzení odstranění na straně klienta (VB)

od Scott Mitchella

Stáhnout PDF

V rozhraních, která jsme zatím vytvořili, může uživatel omylem odstranit data kliknutím na tlačítko Odstranit, když chce kliknout na tlačítko Upravit. V tomto kurzu přidáme potvrzovací dialogové okno na straně klienta, které se zobrazí po kliknutí na tlačítko Odstranit.

Úvod

V posledních několika kurzech jsme viděli, jak používat naši aplikační architekturu, ObjectDataSource a ovládací prvky web dat společně s vkládáním, úpravami a odstraňováním funkcí. Rozhraní pro mazání, která jsme zatím prozkoumali, se skládají z tlačítka Smazat, které po kliknutí způsobí postback a vyvolá metodu ObjectDataSource Delete(). Metoda Delete() pak vyvolá nakonfigurovanou metodu z vrstvy obchodní logiky, která rozšíří volání do vrstvy přístupu k datům a vydá skutečné DELETE příkazy do databáze.

I když toto uživatelské rozhraní umožňuje návštěvníkům odstranit záznamy prostřednictvím ovládacích prvků GridView, DetailsView nebo FormView, chybí při kliknutí na tlačítko Odstranit jakýkoliv druh potvrzení. Pokud uživatel omylem klikne na tlačítko Odstranit, když chce kliknout na Upravit, záznam, který chce aktualizovat, se místo toho odstraní. Abychom tomu zabránili, přidáme v tomto kurzu potvrzovací dialogové okno na straně klienta, které se zobrazí po kliknutí na tlačítko Odstranit.

Funkce JavaScriptu confirm(string) zobrazí vstupní parametr řetězce jako text uvnitř modálního dialogového okna, které je vybaveno dvěma tlačítky – OK a Cancel (viz obrázek 1). Funkce confirm(string) vrátí logickou hodnotu v závislosti na tom, na jaké tlačítko se klikne (truepokud uživatel klikne na OK a false klikne na tlačítko Storno).

Obrázek 1: Metoda JavaScriptu confirm(string) zobrazuje modální Client-Side Dialogové okno

Pokud se během odeslání formuláře vrátí hodnota false z obslužné rutiny události na straně klienta, odeslání formuláře se zruší. Pomocí této funkce může obslužná rutina události na straně klienta tlačítka Delete vrátit hodnotu volání onclick. Pokud uživatel klikne na tlačítko Storno, confirm(string) vrátí hodnotu false, což způsobí zrušení odeslání formuláře. Bez zpětného odeslání se produkt, na tlačítko Odstranit kterého bylo kliknuto, nebude odstraněn. Pokud však uživatel klikne v potvrzovací dialogovém okně na OK, bude postback pokračovat bez přerušení a produkt bude odstraněn. Pro více informací o této technice se podívejte na Metoda jazyka JavaScript pro kontrolu odesílání formuláře.

Přidání potřebného skriptu na straně klienta se mírně liší, pokud používáte šablony než při použití CommandFieldu. Proto v tomto kurzu se podíváme na příklad FormView i GridView.

Poznámka:

Použití technik potvrzení na straně klienta, jako jsou ty, které jsou popsány v tomto kurzu, předpokládá, že vaši uživatelé navštíví prohlížeče, které podporují JavaScript a které mají povolený JavaScript. Pokud některý z těchto předpokladů není pro konkrétního uživatele pravdivý, kliknutí na tlačítko Odstranit okamžitě způsobí zpětné odeslání (nezobrazuje se potvrzovací zpráva).

Krok 1: Vytvoření objektu FormView, který podporuje odstranění

Začněte přidáním FormView na ConfirmationOnDelete.aspx stránku ve EditInsertDelete složce, vytvořte vazbu na nový ObjectDataSource, který stáhne informace o produktu prostřednictvím ProductsBLL metody třídy s GetProducts() . Nakonfigurujte také ObjectDataSource tak, aby metoda třídy ProductsBLL s DeleteProduct(productID) byla mapována na metodu ObjectDataSource s Delete(); ujistěte se, že jsou rozevírací seznamy INSERT a UPDATE nastaveny na (Nenastaveno). Nakonec zaškrtněte políčko Povolit stránkování v inteligentní značce FormView.

Po provedení těchto kroků bude nový deklarativní kód ObjectDataSource vypadat takto:

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

Stejně jako v předchozích příkladech, které nepoužíly optimistickou souběžnost, chvíli vymazejte vlastnost ObjectDataSource s OldValuesParameterFormatString .

Vzhledem k tomu, že je ovládací prvek ObjectDataSource vázán pouze k odstranění, FormView s ItemTemplate nabízí pouze tlačítko Odstranit, chybí tlačítka Nové a Aktualizovat. Deklarativní značka FormView však obsahuje nadbytečné EditItemTemplate a InsertItemTemplate, které lze odebrat. Chvíli přizpůsobte ItemTemplate tak, aby se zobrazovala jenom podmnožina polí s daty produktu. Nakonfiguroval(a) jsem svůj název produktu tak, aby zobrazoval název produktu v nadpisu <h3> nad názvy dodavatelů a kategorií (spolu s tlačítkem Odstranit).

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

S těmito změnami máme plně funkční webovou stránku, která uživateli umožňuje přepínat produkty po jednom, s možností odstranit produkt jednoduše kliknutím na tlačítko Odstranit. Obrázek 2 ukazuje snímek obrazovky našeho dosavadního pokroku, jak se zobrazuje v prohlížeči.

Obrázek 2: Objekt FormView zobrazuje informace o jednom produktu (kliknutím zobrazíte obrázek s plnou velikostí)

Krok 2: Volání funkce confirm(string) z delete buttons Client-Side onclick Event

Po vytvoření FormView je posledním krokem konfigurace tlačítka Delete tak, aby při kliknutí návštěvníkem byla vyvolána funkce JavaScript confirm(string) . Přidání skriptu na straně klienta do události Button, LinkButton nebo ImageButton s událostí onclick na straně klienta lze provést pomocí OnClientClick property, který je novinkou pro ASP.NET 2.0. Vzhledem k tomu, že chceme mít vrácenou confirm(string) hodnotu funkce, jednoduše nastavte tuto vlastnost na: return confirm('Are you certain that you want to delete this product?');

Po této změně by deklarativní syntaxe Delete LinkButton s měla vypadat nějak takto:

<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 je všechno, co je na tom! Obrázek 3 ukazuje snímek obrazovky s tímto potvrzením v akci. Kliknutím na tlačítko Odstranit se zobrazí dialogové okno potvrzení. Pokud uživatel klikne na Tlačítko Storno, zruší se zpětné odeslání a produkt se neodstraní. Pokud však uživatel klikne na OK, postback pokračuje a metoda ObjectDataSource Delete() je vyvolána, což vyústí v odstranění záznamu z databáze.

Poznámka:

Řetězec předaný do confirm(string) funkce JavaScriptu je oddělený apostrofy (místo uvozovek). V JavaScriptu lze řetězce oddělovat pomocí libovolného znaku. Zde používáme apostrofy, aby oddělovače řetězce nemohou zavádět nejednoznačnost s oddělovači použitými pro vlastnost hodnoty confirm(string) předané do OnClientClick.

Obrázek 3: Při kliknutí na tlačítko Odstranit se zobrazí potvrzení (kliknutím zobrazíte obrázek v plné velikosti).

Krok 3: Konfigurace vlastnosti OnClientClick pro tlačítko Delete v CommandField

Při práci s ovládacími prvky Button, LinkButton nebo ImageButton přímo v šabloně lze potvrzovací dialogové okno přidružit jednoduše tak, že jeho vlastnost OnClientClick vrátí výsledky funkce JavaScript confirm(string). Nicméně CommandField - který přidá pole tlačítek Delete do GridView nebo DetailsView - nemá OnClientClick vlastnost, kterou lze nastavit deklarativně. Místo toho musíme odkazovat programově na tlačítko Delete v rámci odpovídající DataBound obslužné rutiny události v GridView nebo DetailsView, a pak tam nastavit jeho OnClientClick vlastnost.

Poznámka:

Při nastavování vlastnosti tlačítka OnClientClick Delete v příslušné DataBound obslužné rutině události máme přístup k datům, která byla svázána s aktuálním záznamem. To znamená, že můžeme potvrzovací zprávu rozšířit tak, aby obsahovala podrobnosti o konkrétním záznamu, například "Opravdu chcete odstranit produkt Chai?". Takové přizpůsobení je také možné v šablonách pomocí syntaxe vazby dat.

Chcete-li si procvičit nastavení vlastnosti OnClientClick pro tlačítka „Delete“ v CommandField, přidejme na stránku GridView. Nakonfigurujte tento Objekt GridView tak, aby používal stejný ObjectDataSource ovládací prvek, který FormView používá. Také omezte GridView s BoundFields tak, aby zahrnoval pouze název produktu, kategorii a dodavatele. Nakonec zaškrtněte zaškrtávací políčko Povolit odstranění v inteligentní značce ovládacího prvku GridView. Tím přidáte CommandField do kolekce GridView s její vlastností Columns nastavenou na ShowDeleteButton.

Po provedení těchto změn by deklarativní kód GridView měl vypadat takto:

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

CommandField obsahuje jednu instanci Delete LinkButton, ke které lze přistupovat programově z obslužné rutiny události GridView RowDataBound . Jakmile je odkazováno, můžeme odpovídajícím způsobem nastavit jeho vlastnost OnClientClick. Pomocí následujícího kódu vytvořte obslužnou rutinu pro událost RowDataBound:

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

Tato obslužná rutina události pracuje s datovými řádky (ty, které budou mít tlačítko Odstranit) a začíná programovým odkazem na tlačítko Odstranit. Obecně použijte následující vzory:

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

ButtonType je typ tlačítka, které používá CommandField - Button, LinkButton nebo ImageButton. Ve výchozím nastavení CommandField používá LinkButtons, ale to lze přizpůsobit pomocí CommandField s ButtonType property. CommandFieldIndex je pořadový index CommandField v kolekci GridView sColumns, zatímco controlIndex je index tlačítka Delete v kolekci CommandField.Controls Hodnota controlIndex závisí na umístění tlačítka vzhledem k jiným tlačítkům v CommandField. Pokud je například jediným tlačítkem zobrazeným v CommandField tlačítko Odstranit, použijte index 0. Pokud ale existuje tlačítko Upravit, které předchází tlačítku Odstranit, použijte index 2. Důvodem použití indexu 2 je, že commandField před tlačítko Delete přidá dva ovládací prvky: tlačítko Upravit a LiteralControl, který se používá k přidání mezery mezi tlačítka Upravit a Odstranit.

V našem konkrétním příkladu používá CommandField LinkButtons a pole nejvíce vlevo má commandFieldIndex 0. Vzhledem k tomu, že v CommandField nejsou žádná další tlačítka, ale tlačítko Delete, používáme controlIndex 0.

Po odkázání na tlačítko Smazat v CommandField získáme informace o produktu vázaném na aktuální řádek GridView. Nakonec nastavíme vlastnost tlačítka Smazat s OnClientClick na příslušný JavaScript, který obsahuje název produktu. Vzhledem k tomu, že JavaScriptový řetězec předaný do confirm(string) funkce je ohraničený pomocí apostrofů, musíme zapsat únikový znak ke každému apostrofu, který se objeví v názvu produktu. Zejména všechny apostrofy v názvu produktu jsou escapovány pomocí "\'".

Po dokončení těchto změn se po kliknutí na tlačítko Odstranit v objektu GridView zobrazí přizpůsobené potvrzovací dialogové okno (viz obrázek 4). Stejně jako u potvrzovací zprávy z FormView, pokud uživatel klikne na Zrušit, postback je zrušen, čímž se zabrání odstranění.

Poznámka:

Tuto techniku lze také použít pro programový přístup k tlačítku Odstranit v CommandField v DetailsView. Pro zobrazení DetailView však vytvoříte obslužnou rutinu události pro událost DataBound, protože zobrazení DetailView nemá událost RowDataBound.

Obrázek 4: Kliknutím na tlačítko Odstranit ovladače GridView se zobrazí přizpůsobené potvrzovací dialogové okno (kliknutím zobrazíte obrázek v plné velikosti).

Použití šablonových polí

Jednou z nevýhod CommandFieldu je, že k jeho tlačítkům musí být přístup přes indexování a že výsledný objekt je nutné přetypovat na příslušný typ tlačítka (Button, LinkButton nebo ImageButton). Použití "magických čísel" a pevně zakódovaných typů způsobuje problémy, které nelze zjistit, dokud nedojde k běhu programu. Pokud například vy nebo jiný vývojář přidáte nová tlačítka do CommandFieldu v určitém okamžiku v budoucnu (například tlačítko Upravit) nebo změníte ButtonType vlastnost, stávající kód se stále zkompiluje bez chyby, ale při návštěvě stránky může dojít k výjimce nebo neočekávanému chování v závislosti na tom, jak byl váš kód napsán a jaké změny byly provedeny.

Alternativním přístupem je převést GridView a DetailsView s CommandFields na TemplateFields. Tím se vygeneruje TemplateField s ItemTemplate, obsahující LinkButton (nebo Button či ImageButton) pro každé tlačítko v CommandField. Tyto vlastnosti tlačítek OnClientClick lze přiřadit deklarativním způsobem, jak jsme viděli u FormView, nebo lze k nim přistupovat programově v příslušné DataBound obslužné rutině události podle následujícího vzoru:

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

Kde controlID je hodnota vlastnosti tlačítka ID . I když tento vzor stále vyžaduje pevně zakódovaný typ pro přetypování, odstraní potřebu indexování, což umožní změnit rozložení bez vzniku chyby za běhu.

Shrnutí

JavaScriptová confirm(string) funkce je běžně používaným způsobem řízení pracovního postupu odeslání formuláře. Při spuštění funkce zobrazí modální dialogové okno na straně klienta, které obsahuje dvě tlačítka, OK a Storno. Pokud uživatel klikne na tlačítko OK, funkce confirm(string) vrátí true; kliknutím na tlačítko Storno vrátí false. Tato funkce může být ve spojení s chováním prohlížeče, které zruší odeslání formuláře, pokud během procesu odeslání obslužná rutina události vrátí false, použita k zobrazení potvrzovacího dialogového okna při odstranění záznamu.

Funkci confirm(string) lze přidružit k obslužné rutině události webového ovládacího prvku Button web onclick prostřednictvím vlastnosti ovládacího prvku OnClientClick . Při práci s tlačítkem Delete v šabloně – buď v jedné ze šablon FormView, nebo v TemplateField v DetailsView nebo GridView – tuto vlastnost lze nastavit buď deklarativní, nebo programově, jak jsme viděli v tomto kurzu.

Šťastné programování!

O autorovi

Scott Mitchell, autor sedmi knih ASP/ASP.NET a zakladatel 4GuysFromRolla.com, pracuje s webovými technologiemi Microsoftu od roku 1998. Scott pracuje jako nezávislý konzultant, trenér a spisovatel. Jeho nejnovější kniha je Sams Naučte se sami ASP.NET 2.0 za 24 hodin. Může být dosažitelný na mitchell@4GuysFromRolla.comadrese .

Předchozídalší