Client-Side megerősítés hozzáadása törléskor (VB)

által Scott Mitchell

PDF letöltése

Az eddig létrehozott felületeken a felhasználók véletlenül törölhetik az adatokat a Törlés gombra kattintva, amikor a Szerkesztés gombra akartak kattintani. Ebben az oktatóanyagban hozzáadunk egy ügyféloldali megerősítési párbeszédpanelt, amely akkor jelenik meg, amikor a Törlés gombra kattint.

Bevezetés

Az elmúlt néhány oktatóanyag során láthattuk, hogyan használhatja az alkalmazásarchitektúrát, az ObjectDataSource-t és az adat-webvezérlőket a beszúrási, szerkesztési és törlési képességek biztosításához. Az eddig megvizsgált törlési felületek egy Törlés gombból állnak, amely kattintáskor visszaadást okoz, és meghívja az ObjectDataSource Delete() metódust. A Delete() metódus ezután meghívja a konfigurált metódust az üzleti logikai rétegből, amely propagálja a hívást az adatelérési rétegre, és kiadja a tényleges DELETE utasítást az adatbázisnak.

Bár ez a felhasználói felület lehetővé teszi, hogy a látogatók rekordokat töröljenek a GridView, a DetailsView vagy a FormView vezérlőn keresztül, nem kap semmilyen megerősítést, amikor a felhasználó a Törlés gombra kattint. Ha egy felhasználó véletlenül a Törlés gombra kattint, amikor a Szerkesztés gombra kattint, a frissíteni kívánt rekord törlődik. Ennek elkerülése érdekében ebben az oktatóanyagban hozzáadunk egy ügyféloldali megerősítést kérő párbeszédpanelt, amely a Törlés gombra kattintáskor jelenik meg.

A JavaScript confirm(string) függvény szövegként jeleníti meg a sztringbeviteli paramétert egy modális párbeszédpanelen belül, amely két gombbal rendelkezik : OK és Mégse (lásd: 1. ábra). A confirm(string) függvény logikai értéket ad vissza attól függően, hogy melyik gombra kattint (trueha a felhasználó az OK gombra kattint, és false ha a Mégse gombra kattint).

1. ábra: A JavaScript confirm(string) metódus modális Client-Side üzenetmezőt jelenít meg

Az űrlapbeküldés során, ha egy ügyféloldali false eseménykezelő visszaad egy értéket, az űrlap beküldése megszakad. Ezzel a funkcióval a Delete gomb ügyféloldali onclick eseménykezelője visszaadhatja a hívás confirm("Are you sure you want to delete this product?")értékét. Ha a felhasználó a Mégse gombra kattint, confirm(string) hamis értéket ad vissza, ami miatt az űrlap beküldése elmarad. Ha nincs visszalépés, az a termék, amelynek a Törlés gombjára kattintott, nem törlődik. Ha azonban a felhasználó az OK gombra kattint a megerősítést kérő párbeszédpanelen, a postback továbbra is változatlan marad, és a termék törlődik. A technikával kapcsolatos további információkért tekintse meg a JavaScript confirm() metódusát az űrlapbeküldés szabályozásához .

A szükséges ügyféloldali szkript hozzáadása kis mértékben eltér a sablonok használata esetén, mint a CommandField használata esetén. Ezért ebben az oktatóanyagban egy FormView- és GridView-példát is megvizsgálunk.

Megjegyzés:

Az ügyféloldali megerősítési technikák, mint az oktatóanyagban tárgyaltak, feltételezik, hogy a felhasználók olyan böngészőkkel látogatnak, amelyek támogatják a JavaScriptet, és hogy engedélyezve vannak a JavaScript. Ha a fenti feltételezések egyike nem igaz egy adott felhasználóra vonatkozóan, a Törlés gombra kattintva azonnal visszavételt fog eredményezni (nem jelenik meg megerősítési üzenetmező).

1. lépés: Törlést támogató FormView létrehozása

