Adatok ellenőrzése
-
Upload
jelani-moore -
Category
Documents
-
view
40 -
download
5
description
Transcript of Adatok ellenőrzése
![Page 1: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/1.jpg)
Webalkalkalmazás fejlesztése ASP.NET-ben
Krizsán Zoltán
Adatok ellenőrzése
![Page 2: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/2.jpg)
• Vezérlők tartalmának ellenőrzése• Érték ellenőrzés• Automatikus hibaüzenet kiírás, adatok
újrakérése• RequiredFieldValidator – kitöltött e?• <asp:RequiredFieldValidator
ControlToValidate="Name" Display="Dynamic" errormessage="You must enter your name!" runat=server/>
Form ellenőrzés
![Page 3: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/3.jpg)
Két fajtája van, a programozó munkája ugyanaz Kliens oldali(uplevel client support): DHTML,
java szkriptSzerver oldali(downlevel client support):
ilyenkor visszaküldi az oldalt hibaüzenet a vezérlő mellett.
a feldolgozás alatt: Page.IsValid – akkor érvényes az oldal, ha minden vezérlő az! ha még nem volt ellenőrzés, akkor kivétel
keletkezik!
Ellenőrzés
![Page 4: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/4.jpg)
1. Helyezzünk fel egy beviteli mezőt!2. Helyezzük fel az ellenőrző vezérlőt!3. Állítsuk be a ControlToValidate tulajdonságát
az ellenőrzőnek a beviteli vezérlőre!4. Állítsuk be a ErrorMessage tulajdonságát az
ellenőrzőnek a hiba jelzés szövegére!5. Text tulajdonságot állítsuk be! Ez mindig
megjelenik. pl. : *6. Helyezzünk egy ValidationSummary vezérlőt
a formra!
Ellenőrzők működése
![Page 5: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/5.jpg)
Egy vezérlőhöz több ellenőrző is lehet.Minden vezérlőnek van egy kiemelt tulajdonsága
ValidationProperty attribútummal jelölt pl:[ValidationProperty("Text")]
Ellenőrzők ennek értékét figyelik.A web vezérlőknek van CausesValidation
tulajdonságaha false nincs adatellenőrzésha true (alapértelmezett a submit-olóknál): minden
ellenőrző lefutSzerver és kliens oldalon is lehetséges.
Ellenőrzés szabályai
![Page 6: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/6.jpg)
Ha az ellenőrző hibát észlelt, akkor a hiba üzenet megjelenik az ellenőrző
pozíciójában,az oldal hibás állapotba kerül,ha van, akkor az összegzőbe felkerül a hiba
szövegeEllenőrzés az inicializálás (view state,
postback) után, de az eseményeink kezelése előtt fut le.
Ellenőrzés hamarabb is kikényszeríthető a Validate metódussal, de ekkor 2x fut le.
Ellenőrzés szabályai II
![Page 7: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/7.jpg)
Melyik vezérlőnél mit ellenőrzünk?
SelectedItem.ValueRadioButtonList
SelectedItem.ValueDropDownList
SelectedItem.ValueListBox
TextTextBox
ValueHtmlInputFile
ValueHtmlSelect
ValueHtmlTextArea
ValueHtmlInputText
Ellenőrzött tulajdonságVezérlő
![Page 8: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/8.jpg)
EllenőrzőkFormája:<asp:CompareValidator id="comp1" ControlToValidate="txtComp" ControlToCompare = "txtCompTo" Type="String" runat="server"/>
•RequiredFieldValidator: a felhasználónak ki kell töltenie a vezérlőt• CompareValidator: egy konstans,vagy msáik vezérlő viszonya (<,=,>, …)• RangeValidator: konstans értékek közé esike? (szám betű, dátum)• RegularExpressionValidator: reguláris kifejezésre illik e?• CustomValidator: saját kód ellenőrzi• ValidationSummary: megjeleníti az oldalon használt ellenőrzők eredményeit
![Page 9: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/9.jpg)
ControlToValidate: referencia az ellenőrzött vezérlőre.Display: static vagy dynamic hogyan jelenjen meg a
hibaszövegEnableClientScript (true a default)ErrorMessage: hibaszöveg ami a ValidationSummary-
ban jelenik meg ha kell.Text: ezen vezérlő helyén jelenik meg ha kell.IsValidSetFocusOnError: ráállítja a fókuszt a megjelölt
vezérlőre.Validate(): Ez hívódik automatikusan, de hívható
közvetlenül is.
Minden ellenőrző őseBaseValidator
![Page 10: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/10.jpg)
Kliens oldalon is lehet ellenőrizni, de
Szerver oldalon kötelező
Ellenőrzés helye
![Page 11: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/11.jpg)
<asp:TextBox runat="server" ID="Name" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"ControlToValidate="Name" ErrorMessage="Name is required"Display="dynamic">*</asp:RequiredFieldValidator>
RequiredFieldValidator
![Page 12: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/12.jpg)
Data Type Description
String A string data type.
Integer A 32-bit signed integer data type.
Double A double-precision floating point number data type.
Date A date data type.
Currency A decimal data type that can contain currency symbols.
RangeValidator I
MinimumValue, MaximumValue, Type
![Page 13: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/13.jpg)
<asp:TextBox runat="server" ID="DayOff" />
<asp:RangeValidator ID="RangeValidator1" runat="server" Display="dynamic"ControlToValidate="DayOff" Type="Date"ErrorMessage="Day Off is not within the valid interval"MinimumValue="2008-08-05" MaximumValue="2008-08-20">*</asp:RangeValidator>
RangeValidator II
![Page 14: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/14.jpg)
Két vezérlő tartalmát, vagy egy fix érték és a vezérlő tartalma hasonlítja össze.
ControlToCompareValueToCompareType tulajdonság
CompareValidator
![Page 15: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/15.jpg)
Operation JelentésEqual =
NotEqual !=
GreaterThan >
GreaterThanEqual
>=
LessThan <
LessThanEqual <=
DataTypeCheckOlyan típusú e
CompareValidator operátor tulajdonság
![Page 16: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/16.jpg)
<asp:TextBox runat="server" ID="Age" />
<asp:CompareValidator ID="CompareValidator1" runat="server" Display="dynamic"ControlToValidate="Age" ValueToCompare="18"ErrorMessage="You must be at least 18 years old"Type="Integer" Operator="GreaterThanEqual">*</asp:CompareValidator>
CompareValidator III
![Page 17: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/17.jpg)
<asp:TextBox runat="server" TextMode="Password" ID="Password" /><asp:TextBox runat="server" TextMode="Password" ID="Password2" />
<asp:CompareValidator ID="CompareValidator2" runat="server"ControlToValidate="Password2" ControlToCompare="Password"ErrorMessage="The passwords don't match"Type="String" Display="dynamic"><img src="imgError.gif" alt="The passwords don't match" /></asp:CompareValidator>
CompareValidator IV
![Page 18: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/18.jpg)
<asp:TextBox runat="server" ID="Email" />
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"ControlToValidate="Email" ValidationExpression=".*@.{2,}\..{2,}"ErrorMessage="E-mail is not in a valid format" Display="dynamic">*</asp:RegularExpressionValidator>
RegularExpressionValidator
![Page 19: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/19.jpg)
Ha a beépített ellenőrzők már nem elegendőek.
Lehet kliens vagy szerver oldali vezérlés.Ellenőrzés hasonló. Metódus 2 paraméterrel:ServerValidate(object source, ServerValidateEventArgs args)
Value-ban kapjuk a vizsgált értéketIsValid-ot állítsuk be (true vagy false)
Kliens oldal esetén ClientValidationFunction tulajddonság
CustomValidator
![Page 20: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/20.jpg)
<asp:TextBox runat="server" ID="EmpID" />
<asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="EmpID"ClientValidationFunction="EmpIDClientValidate" OnServerValidate="EmpIDServerValidate"ErrorMessage="ID must be a multiple of 5" Display="dynamic">*</asp:CustomValidator>
CustomValidator
![Page 21: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/21.jpg)
<script type="text/javascript">function EmpIDClientValidate(ctl, args){// the value is a multiple of 5 if the modulus by 5 is 0args.IsValid=(args.Value%5 == 0);}</script>
CustomValidator kliens oldal
![Page 22: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/22.jpg)
ServerValidate eseményprotected void EmpIDServerValidate(object sender, ServerValidateEventArgs args){
try{
args.IsValid = (int.Parse(args.Value) % 5 == 0);}catch{
args.IsValid = false;}
}
CustomValidator szerver oldal
![Page 23: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/23.jpg)
Nem végez ellenőrzést.Megjeleníti az összes vezérlő ErrorMessage
tulajdonságát.Ha ShowMessageBox igaz, akkor megjelenik
a kliens oldalon. Ha nem, akkor az oldalon az adott helyen.
DisplayMode tulajdonság a megjelenés módját szabályozza:
HeaderText: Bevezető szöveget definiál.
ValidationSummary
![Page 24: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/24.jpg)
if (this.IsPostBack) { this.Validate(); if (!this.IsValid) {
(IValidator aValidator in this.Validators) {
if (!aValidator.IsValid) { msg += "<br />" +aValidator.ErrorMessage;
} }
}
Ellenőrzés kikényszerítése
![Page 25: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/25.jpg)
<asp:RangeValidator id="rangeValInteger" Type="Integer" ControlToValidate="txtComp1" MaximumValue="10" MinimumValue="1" runat="server"/>
<asp:ValidationSummary ID="valSum" runat="server" HeaderText="You must enter a value in the following fields:" Font-Name="verdana" Font-Size="12" />
<asp:RegularExpressionValidator id="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox1" ValidationExpression="^\d{5}$" Display="Static" Font-Name="verdana" Font-Size="10pt"> Zip code must be 5 numeric digits </asp:RegularExpressionValidator>
Ellenőrzés példák
![Page 26: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/26.jpg)
Msdn.microsoft.comWeb development
ASP.NET 4 and Visual Studio 2010ASP.NET Walkthroughs by Scenario
Walkthrough: Validating User Input in a Web Forms Page
http://msdn.microsoft.com/en-us/library/a0z2h4sw(v=vs.100).aspx
Gyakorlat
![Page 27: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/27.jpg)
Alapértelmezetten bekapcsolt.EnableClientScript tulajdonságHa engedélyezve van, akkor generálódik a
megfelelő kód, nem kell tenni semmit.aspnet_client mappában vannak a szkriptek.Submit előtt futnak le, tehát kell submit-oló
vezérlő.
Kliens oldali ellenőrzés
![Page 28: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/28.jpg)
Page_IsValid figyelése, ami itt globális változó.
Page_Validators ellenőrzők listája.Page_ValidationActive igaz, ha
engedélyezett a kliens oldali ellenőrzés.<script language="javascript" src="/aspnet_client/system_web/1_0_3617_0/WebUIValidation.js"> </script>
Kliens oldali ellenőrzés
![Page 29: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/29.jpg)
ValidationGroup tulajdonság (string)A post-oló, a vizgált bemeneti és az ellenörző
vezérlőt tegyük egy csoportba!Ha egy vezérlő post-ol, akkor csak az abban a
csoportban levő ellenőrzők futnak le.Érdemes több ellenőrző csoportot létrehozni
a form-on, rakjuk panelekre.Kliens, és szerver oldalon is működik.
Ellenőrző csoportok
![Page 30: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/30.jpg)
Hozzuk létre a következő egy szerű alkalmazást!
Feladat – ellenőrző csoportok
![Page 31: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/31.jpg)
Az ellenőrzők a mellettük lévő beviteli mezőt ellenőrizzék!
Az alsó label-be írjuk be az oldal betöltésének idejét!(Label1.Text = DateTime.Now.ToString();)
Ne felejtsük el kitölteni az ErrorMessage-et!Első esetben ne állítsunk be ellenőrző
csoportokat (üresen hagyni)!A gombok eseménykezelőjében a label1-be
írjuk be, hogy melyik gomb eseménye futott le, ha érvényes az oldal (Page.IsValid)
Feladat – ellenőrző csoportok
![Page 32: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/32.jpg)
Példa 1Töltsük ki az első mezőt!Nyomjuk meg az első gombot!
Példa 2Töltsük ki az első mezőt!Nyomjuk meg a második gombot!
Probák
![Page 33: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/33.jpg)
Kapcsoljuk ki a kliens oldali ellenőrzés!futtassuk le a teszteket
Állítsunk be ellenőrző osztályokat! (Azonos soroknak azonos legyen.)futtassuk le a teszteket
Kapcsoljuk be a kliens oldali ellenőrzés!futtassuk le a teszteket
Közben vizsgáljuk meg a HTML válaszokat a böngészőben!
Beállítások - futások
![Page 34: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/34.jpg)
1. Page and its controls are created, based on ASPX file.
2. Page_Load event fires.3. Page and control properties are saved to a
hidden field.4. Page and controls are turned into HTML.5. Everything is thrown away.
Első oldal kiszolgálás
![Page 35: Adatok ellenőrzése](https://reader035.fdocument.pub/reader035/viewer/2022062321/568132f2550346895d99ac51/html5/thumbnails/35.jpg)
1. Page and its controls are created based on ASPX file.
2. Page and control properties are recovered from hidden field.
3. Page controls are updated based on user input.4. Page_Load event fires.5. Change notification events fire.6. Page and control properties are saved to a
hidden field.7. Page and controls are turned into HTML.8. Everything is thrown away again.
Postback kiszolgálás