Érvényesítési vezérlők hozzáadása a DataList szerkesztőfelületéhez (C#)

által Scott Mitchell

PDF letöltése

Ebben a bemutatóban megvizsgáljuk, milyen egyszerűen adhatunk hozzá érvényesítési vezérlőket a DataList EditItemTemplate eleméhez annak érdekében, hogy a felhasználói felület biztosabb legyen.

Bevezetés

Az eddigi DataList-szerkesztési oktatóanyagokban a DataLists szerkesztőfelületei nem tartalmaztak proaktív felhasználói bevitel-ellenőrzést, annak ellenére, hogy az érvénytelen felhasználói bevitel, például a hiányzó terméknév vagy a negatív ár kivételt eredményez. Az előző oktatóanyagban azt vizsgáltuk, hogyan adhat hozzá kivételkezelési kódot a DataList eseménykezelőjéhez UpdateCommand , hogy az esetleges kivételekre vonatkozó információkat elfogja és kecsesen megjelenítse. Ideális esetben azonban a szerkesztőfelület érvényesítési vezérlőket is tartalmazna, amelyek megakadályozzák, hogy a felhasználó először ilyen érvénytelen adatokat adjon meg.

Ebben az oktatóanyagban látni fogjuk, milyen egyszerű hozzáadni érvényesítési vezérlőket a DataList-hez EditItemTemplate, annak érdekében, hogy a szerkesztési felhasználói felület megbízhatóbb legyen. Ez az oktatóanyag az előző oktatóanyagban létrehozott példát veszi alapul, és kibővíti a szerkesztőfelületet a megfelelő ellenőrzéshez.

1. lépés: A példa replikálása aBLL- és DAL-Level-kivételek kezeléséből

A BLL és DAL-Level Kivételek kezelése oktatóanyagban létrehoztunk egy oldalt, amely kétoszlopos, szerkeszthető DataListben listázta a termékek nevét és árát. Ebben az oktatóanyagban az a célunk, hogy bővítsük a DataList szerkesztési felületét, hogy érvényesítési vezérlőket is tartalmazzon. Az érvényesítési logikánk különösen a következőkre lesz érvényes:

• A termék nevének megadásának megkövetelése
• Ellenőrizze, hogy az árhoz megadott érték érvényes pénznemformátum-e
• Győződjön meg arról, hogy az árhoz megadott érték nagyobb vagy egyenlő nullánál, mivel a negatív UnitPrice érték érvénytelen

Mielőtt megvizsgálhatnánk az előző példa érvényesítésre való kibővítését, először replikálnunk kell a példát a ErrorHandling.aspxEditDeleteDataList mappában lévő lapról az oktatóanyag lapjára. UIValidation.aspx Ennek eléréséhez át kell másolnunk az ErrorHandling.aspx oldal deklaratív korrektúrát és annak forráskódját is. Először másolja át a deklaratív jelölést a következő lépések követésével:

1. Nyissa meg a ErrorHandling.aspx oldalt a Visual Studióban
2. Ugrás a lap deklaratív korrektúrára (kattintson az oldal alján található Forrás gombra)
3. Másolja a szöveget a <asp:Content> címkékbe </asp:Content> (3–32. sor), ahogy az 1. ábrán látható.

1. ábra: A szöveg másolása a <asp:Content> vezérlőn belül (ide kattintva megtekintheti a teljes méretű képet)

1. UIValidation.aspx A lap megnyitása
2. Ugrás a lap deklaratív korrektúrára
3. Illessze be a szöveget a <asp:Content> vezérlőbe.

A forráskód másolásához nyissa meg a ErrorHandling.aspx.vb lapot, és másolja csak az EditDeleteDataList_ErrorHandling szöveget. Másolja a három eseménykezelőt (Products_EditCommandProducts_CancelCommandés Products_UpdateCommand) a DisplayExceptionDetails metódussal együtt, de ne másolja ki az osztálydeklarációt vagy using -utasításokat. Illessze be a másolt szöveget azEditDeleteDataList_UIValidation osztályon belül UIValidation.aspx.vb.

Miután áthelyezte a tartalom és a kódot ErrorHandling.aspx-ról UIValidation.aspx-re, szánjon egy kis időt, hogy kipróbálja az oldalakat egy böngészőben. Ugyanazt a kimenetet kell látnia, és mindkét oldalon ugyanazt a funkciót kell látnia (lásd a 2. ábrát).

2. ábra: Az UIValidation.aspx oldal utánozza a funkciót ErrorHandling.aspx (kattintson ide a teljes méretű kép megtekintéséhez)

2. lépés: Az érvényesítési vezérlők hozzáadása a DataList s EditItemTemplate-hoz

Adatbeviteli űrlapok létrehozásakor fontos, hogy a felhasználók minden szükséges mezőt beírjanak, és hogy minden megadott bemenetük jogi, megfelelően formázott érték legyen. A felhasználói bemenetek érvényességének biztosítása érdekében ASP.NET öt beépített érvényesítési vezérlőt biztosít, amelyek egyetlen bemeneti webes vezérlő értékének ellenőrzésére szolgálnak:

• A RequiredFieldValidator biztosítja, hogy egy érték meg lett adva
• A CompareValidator érvényesít egy értéket egy másik webvezérlő értékével vagy állandó értékével, vagy biztosítja, hogy az érték formátuma jogi legyen egy adott adattípus esetében
• A RangeValidator biztosítja, hogy egy érték egy értéktartományon belül legyen
• A RegularExpressionValidator egy értéket érvényesít egy reguláris kifejezéssel
• A CustomValidator egy egyéni, felhasználó által definiált metódussal érvényesít egy értéket

Az öt vezérlőről további információt az Érvényesítési vezérlők hozzáadása a szerkesztési és beszúrási felületekhez című oktatóanyagban talál, vagy tekintse meg az ASP.NET GyorsútmutatókÉrvényesítési vezérlők szakaszát.

Az oktatóanyaghoz egy RequiredFieldValidatort kell használnunk, hogy meggyőződhessünk arról, hogy a termék nevének értéke meg van adva, és egy CompareValidator használatával biztosítjuk, hogy a megadott ár értéke 0-nál nagyobb vagy egyenlő legyen, és érvényes pénznemformátumban jelenjen meg.

Megjegyzés:

Bár az 1.x ASP.NET ugyanazzal az öt érvényesítési vezérlővel rendelkezik, ASP.NET 2.0 számos fejlesztéssel bővült, a fő kettő az Internet Explorer mellett a böngészők ügyféloldali szkripttámogatása, valamint a lap érvényesítési vezérlőinek érvényesítési csoportokba való particionálása. A 2.0-s verzió új érvényesítési vezérlőinek funkcióiról további információt a "Dissecting the Validation Controls in ASP.NET 2.0" című részben talál.

Kezdjük azzal, hogy hozzáadjuk a szükséges érvényesítési vezérlőket a DataList s-hez EditItemTemplate. Ez a feladat a Tervezőn keresztül hajtható végre, ha a DataList intelligens címkéjén a Sablonok szerkesztése hivatkozásra vagy a deklaratív szintaxisra kattint. Lássunk végig a folyamaton a Sablonok szerkesztése lehetőséggel a Tervező nézetben. Miután kiválasztotta a DataList-ek szerkesztését EditItemTemplate, adjon hozzá egy RequiredFieldValidatort úgy, hogy az eszközkészletből a sablonszerkesztő felületre húzza, és a ProductName Szövegdoboz után helyezi el.

3. ábra: Egy RequiredFieldValidator hozzáadása a EditItemTemplate AfterProductName szövegdobozhoz (kattintson ide a teljes méretű kép megtekintéséhez)

Az összes érvényesítési vezérlő egyetlen ASP.NET webes vezérlő bemenetének ellenőrzésével működik. Ezért azt kell jeleznünk, hogy az imént hozzáadott RequiredFieldValidatornak érvényesítenie kell a ProductName TextBoxot. Ez úgy történik, hogy az érvényesítési vezérlő tulajdonságátControlToValidate a ID megfelelő webes vezérlőre állítja (ProductNameebben az esetben). Ezután állítsa a ErrorMessage tulajdonságot a Következő értékre: Meg kell adnia a termék nevét, a Text tulajdonságot pedig *értékre. Ha Text meg van adva a tulajdonság értéke, az érvényesítési vezérlő által megjelenített szöveg, ha az érvényesítés sikertelen. A ErrorMessage szükséges tulajdonságértéket a ValidationSummary vezérlő használja; ha a Text tulajdonság értéke hiányzik, a ErrorMessage tulajdonságértéket érvénytelen bemeneten jeleníti meg az érvényesítési vezérlő.

A RequiredFieldValidator három tulajdonságának beállítása után a képernyőnek a 4. ábrához hasonlóan kell kinéznie.

4. ábra: Állítsa be a RequiredFieldValidator ControlToValidate, ErrorMessage és Text tulajdonságait (Kattintással megtekintheti a teljes méretű képet)

Azután, hogy hozzáadtuk a RequiredFieldValidatort a EditItemTemplate elemhez, már csak a termék árának beviteli mezőjéhez szükséges validációt kell hozzáadni. Mivel ez UnitPrice nem kötelező egy rekord szerkesztésekor, nem kell hozzáfűznünk egy RequiredFieldValidatort. Azonban hozzá kell adnunk egy CompareValidatort annak érdekében, hogy a UnitPricemegadott pénznem megfelelően legyen formázva, és 0-nál nagyobb vagy egyenlő legyen.

Adja hozzá a CompareValidatort a EditItemTemplate elemhez, és állítsa be ControlToValidate tulajdonságát UnitPrice értékre, ErrorMessage tulajdonságát pedig úgy, hogy A 'Price' értéke legyen nagyobb vagy egyenlő nullával, és ne tartalmazzon pénznemszimbólumot, valamint Text tulajdonságát *értékre. Annak jelzéséhez, hogy az UnitPrice értéknek 0-nál nagyobbnak vagy egyenlőnek kell lennie, állítsa a CompareValidator s Operator tulajdonságátGreaterThanEqual0 értékre, a tulajdonságátValueToCompareType pedig 0 értékreCurrency.

A két érvényesítési vezérlő hozzáadása után a DataList s EditItemTemplate deklaratív szintaxisának az alábbihoz hasonlóan kell kinéznie:

<EditItemTemplate>
    Product name:
        <asp:TextBox ID="ProductName" runat="server"
            Text='<%# Eval("ProductName") %>'></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
            ControlToValidate="ProductName"
            ErrorMessage="You must provide the product's name"
            runat="server">*</asp:RequiredFieldValidator>
    <br />
    Price:
        <asp:TextBox ID="UnitPrice" runat="server"
            Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:TextBox>
        <asp:CompareValidator ID="CompareValidator1"
            ControlToValidate="UnitPrice"
            ErrorMessage="The price must be greater than or equal to zero
                          and cannot include the currency symbol"
            Operator="GreaterThanEqual" Type="Currency" ValueToCompare="0"
            runat="server">*</asp:CompareValidator><br />
    <br />
    <asp:Button ID="UpdateProduct" runat="server" CommandName="Update"
        Text="Update" /> 
    <asp:Button ID="CancelUpdate" runat="server" CommandName="Cancel"
        Text="Cancel" />
</EditItemTemplate>

A módosítások elvégzése után nyissa meg a lapot egy böngészőben. Ha egy termék szerkesztésekor megkísérli kihagyni a nevet, vagy érvénytelen árértéket ad meg, a szövegmező mellett csillag jelenik meg. Az 5. ábrán látható, hogy a pénznemszimbólumot (például 19,95 USD) tartalmazó árérték érvénytelennek minősül. A CompareValidator s CurrencyType lehetővé teszi a számjegyelválasztókat (például vesszőket vagy időszakokat a kulturális beállításoktól függően) és a kezdő plusz vagy mínuszjelet, de nem engedélyezi a pénznemszimbólumot. Ez a viselkedés zavarba hozhatja a felhasználókat, mivel a szerkesztőfelület jelenleg a UnitPrice pénznemformátumot jeleníti meg.

5. ábra: Csillag jelenik meg a szövegdobozok mellett érvénytelen bemenettel (ide kattintva megtekintheti a teljes méretű képet)

Bár az ellenőrzés as-isműködik, a felhasználónak manuálisan kell eltávolítania a pénznemszimbólumot egy rekord szerkesztésekor, ami nem elfogadható. Továbbá, ha a szerkesztőfelületen érvénytelen bemenetek találhatók, akkor sem a Frissítés, sem a Mégse gomb nem fog visszahívást kezdeményezni, ha rákattint. Ideális esetben a Mégse gomb visszaadja a DataList előszerkesztési állapotát a felhasználói bemenetek érvényességétől függetlenül. Azt is meg kell győződnünk arról, hogy az oldal adatai érvényesek, mielőtt frissítené a termékinformációkat a DataList eseménykezelőjében UpdateCommand , mivel az érvényesítési vezérlők ügyféloldali logikáját megkerülhetik azok a felhasználók, akiknek a böngészői nem támogatják a JavaScriptet, vagy letiltották a támogatását.

A pénznemszimbólum eltávolítása az EditItemTemplate UnitPrice szövegmezőből

A CompareValidator s Currency``Typehasználatakor az érvényesítendő bemenet nem tartalmazhat pénznemszimbólumokat. Az ilyen szimbólumok jelenléte miatt a CompareValidator érvénytelenként jelöli meg a bemenetet. A szerkesztőfelületen azonban jelenleg egy pénznemszimbólum található a UnitPrice Szövegmezőben, ami azt jelenti, hogy a felhasználónak a módosítások mentése előtt explicit módon el kell távolítania a pénznemszimbólumot. Ennek orvoslásához három lehetőségünk van:

1. Konfigurálja úgy EditItemTemplate , hogy a UnitPrice TextBox-érték ne legyen pénznemként formázva.
2. A CompareValidator eltávolításával és egy RegularExpressionValidatorra való lecserélésével lehetővé teszi a felhasználó számára, hogy pénznemszimbólumot adjon meg, amely egy megfelelően formázott pénznemértéket keres. Itt az a kihívás, hogy a pénznemérték ellenőrzésére használt reguláris kifejezés nem olyan egyszerű, mint a CompareValidator, és kódírást igényelne, ha kulturális beállításokat szeretnénk beépíteni.
3. Távolítsa el teljesen az érvényesítési vezérlőt, és támaszkodhat az egyéni kiszolgálóoldali érvényesítési logikára a GridView eseménykezelőjében RowUpdating .

Kezdjük az oktatóanyag 1. lehetőségével. UnitPrice jelenleg pénznemértékként van formázva a TextBox EditItemTemplate adatkötési kifejezése miatt: <%# Eval("UnitPrice", "{0:c}") %>. Módosítsa az Eval utasítást úgy, hogy Eval("UnitPrice", "{0:n2}")az eredményt számként formázzon két számjegy pontossággal. Ez történhet közvetlenül a deklaratív szintaxissal, vagy a DataList s UnitPriceszövegmezőjének EditItemTemplate DataBindings szerkesztése hivatkozására kattintva.

Ezzel a módosítással a szerkesztőfelület formázott árat tartalmaz, amely a vesszőket használja csoportelválasztóként és a pontot tizedeselválasztóként, de a pénznemszimbólumot elhagyja.

Megjegyzés:

Amikor eltávolítja a pénznemformátumot a szerkeszthető felületről, hasznosnak találom a pénznemszimbólum szövegként való elhelyezését a Szövegdobozon kívül. Ez arra utal, hogy a felhasználónak nem kell megadnia a pénznemszimbólumot.

A Mégse gomb javítása

Alapértelmezés szerint az érvényesítési webvezérlők JavaScriptet bocsátanak ki az ügyféloldali ellenőrzés végrehajtásához. Ha egy gombra, LinkButtonra vagy ImageButtonra kattint, a rendszer a visszavétel előtt az ügyféloldalon ellenőrzi a lap érvényesítési vezérlőit. Érvénytelen adatok esetén megszakad a visszaküldés. Bizonyos gombok esetében azonban előfordulhat, hogy az adatok érvényessége lényegtelen; ilyen esetben a postback érvénytelen adatok miatti lemondása zavaró lehet.

Ilyen példa a Mégse gomb. Tegyük fel, hogy egy felhasználó érvénytelen adatokat ad meg, például kihagyja a termék nevét, majd úgy dönt, hogy végül nem szeretné menteni a terméket, és a Mégse gombra kattint. A Mégse gomb jelenleg aktiválja a lapon az érvényesítési vezérlőket, amelyek jelzik, hogy a terméknév hiányzik, és ezzel megakadályozzák a visszaküldést. A felhasználónak be kell gépelnie néhány szöveget a ProductName Szövegdobozba, hogy megszakítsa a szerkesztési folyamatot.

Szerencsére a Gomb, a LinkButton és az ImageButton CausesValidation tulajdonság jelzi, hogy a gombra kattintva kezdeményezni kell-e az érvényesítési logikát (alapértelmezés szerint True). Állítsa be a Mégse gomb tulajdonságát CausesValidation a következőre False: .

A bemenetek érvényességének biztosítása az UpdateCommand eseménykezelőben

Az érvényesítési vezérlők által kibocsátott ügyféloldali szkript miatt, ha a felhasználó hibás adatokat ad meg, az érvényesítési vezérlők megszakítják azoknak a Gomb, LinkButton vagy ImageButton vezérlőknek az utófeldolgozását, amelyeknek CausesValidation tulajdonságai True (alapértelmezés szerint). Ha azonban egy felhasználó elavult böngészővel vagy olyan böngészővel látogat, amelynek JavaScript-támogatása le van tiltva, az ügyféloldali érvényesítési ellenőrzések nem lesznek végrehajtva.

Az összes ASP.NET érvényesítési vezérlő azonnal megismétli az érvényesítési logikát a visszavétel után, és a tulajdonságon keresztülPage.IsValid jelenti az oldal bemeneteinek általános érvényességét. Az oldal folyamata azonban az érték Page.IsValid alapján semmilyen módon nem szakad meg vagy nem áll le. Fejlesztőkként a mi felelősségünk annak biztosítása, hogy a Page.IsValid tulajdonság értékével True rendelkezzen, mielőtt érvényes bemeneti adatokat feltételező kóddal folytatunk.

Ha egy felhasználó letiltotta a JavaScriptet, felkeresi az oldalunkat, szerkeszt egy terméket, túl költséges árértéket ad meg, és a Frissítés gombra kattint, az ügyféloldali érvényesítés megkerülve lesz, és a rendszer utóvisszajelzést küld. Visszahíváskor az ASP.NET lap UpdateCommand eseménykezelője végrehajtja a műveletet, és kivétel keletkezik, amikor megkísérli a túl költséges kifejezés értelmezését egy Decimal elemmé. Mivel rendelkezünk kivételkezeléssel, az ilyen kivételeket a rendszer megfelelően kezeli, de eleve megakadályozhatjuk, hogy az érvénytelen adatok átcsússzanak, ha csak akkor folytatjuk az UpdateCommand eseménykezelőt, ha Page.IsValid értéke True.

Adja hozzá a következő kódot az UpdateCommand eseménykezelő elejéhez közvetlenül a Try blokk előtt:

if (!Page.IsValid)
    return;

Ezzel a kiegészítéssel a termék csak akkor próbál frissülni, ha a beküldött adatok érvényesek. A felhasználók többsége nem tudja visszaküldeni az érvénytelen adatokat az ellenőrzési vezérlők ügyféloldali szkriptjei miatt, de azok a felhasználók, akiknek a böngészői nem támogatják a JavaScriptet, vagy letiltották a JavaScript-támogatást, megkerülhetik az ügyféloldali ellenőrzéseket, és érvénytelen adatokat küldhetnek el.

Megjegyzés:

Az éles eszű olvasó emlékezni fog arra, hogy amikor az adatokat a GridView-val frissítettük, nem kellett kifejezetten ellenőriznünk a Page.IsValid tulajdonságot az oldal kód mögötti osztályában. Ennek az az oka, hogy a GridView betekint a Page.IsValid tulajdonságba, és csak akkor folytatja a frissítést, ha egy értéket Truead vissza.

3. lépés: Adatbeviteli problémák összegzése

Az öt érvényesítési vezérlő mellett ASP.NET a ValidationSummary vezérlőt is tartalmazza, amely megjeleníti az ErrorMessage érvénytelen adatokat észlelő érvényesítési vezérlők s-jét. Ezek az összefoglaló adatok megjeleníthetők szövegként a weblapon vagy egy modális, ügyféloldali üzenetmezőn keresztül. Bővítsük ezt az oktatóanyagot úgy, hogy tartalmazzon egy ügyféloldali üzenetdobozt, amely összegzi az ellenőrzési problémákat.

Ehhez húzzon egy ValidationSummary vezérlőt az eszközkészletből a Tervezőbe. Az ValidationSummary vezérlő helye nem igazán számít, mivel úgy fogjuk konfigurálni, hogy csak üzenetként jelenítse meg az összegzést. A vezérlő hozzáadása után állítsa a tulajdonságátShowSummary a következőreFalse, és a tulajdonságátShowMessageBox a következőreTrue: . Ezzel a kiegészítéssel az ellenőrzési hibák egy ügyféloldali üzenetmezőben vannak összefoglalva (lásd a 6. ábrát).

6. ábra: Az érvényesítési hibák egy Client-Side üzenetmezőben vannak összegezve (ide kattintva megtekintheti a teljes méretű képet)

Összefoglalás

Ebben az oktatóanyagban azt láttuk, hogyan csökkenthető a kivételek valószínűsége azáltal, hogy érvényesítési vezérlőkkel proaktív módon biztosítjuk, hogy a felhasználóink bemenetei érvényesek legyenek, mielőtt megpróbálnánk használni őket a frissítési munkafolyamatban. ASP.NET öt érvényesítési webvezérlőt biztosít, amelyek egy adott webvezérlő bemenetének vizsgálatára és a bemeneti adatok érvényességének ellenőrzésére szolgálnak. Ebben az oktatóanyagban a RequiredFieldValidator és a CompareValidator öt vezérlő közül kettőt használtunk annak biztosítására, hogy a termék neve meg legyen adva, és hogy az ár pénznemformátuma nullánál nagyobb vagy egyenlő legyen.

Az érvényesítési vezérlők hozzáadása a DataList szerkesztőfelületéhez olyan egyszerű, mintha az eszközkészletből húzza őket, EditItemTemplate és beállít néhány tulajdonságot. Alapértelmezés szerint az érvényesítési vezérlők automatikusan kibocsátják az ügyféloldali érvényesítési szkriptet; emellett kiszolgálóoldali ellenőrzést is biztosítanak a visszavételkor, a tulajdonságban lévő összesített eredmény tárolásával Page.IsValid . Ha meg szeretné kerülni az ügyféloldali érvényesítést, amikor egy gombra, LinkButtonra vagy ImageButtonra kattint, állítsa a gomb s tulajdonságát CausesValidation a következőre False: . Mielőtt bármilyen feladatot hajtanának végre a visszaküldött adatokkal kapcsolatban, győződjön meg arról, hogy a Page.IsValid tulajdonság True értéket ad vissza.

Az eddig megvizsgált DataList-szerkesztési oktatóanyagok mindegyike nagyon egyszerű szerkesztőfelületekkel rendelkezik, egy TextBox a termék nevéhez és egy másik az árhoz. A szerkesztőfelület azonban különböző webes vezérlőket, például DropDownLists, Calendars, RadioButtons, CheckBoxes stb. tartalmazhat. A következő oktatóanyagban egy olyan felületet fogunk létrehozni, amely különböző webes vezérlőket használ.

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 ASP.NET 2.0 24 óra alatt. Ő itt elérhető mitchell@4GuysFromRolla.com.

Külön köszönet

Ezt az oktatóanyag-sorozatot sok hasznos véleményező áttekintette. Az oktatóanyag vezető véleményezői Dennis Patterson, Ken Pespisa és Liz Shulok voltak. Szeretné áttekinteni a közelgő MSDN-cikkeimet? Ha igen, írj egy sort a mitchell@4GuysFromRolla.com-ra.

ElőzőKövetkező