Először adjon hozzá egy FormView-t a ConfirmationOnDelete.aspx lapon, amely a EditInsertDelete mappában található, és kötésként alkalmazzon egy új ObjectDataSource-ot, amely a ProductsBLL osztály GetProducts() metódusán keresztül lekéri a termékinformációkat. Konfigurálja az ObjectDataSource-t úgy, hogy az ProductsBLL osztály DeleteProduct(productID) metódusa az ObjectDataSource Delete() metódusához legyen leképezve; győződjön meg arról, hogy az INSERT és az UPDATE fül legördülő listái (Nincs) értékre vannak állítva. Végül jelölje be a Lapozás engedélyezése jelölőnégyzetet a FormView intelligens címkéjében.

A lépések után az új ObjectDataSource deklaratív korrektúra a következőképpen fog kinézni:

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

A korábbi példákhoz hasonlóan, amelyek nem használták az optimista egyidejűséget, szánjon egy kis időt az ObjectDataSource OldValuesParameterFormatString tulajdonság törlésére.

Mivel olyan ObjectDataSource-vezérlőhöz van kötve, amely csak a törlést támogatja, a FormView s ItemTemplate csak a Törlés gombot kínálja, az Új és a Frissítés gomb nélkül. A FormView deklaratív jelölése azonban tartalmaz egy felesleges EditItemTemplate és InsertItemTemplate, amely eltávolítható. Szánjon egy kis időt a ItemTemplate testreszabására, hogy az csak a termék adatmezőinek egy részét mutassa. Úgy konfiguráltam az enyémet, hogy a termék neve megjelenjen a szállító és a kategória neve fölötti <h3> címsorban (a Törlés gombbal együtt).

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

Ezekkel a módosításokkal egy teljesen működőképes weblapunk van, amely lehetővé teszi a felhasználó számára, hogy egyenként váltson a termékek között, és a Törlés gombra kattintva egyszerűen törölheti a terméket. A 2. ábra egy képernyőfelvételt jelenít meg az eddigi fejlődésünkről, amikor egy böngészőben tekintjük meg.

2. ábra: A FormView egyetlen termékről jelenít meg információkat (kattintson ide a teljes méretű kép megtekintéséhez)

2. lépés: A confirm(string) függvény meghívása a Delete Buttons Client-Side onclick eseményből

A FormView létrehozásakor az utolsó lépés a Törlés gomb konfigurálása, hogy amikor a látogató rákattint rá, a JavaScript-függvény confirm(string) meg legyen hívva. Az ügyféloldali szkript hozzáadása gombhoz, LinkButtonhoz vagy ImageButton ügyféloldali onclick eseményhez a OnClientClick property2.0-s ASP.NET új verziójának használatával valósítható meg. Mivel a függvény értékét confirm(string) szeretnénk visszaadni, egyszerűen állítsa be ezt a tulajdonságot a következő értékre: return confirm('Are you certain that you want to delete this product?');

A módosítás után a Delete LinkButton deklaratív szintaxisának a következőképpen kell kinéznie:

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

Csak ennyi van benne! A 3. ábrán a megerősítés működés közbeni képernyőképe látható. A Törlés gombra kattintva megjelenik a Megerősítés párbeszédpanel. Ha a felhasználó a Mégse gombra kattint, a rendszer megszakítja a visszavételt, és a termék nem törlődik. Ha azonban a felhasználó az OK gombra kattint, a postback folytatódik, és a rendszer meghívja az ObjectDataSource metódust Delete() , amely a törlés alatt álló adatbázisrekordban csúcsosul.

Megjegyzés:

A confirm(string) JavaScript-függvénybe átadott sztringet aposztrófokkal határolják, nem pedig idézőjelekkel. A JavaScriptben a sztringek bármelyik karakterrel elválaszthatók. Itt aposztrófokat használunk, hogy az átadott confirm(string) sztring elválasztói ne vezessenek be kétértelműséget a OnClientClick tulajdonságértékhez használt elválasztókkal.

3. ábra: A Törlés gombra kattintva megjelenik egy megerősítés (ide kattintva megtekintheti a teljes méretű képet)

3. lépés: A Törlés gomb OnClientClick tulajdonságának konfigurálása egy parancsmezőben

