Përditësimi i fundit: 31.10.2015
Edhe pse ne mund të shkruajmë vetë çdo ndihmës të kërkuar, korniza MVC tashmë ofron një grup të madh ndihmësish të integruar html që na lejojnë të gjenerojmë këtë ose atë shënim, kryesisht për të punuar me forma. Prandaj, në shumicën e rasteve, nuk do t'ju duhet të krijoni ndihmësit tuaj, dhe mund të përdorni ato të integruara.
Ndihmës Html.BeginForm
Për të krijuar forma, ne mund të përdorim standarde elementet html, Për shembull:
Ky është një formë e thjeshtë html që dërgon të gjitha të dhënat e futura kur klikohet butoni. Kërkesa POST në /Shtëpi/Bli. Ndihmësi i integruar BeginForm/EndForm ju lejon të krijoni të njëjtën formë:
Shkruaj emrin tend |
|
Fut adresën: |
|
Metoda BeginForm merr si parametra emrin e metodës së veprimit dhe emrin e kontrolluesit, si dhe llojin e kërkesës. Ky ndihmës krijon si etiketë fillimi
. Prandaj, kur japim pamjen në rrjedhën e daljes, do të marrim të njëjtin kod html si me etiketën e formës. Prandaj, të dyja metodat janë identike.Këtu ka një pikë. Nëse kemi dy versione të së njëjtës metodë të përcaktuar në kontrollues - për Metodat POST dhe GET, për shembull:
Veprimi Publik Rezultati Blej() (ktheje Shiko(); ) varg publik Blej(Blerje) ( .............. kthe "Faleminderit për blerjen e librit";; )
Kjo do të thotë, në fakt, thirrja e faqes me formularin dhe dërgimi i formularit kryhet nga i njëjti veprim Blerje. Në këtë rast, është e mundur të mos specifikohen parametrat në ndihmësin Html.BeginForm:
@using(Html.BeginForm()) ( ............. )
Hyrja e informacionit
Shembulli i mëparshëm përdori elemente standarde html së bashku me ndihmësin Html.BeginForm. Megjithatë, grupi ndihmës html përmban gjithashtu ndihmës për hyrjen e përdoruesit. MVC përcakton një gamë të gjerë të ndihmësve të hyrjes për pothuajse çdo element html. Çfarë të zgjidhni - elementë të hyrjes ndihmëse ose standarde html, vendos vetë zhvilluesi.
Pavarësisht nga lloji, të gjithë ndihmësit bazë html përdorin të paktën dy parametra: parametri i parë përdoret për të vendosur vlerat për atributet id dhe emri, dhe parametri i dytë përdoret për të vendosur vlerën e atributit të vlerës.
Html.TextBox
Ndihmësi Html.TextBox gjeneron etiketa hyrëse me kuptim tip atribut e barabartë me tekstin. Ndihmësi TextBox përdoret për të marrë të dhëna të përdoruesit. Pra, le të rishkruajmë formën e mëparshme me fushat e hyrjes të zëvendësuara me ndihmësin Html.TextBox:
@using(Html.BeginForm("Ble", "Home", FormMethod.Post)) (
Shkruaj emrin tend:
@Html.TextBox ("Person", "Fut emrin")Fut adresën:
@Html.TextBox ("Adresa", "Fut një adresë") }Do të marrim të njëjtin rezultat:
Html.Text Area
Ndihmësi TextArea përdoret për të krijuar një element
Ju lutemi vini re se ndihmësi deshifron vlerën e vendosur në të, duke përfshirë etiketat html (të gjithë ndihmësit deshifrojnë vlerat e modelit dhe vlerat e atributeve). Versione të tjera të ndihmës TextArea ju lejojnë të specifikoni numrin e rreshtave dhe kolonave që përcaktojnë madhësinë e fushës së tekstit.
@Html.TextArea("tekst", "përshëndetje
botë", 5, 50, null)
Ky ndihmës do të gjenerojë shënimin e mëposhtëm:
HTML.Fshehur
Në shembullin e formës, ne përdorëm një hyrje të fshehur në fushë type="hidden" , në vend të së cilës mund të kishim përdorur vetëm ndihmësin Html.Hidden. Pra, thirrja e mëposhtme e ndihmës:
@Html.Hidden ("BookId", "2")
gjeneroni shënjimin:
Dhe kur kalojmë një ndryshore nga ViewBag, duhet ta hedhim atë në llojin e vargut: @Html.Hidden("BookId", @ViewBag.BookId si varg)
HTML.Fjalëkalimi
Html.Password krijon një fushë për futjen e një fjalëkalimi. Është i ngjashëm me ndihmësin TextBox, por shfaq maskën e fjalëkalimit në vend të karaktereve të futura. Kodi tjetër:
@Html.Password ("Fjalëkalimi i përdoruesit", "val")
gjeneron shënjimin:
Html.RadioButton
Ndihmësi Html.RadioButton përdoret për të krijuar butona radioje. Ai gjeneron një element hyrës me vlerën tip="radio" . Për të krijuar një grup butonash radioje, duhet t'u caktoni të njëjtin emër të gjithëve (vetia e emrit):
@Html.RadioButton("ngjyrë", "e kuqe") e kuqe
@Html.RadioButton ("ngjyrë", "blu") blu
@Html.RadioButton ("ngjyrë", "jeshile", e vërtetë) jeshile
Ky kod krijon shënjimin e mëposhtëm:
e kuqe
blu
jeshile
Html.Kutia e kontrollit
Html.CheckBox mund të përdoret për të krijuar dy elementë njëherësh. Merrni, për shembull, kodin e mëposhtëm:
@Html.CheckBox ("Aktivizo", false)
Kjo shprehje do të gjenerojë HTML-në e mëposhtme:
Kjo do të thotë, përveç vetë kutisë së kontrollit, krijohet edhe një fushë e fshehur. Pse është e nevojshme? Çështja është se shfletuesi dërgon vlerën e kutisë së kontrollit vetëm kur zgjidhet ose zgjidhet kutia e kontrollit. Dhe fusha e fshehur siguron që elementi Enable të vendoset në një vlerë edhe nëse përdoruesi nuk e ka zgjedhur kutinë.
HTML.Etiketa
Ndihmësi Html.Label krijon një element , dhe parametri që i kalon ndihmësit përcakton vlerën e atributit for dhe në të njëjtën kohë tekstin në element. Versioni i mbingarkuar i ndihmësit ju lejon të përcaktoni vlerën e atributit for dhe tekstit në etiketë në mënyrë të pavarur nga njëri-tjetri. Për shembull, deklarata ndihmëse Html.Label("Emri") prodhon shënimin e mëposhtëm:
Elementi i etiketës përfaqëson një etiketë të thjeshtë për bashkëngjitjen e informacionit me elementët hyrës, siç janë fushat e tekstit. Atributi for i elementit label duhet të përmbajë ID-në e elementit hyrës të lidhur. Kur përdoruesi klikon në një etiketë, shfletuesi transferon automatikisht fokusin në elementin hyrës të lidhur me atë etiketë.
Html.DropDownList
Ndihmësi Html.DropDownList krijon një listë rënëse, pra një element . Për të gjeneruar një listë të tillë, ju nevojitet një koleksion i objekteve SelectListItem që përfaqësojnë artikujt e listës. Objekti SelectListItem ka vetitë Tekst (teksti për t'u shfaqur), Vlera (vetë vlera, e cila mund të mos jetë e njëjtë me tekstin) dhe Selected . Mund të krijoni një koleksion objektesh SelectListItem ose të përdorni ndihmësin SelectList. Ky ndihmës shikon objektet IEnumerable dhe i konverton ato në një sekuencë të objekteve SelectListItem. Për shembull, @Html.DropDownList ("countires", i ri SelectList (varg i ri ("Rusi", "SHBA", "Kanada", "Francë")), "Vendet") gjeneron shënimin e mëposhtëm:
Tani përfundoi shembull kompleks. Le të rendisim një koleksion elementësh të Librit. Në kontrollues, ne do ta kalojmë këtë listë përmes ViewBag:
BookContext db = New BookContext(); publik ActionResult Index() ( Libra SelectList = SelectList i ri (db.Books, "Author", "Name"); ViewBag.Books = libra; ktheje View(); )
Këtu krijojmë një objekt SelectList duke kaluar në konstruktorin e tij grupin e vlerave për listën (db.Books), emrin e vetive të modelit të librit që do të përdoret si vlerë (Autor) dhe emrin e modelit të librit. prona që do të përdoret për të shfaqur në listë. AT këtë rast nuk është e nevojshme të vendosni dy veti të ndryshme, ishte e mundur të vendosni një si për vlerën ashtu edhe për shfaqjen.
Pastaj në pamje mund ta përdorim këtë SelectList si kjo:
@Html.DropDownList ("Author", ViewBag.Books si SelectList)
Dhe kur paraqitet pamja, të gjithë artikujt SelectList do të shtohen në listën rënëse
Html.ListBox
Ndihmësi Html.ListBox, si DropDownList, krijon një element , por lejon përzgjedhjen e shumëfishtë të elementeve (d.m.th., atributi i shumëfishtë vendoset në shumëfish). Për të krijuar një listë që mbështet përzgjedhjen e shumëfishtë, në vend të SelectList, mund të përdorni klasën MultiSelectList:
@Html.ListBox ("countires", MultiSelectList i ri (varg i ri ("Rusia", "SHBA", "Kina","India")))
Ky kod gjeneron shënimin e mëposhtëm:
Me transferimin e vlerave të vetme në server, gjithçka është e qartë, por si të transferoni vlera të shumta? Le të themi se kemi formën e mëposhtme:
@duke përdorur (Html.BeginForm()) ( @Html.ListBox("vendet", MultiSelectList i ri (varg i ri ( "Rusia", "SHBA", "Kina", "India")))
}Atëherë metoda e kontrolluesit mund të marrë këto vlera si kjo:
Indeksi i vargut publik (vendet e vargut) ( rezultati i vargut = ""; foreach (vargu c në vende) (rezultati += c; rezultati += ";"; ) kthen "Ju keni zgjedhur: " + rezultat; )
Forma me shumë butona
Në mënyrë tipike, ekziston vetëm një buton dërgimi në një formular. Megjithatë, në situata të caktuara mund të jetë e nevojshme të përdorni më shumë se një buton. Për shembull, ekziston një fushë për futjen e një vlere dhe dy butona tregojnë nëse kjo vlerë duhet të fshihet ose, anasjelltas, të shtohet:
@using (Html.BeginForm ("MyAction", "Home", FormMethod.Post)) (
}
Zgjidhja më e thjeshtë është të vendosni të njëjtën vlerë për çdo buton atribut emri, por të ndryshme për atributin e vlerës. Dhe metoda që merr formën mund të duket si kjo:
Veprimi Publik Rezultati MyAction(produkti i vargut, veprimi i vargut) ( if(action=="shto") ( ) other if(action=="fshij") ( ) // pjesa tjetër e kodit të metodës )
Dhe me ndihmën e një konstruksioni të kushtëzuar, në varësi të vlerës së parametrit të veprimit, i cili ruan vlerën e atributit të vlerës së butonit të shtypur, kryhen veprime të caktuara.
Me ardhjen e lidhjeve mjaft të shpejta në internet, Flash ishte mënyra e vetme për të luajtur tinguj në faqet e internetit. Por HTML5 do të ndryshojë rrënjësisht mënyrën se si luhen tingujt në internet. Në këtë artikull, unë dua t'ju tregoj në detaje se si të përdorni etiketën në faqet tuaja.
Ne përdorim
Më poshtë është shembulli më i thjeshtë i përdorimit të etiketës, ai shkarkon një skedar mp3 dhe e luan atë. Vini re atributin autopaly, i cili përdoret për të luajtur automatikisht tingullin. Sidoqoftë, nuk duhet të luani automatikisht tinguj në faqe, pasi kjo do të shqetësojë përdoruesit.Luajtja e një tingulli në një lak
Dëshironi të lidhni tingullin? Atributi loop do t'ju ndihmojë ta bëni këtë. Por përsëri, mos e teproni me luajtjen automatike dhe looping nëse nuk dëshironi që përdoruesi të largohet nga faqja para kohe.Shfaqja e kontrolleve
Në vend që të luani tingujt automatikisht, që është padyshim një praktikë e keqe, duhet të lejoni që disa kontrolle të shfaqen në shfletues, si butonat e volumit dhe luajtjes (pauzë). Kjo është e lehtë për t'u bërë thjesht duke shtuar atributin kontrollet.Formate të ndryshme skedarësh
Etiketa mbështetet nga shumica e shfletuesve modernë, por problemi është se shfletues të ndryshëm mbështesin formate të ndryshme skedari. Safari, për shembull, mund të luajë MP3, por Firefox nuk mundet, dhe në vend të kësaj luan skedarë OGG. Zgjidhja e këtij problemi është përdorimi i të dy formateve në mënyrë që çdo vizitor të mund të dëgjojë tingullin, pavarësisht se çfarë shfletuesi përdor.Specifikoni llojin MIME të skedarëve
Kur përdorni formate të ndryshme skedari, është praktikë e mirë të specifikoni një lloj MIME për çdo skedar për të ndihmuar shfletuesin të lokalizojë skedarin që mbështet. Kjo mund të bëhet lehtësisht duke përdorur atributin lloji.Për shfletuesit më të vjetër
Po sikur vizitori të përdorë IE6 ose ndonjë shfletues tjetër prehistorik që nuk e mbështet etiketën? Është e lehtë: më poshtë është kodi që do të shfaqë një mesazh për shfletuesit që nuk e mbështesin etiketën.Buferimi i skedarëve
Kur luani skedarë të mëdhenj, mund të përdoret buferimi i skedarëve. Për këtë ju mund të përdorni atributin parangarkesa. Mund të marrë 3 vlera:- asnje- nëse nuk dëshironi të përdorni buferin e skedarëve;
- auto- nëse dëshironi që shfletuesi të ruajë të gjithë skedarin;
- meta të dhënat- për të shkarkuar vetëm informacionin e shërbimit (kohëzgjatja e zërit, etj.).
Kontrolli i riprodhimit përmes JavaScript
Kontrolli i luajtësit audio HTML5 nëpërmjet JavaScript është shumë i lehtë. Shembulli i mëposhtëm tregon se si mund të ndërtoni kontrollet tuaja bazë të luajtësit audio duke përdorur JavaScript:Kaq për sot.
Shpresoj se ky artikull ju ka ndihmuar të kuptoni veçoritë themelore të etiketës HTML5. .
Kontrollet e serverit të butonave ASP.NET 2.0, LinkButton dhe ImageButton, ngjarjet e klikimeve dhe komandës
Kontrollet e butonave (Button , LinkButton dhe ImageButton ) janë gjithashtu ndër më të përdorurat. Ata kanë një grup shumë të ngjashëm të vetive dhe ngjarjeve. Dallimi kryesor midis të dyve është se si do të shfaqet butoni në faqen e internetit. Dallimet midis tyre tregohen qartë në Fig. 4.5.3-1.
Oriz. 4.5.3-1 Kontrollet e butonit , LinkButton dhe Imagebutton
Në vijim do të flasim për kontrollin Button, por të gjitha veçoritë e këtij kontrolli vlejnë për kontrollet LinkButton dhe ImageButton.
Kodi më i thjeshtë HTML për një buton të serverit ASP .NET mund të duket si
< asp : Button ID =" Button 1" runat =" server " Text =" Button " />
Butonat në format ASP .NET ndahen në dy kategori të gjera: butonat e paraqitjes dhe butonat e komandës. Në pamjen e jashtme, nuk ka asnjë ndryshim midis butonave të llojeve të ndryshme. Vetëm sjellja e tyre ndryshon: kur shtypet një buton i llojit Submit, përmbajtja e komandave të formularit thjesht transferohet në server dhe kur shtypet një buton i tipit Command, procedura e ngjarjes së komandës për këtë buton duhet të ekzekutohet në serverin. Në këtë procedurë të ngjarjes, duke përdorur objektin CommandEventArgs, mund të merrni informacion për vlerën e veçorisë Command dhe ta përdorni atë gjatë ekzekutimit të procedurës së ngjarjes.
Si parazgjedhje, të gjithë butonat në formularët ASP .NET janë të tipit Submit. Për t'i caktuar ato në llojin Command, mjafton thjesht të plotësoni informacionin për emrin e komandës duke përdorur veçorinë CommandName. Pas kësaj, për këtë buton, përveç ngjarjes standarde Click, mund të përdorni edhe ngjarjen Command. Në mënyrë tipike, butonat e tipit Command përdoren kur funksionaliteti i butonave të rregullt Submit nuk është i mjaftueshëm (për shembull, duhet të konfiguroni ndërveprimin midis kontrolleve prindërore dhe të ndërlidhura).
Vetia kryesore e kontrollit Button, përveç Emrit të Komandës, është vetia Text, e cila përcakton etiketën në buton. Prona të tjera të rëndësishme janë renditur më poshtë:
· CausesValidation - përcakton nëse, pas shtypjes së këtij butoni, do të kontrollohen vlerat e futura nga përdoruesi. Si parazgjedhje, kjo veti vendoset në true dhe kryhet vërtetimi. Për disa butona (për shembull, butoni Reset), vërtetimi i vlerave të futura nga përdoruesi duhet të çaktivizohet duke vendosur këtë veçori në False;
· Aktivizuar - aftësia për të aktivizuar ose çaktivizuar butonin (për shembull, mund ta çaktivizoni derisa përdoruesi të plotësojë të gjitha fushat e kërkuara të tekstit);
· OnClientClick - kjo veti ju lejon të përcaktoni emrin e skriptit që duhet të ekzekutohet në shfletuesin e klientit kur klikohet ky buton;
· PostBackUrl - kjo veti ju lejon të përcaktoni se cila faqe do t'i dërgohet përdoruesit në shfletues pasi të shtypet ky buton;
· UseSubmitBehavior - si parazgjedhje, kjo veti është vendosur në True, që do të thotë: dërgoni informacion në server duke përdorur mekanizmin standard të paraqitjes së informacionit të integruar në shfletues. Nëse e vendosni këtë veti në false, atëherë nënsistemi ASP .NET do të gjenerojë automatikisht një skript nga ana e klientit për këtë buton që do të trajtojë postimin e informacionit (kjo zgjidhje quhet mekanizmi i postback ASP .NET). Ju mund ta përdorni këtë metodë nëse keni nevojë të siguroni funksionalitet shtesë kur dërgoni të dhëna nga klienti në server.
· ValidationGroup - duke përdorur këtë veti, ju mund të përcaktoni një grup kontrollesh për të cilat vlerat do të kontrollohen kur klikohet ky buton. Kjo veçori është e dobishme kur forma është e madhe dhe është më e përshtatshme për të kontrolluar vlerat e futura nga përdoruesi në pjesë.
Ngjarjet kryesore të butonit, siç është përmendur tashmë, janë Kliko dhe Komanda.
Faqet Razor në ASP.NET Core ju lejojnë të ndërtoni aplikacione ueb të fokusuara në faqe duke përdorur modele të thjeshta programimi të bazuara në faqe. Nëse keni punuar më parë me Razor Pages, ndoshta jeni të vetëdijshëm se si parazgjedhje mund të trajtoni kërkesat duke përdorur metoda të tilla si OnGet(), OnPost(), OnPut() dhe OnDelete(). Kjo do të thotë që një formë e postuar në server duhet të trajtohet duke përdorur vetëm një veprim - OnPost(). Sidoqoftë, ndonjëherë duhet të keni veprime të shumta për t'u marrë me të njëjtën folje HTTP. Një skenar i zakonshëm është kur keni shumë butona të dorëzimit në një formular.
Merrni parasysh shembullin e mëposhtëm që tregon një formë të tillë.
Siç mund ta shihni, faqja Index.cshtml ka tre butona dërgimi të vendosur brenda një formulari. Dhe ju dëshironi të trajtoni çdo buton ndryshe. Si parazgjedhje, klikimi në cilindo nga këta tre butona do të shkaktojë veprimin OnPost(). Si të lidhni tre mbajtës të ndryshëm në vend të mbajtësit të paracaktuar? Për ta arritur këtë, duhet të përdorni atributin asp-page-handler të ndihmësve të etiketave. Hidhini një sy shenjës së mëposhtme që tregon formën e mësipërme:
Vini re kodin e treguar me shkronja të zeza. Elementet hyrëse kanë atribut asp-page-handler të vendosur në vlera të caktuara. Ky atribut vendos veprimin nga modeli i faqes që do të trajtojë paraqitjen e formularit. Atributi asp-page-handler në thelb lëshon formacion atribut HTML në shfletues. Gjithashtu vini re se elementët e hyrjes kanë gjithashtu një atribut asp-route-sessioncount. Ky atribut cakton një vlerë të rrugës që më pas i jepet metodës përkatëse të mbajtësit. Specifikimi i asp-route-* është, natyrisht, opsional. Fushat e formularit vihen në dispozicion të metodave të mbajtësit përmes lidhjes së modelit si zakonisht (shih gjithashtu artikullin tim të mëparshëm).
NE RREGULL. Deri këtu mirë. Tani është koha për të shkruar ato veprime mbajtëse siç përmenden në atributet asp-page-handler. Hapni klasën e modelit të faqes (Index.cshtml.cs) dhe shkruani veprimet e mëposhtme në të:
Publik void OnPostYogaPostures(int sessionCount) ( //bëni punën tuaj këtu ViewData["message"] = $"Kërkesa juaj për sesionet (sessionCount) në Postures Yoga po përpunohet."; ) public void OnPostMeditation(int sessionCount) ( // bëje punën tënde këtu ViewData["message"] = $"Kërkesa jote për (sessionCount) seanca në Kriya dhe Meditim po përpunohet."; ) public void OnPostRestorativeYoga(int sessionCount) ( //bëje punën tënde këtu ViewData["message" ] = $"Kërkesa juaj për sesione (sessionCount) në Yoga restauruese po përpunohet.";)
vini re konventën e emërtimit të veprimeve. Meqenëse duam të trajtojmë kërkesat POST, ne i vendosim të gjithë emrat e veprimeve (emri asp-page-handler) me "OnPost". Kështu ne kemi OnPostYogaPostures, OnPostMeditation, OnPostRestorativeYoga. Gjithashtu vini re se të gjithë mbajtësit kanë një parametër sessionCount. Ky parametër do të vijë nga atributi asp-route-sessioncount që kemi caktuar më parë.
Vendosni një pikë ndërprerjeje në secilën nga këto metoda dhe ekzekutoni aplikacionin. Do të zbuloni se klikimi mbi një buton e çon kontrollin te mbajtësi i faqes përkatëse.
Kjo është tani për tani! Vazhdo kodimin !!
Bipin Joshiështë një konsulent softuerësh, trajner, autor, mentor yoga dhe udhërrëfyes shpirtëror që ka mbi 24 vjet përvojë në zhvillimin, këshillimin dhe trajnimin e softuerit. Ai zhvillon kurse trajnimi në internet të udhëhequra nga instruktorët në ASP.NET Core, ASP.NET MVC dhe Modelet e Dizajnit për individë dhe grupe të vogla. Ai është një autor i botuar dhe ka autor ose bashkëautor libra për Apress dhe Wrox press. Duke përqafuar mënyrën e jetesës së Yogës, ai gjithashtu u mëson Ajapa Yoga individëve të interesuar. Për të ditur më shumë rreth tij, klikoni.