Ha egy gombbal, LinkButtonnal vagy ImageButtonnal dolgozik közvetlenül egy sablonban, egy megerősítő párbeszédpanel társítható hozzá úgy, hogy egyszerűen konfigurálja a tulajdonságát, hogy a JavaScript-függvény OnClientClick eredményeit adja vissza. A CommandField azonban – amely a Delete gombok mezőjét adja hozzá a GridView-hoz vagy a DetailsView-hoz – nem rendelkezik OnClientClick deklaratívan beállítható tulajdonságokkal. Ehelyett programozott módon hivatkoznunk kell a GridView vagy a DetailsView megfelelő DataBound eseménykezelőjének Törlés gombjára, majd ott kell beállítani a tulajdonságát OnClientClick .

Megjegyzés:

A Törlés gomb tulajdonságának OnClientClick megfelelő DataBound eseménykezelőben való beállításakor hozzáféréssel rendelkezünk az aktuális rekordhoz kötött adatokhoz. Ez azt jelenti, hogy kiterjeszthetjük a megerősítést kérő üzenetet az adott rekordra vonatkozó részletekre, például: "Biztos, hogy törli a Chai-terméket?" Ilyen testreszabás adatkötési szintaxist használó sablonokban is lehetséges.

A CommandField Delete button(ok) tulajdonságának beállításának gyakorlásához adjunk egy GridView-t az oldalhoz. Konfigurálja ezt a GridView-t úgy, hogy ugyanazt az ObjectDataSource-vezérlőt használja, amelyet a FormView használ. Emellett korlátozza a GridView BoundFields mezőit, hogy csak a termék nevét, kategóriáját és szállítóját tartalmazzák. Végül jelölje be a Törlés engedélyezése jelölőnégyzetet a GridView eszközcímkéjén. Ezzel hozzáad egy CommandFieldet a GridView gyűjteményéhez Columns , amelynek tulajdonsága ShowDeleteButton a következő lesz true: .

A módosítások elvégzése után a GridView deklaratív korrektúrája az alábbihoz hasonlóan fog kinézni:

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

A CommandField egyetlen Delete LinkButton-példányt tartalmaz, amely programozott módon érhető el a GridView eseménykezelőből RowDataBound . A hivatkozás után ennek megfelelően a OnClientClick tulajdonságát állíthatjuk be. Hozzon létre egy eseménykezelőt az RowDataBound eseményhez a következő kóddal:

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

Ez az eseménykezelő az adatsorokkal (a Törlés gombbal rendelkezőkkel) működik, és a Törlés gombra való programozott hivatkozással kezdődik. Általában használja a következő mintát:

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

A ButtonType a CommandField - Button, LinkButton vagy ImageButton által használt gomb típusa. A CommandField alapértelmezés szerint LinkButtonokat használ, de ez testre szabható a CommandField s ButtonType propertysegítségével. A commandFieldIndex a CommandField parancsmezőjének sorszámindexe Columns a GridView gyűjteményében, míg a controlIndex a CommandField gyűjtemény törlés gombjának indexe Controls . A controlIndex érték a commandfield többi gombhoz viszonyított pozíciójától függ. Ha például a CommandFieldben az egyetlen gomb a Törlés gomb, használjon 0-s indexet. Ha azonban a Törlés gombot megelőző Szerkesztés gomb van, használjon 2-et tartalmazó indexet. A 2-es index azért van használatban, mert a CommandField két vezérlőt ad hozzá a Törlés gomb előtt: a Szerkesztés gombot és egy Literálvezérlőt, amely szóközt ad a Szerkesztés és a Törlés gomb között.

Konkrét példánkban a CommandField LinkButtons-t használ, és mivel a bal szélső mező, commandFieldIndex értéke 0. Mivel a CommandField Törlés gombján kívül nincs más gomb, 0-s controlIndexet használunk.

A CommandField Törlés gombjára való hivatkozás után a következő lépésben az aktuális GridView sorhoz kötött termék adatait fogjuk fel. Végül a Delete gomb tulajdonságát OnClientClick a megfelelő JavaScriptre állítjuk, amely tartalmazza a termék nevét. Mivel a függvénybe confirm(string) átadott JavaScript-sztring aposztrófokkal van elválasztva, meg kell szabadulnunk a termék nevében megjelenő aposztrófoktól. A terméknévben szereplő aposztrófok a "\'" használatával vannak kicserélve.

Ha a módosítások befejeződnek, a GridView-ban a Törlés gombra kattintva megjelenik egy testreszabott megerősítést kérő párbeszédpanel (lásd a 4. ábrát). A FormView megerősítést kérő üzenetéhez hasonlóan, ha a felhasználó a Mégse gombra kattint, a rendszer megszakítja a visszaállítást, így megakadályozza a törlést.

Megjegyzés:

Ezzel a technikával programozott módon is elérheti a Delete gombot a DetailsView parancsmezőjében. A DetailsView esetében azonban létre kell hoznia egy eseménykezelőt az DataBound eseményhez, mivel a DetailsView-nak RowDataBound nincs eseménye.

4. ábra: A GridView Törlés gombjára kattintva megjelenít egy testreszabott megerősítési párbeszédpanelt (ide kattintva megtekintheti a teljes méretű képet)

A TemplateFields használata

A CommandField egyik hátránya, hogy a gombokat indexeléssel kell elérni, és az eredményként kapott objektumot a megfelelő gombtípusra (Gomb, LinkButton vagy ImageButton) kell leadni. A "mágikus számok" és a kemény kóddal kódolt típusok olyan problémákat hívnak meg, amelyek futásidőben nem deríthetők fel. Ha például Ön vagy egy másik fejlesztő a jövőben új gombokat ad hozzá a CommandFieldhez (például a Szerkesztés gombot), vagy módosítja a ButtonType tulajdonságot, a meglévő kód továbbra is hiba nélkül fog lefordítani, de a lap felkeresése kivételt vagy váratlan viselkedést okozhat a kód megírásától és a módosításoktól függően.

Egy másik módszer a GridView és a DetailsView parancsmezők sablonmezőkké alakítása. Ez létrehoz egy TemplateFieldet, ItemTemplate amely rendelkezik linkbuttonnal (vagy Gomb vagy ImageButton) a CommandField minden egyes gombjához. Ezek a gombtulajdonságok OnClientClick deklaratív módon rendelhetők hozzá, ahogyan a FormView-ban láttuk, vagy programozott módon elérhetők a megfelelő DataBound eseménykezelőben az alábbi minta használatával:

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

Ahol a controlID a gomb s ID tulajdonságának értéke. Bár ehhez a mintához továbbra is szükség van egy szigorúan kódolt típusra a leadáshoz, ez megszünteti az indexelés szükségességét, ami lehetővé teszi, hogy az elrendezés futásidejű hiba nélkül megváltozzon.

Összefoglalás

A JavaScript-függvény confirm(string) gyakran használt módszer az űrlapbeküldési munkafolyamat szabályozására. A végrehajtáskor a függvény egy modális, ügyféloldali párbeszédpanelt jelenít meg, amely két gombot tartalmaz, az OK és a Mégse gombot. Ha a felhasználó az OK gombra kattint, a confirm(string) függvény true-et ad vissza; ha a Mégse gombra kattint, akkor false-t ad vissza. Ez a funkció a böngésző viselkedésével párosítva megszakítja az űrlapküldést, ha egy eseménykezelő a beküldési folyamat során visszatér false, a rekord törlésekor egy megerősítő üzenetmező megjelenítésére használható.

A confirm(string) függvény a gomb webvezérlő ügyféloldali onclick eseménykezelőjével társítható a vezérlő s OnClientClick tulajdonságán keresztül. Ha egy sablon Törlés gombjával dolgozik – akár a FormView egyik sablonjában, akár a DetailsView vagy a GridView TemplateField sablonmezőjében –, ez a tulajdonság deklaratívan vagy programozott módon is beállítható, ahogyan az oktatóanyagban láttuk.

Boldog programozást!

Tudnivalók a szerzőről

Scott Mitchell, hét ASP/ASP.NET-könyv szerzője és a 4GuysFromRolla.com alapítója, 1998 óta dolgozik a Microsoft webtechnológiáival. Scott független tanácsadóként, edzőként és íróként dolgozik. Legújabb könyve Sams tanuld meg az ASP.NET 2.0-t 24 óra alatt. Itt érhető el mitchell@4GuysFromRolla.com.

Előzőkövetkező