Ultima actualizare: 31.10.2015

Deși putem scrie singuri orice ajutor necesar, framework-ul MVC oferă deja un set mare de ajutoare HTML încorporate care ne permit să generăm acest sau acel marcaj, în principal pentru lucrul cu formulare. Prin urmare, în majoritatea cazurilor nu va trebui să vă creați propriile ajutoare și îi puteți folosi pe cei încorporați.

Ajutor Html.BeginForm

Pentru a crea formulare, putem folosi cu ușurință standard elemente html, De exemplu:

Introdu numele tau
Introdu adresa:

Acesta este un formular html obișnuit care, la clic pe un buton, trimite toate datele introduse prin cerere POST la adresa /Acasă/Cumpara. Ajutorul încorporat BeginForm/EndForm vă permite să creați același formular:

Introdu numele tau
Introdu adresa:

}

Metoda BeginForm ia ca parametri numele metodei de acțiune și numele controlerului, precum și tipul cererii. Acest ajutor creează ca o etichetă de deschidere

, și eticheta de închidere

. Prin urmare, atunci când redăm vizualizarea în fluxul de ieșire, vom ajunge cu același cod html ca și folosind eticheta de formular. Prin urmare, ambele metode sunt identice.

Există un punct aici. Dacă avem două versiuni ale unei metode definite în controlerul nostru - pt metode POSTși GET, de exemplu:

Public ActionResult Cumpărare() ( return View(); ) public string Cumpărare(Purchase purchase) ( ............... return „Vă mulțumim că ați cumpărat cartea”;; )

Adică, de fapt, apelarea paginii cu formularul și trimiterea formularului sunt efectuate prin aceeași acțiune Cumpărare. În acest caz, nu trebuie să specificați parametrii în ajutorul Html.BeginForm:

@using(Html.BeginForm()) ( ............. )

Introducerea informațiilor

Exemplul anterior a folosit elemente html standard împreună cu ajutorul Html.BeginForm. Cu toate acestea, setul de ajutor html conține, de asemenea, ajutorul pentru introducerea utilizatorului. MVC definește o gamă largă de ajutoare de intrare pentru aproape fiecare element html. Ce să alegeți - un ajutor sau elemente de intrare html standard sunt decise de dezvoltatorul însuși.

Indiferent de tip, toți ajutoarele HTML de bază folosesc cel puțin doi parametri: primul parametru este utilizat pentru a seta valorile pentru atributele id și name, iar al doilea parametru este utilizat pentru a seta valoarea atributului valoare.

Html.TextBox

Ajutorul Html.TextBox generează eticheta de intrare cu sens atribut tip egal cu textul. Ajutorul TextBox este folosit pentru a primi intrarea utilizatorului. Deci, să rescriem formularul anterior, înlocuind câmpurile de intrare cu ajutorul Html.TextBox:

@using(Html.BeginForm(„Cumpără”, „Acasă”, FormMethod.Post)) (

Introdu numele tau:

@Html.TextBox(„Persoană”, „Introduceți un nume”)

Introdu adresa:

@Html.TextBox(„Adresă”, „Introduceți o adresă”)

}

Vom obține același rezultat:

Html.TextArea

Ajutorul TextArea este folosit pentru a crea un element , care reprezintă un câmp text cu mai multe linii. Rezultatul expresiei @Html.TextArea(„text”, „bună ziua <br/>lume")</p> <p>va exista următorul marcaj html:</p><p> <textarea cols="20" id="text" name="text" rows="2">Buna ziua <br/>lume

Vă rugăm să rețineți că ajutorul decodifică valoarea plasată în acesta, inclusiv etichetele html (toți ajutoarele decodifică valorile modelului și valorile atributelor). Alte versiuni ale asistentului TextArea vă permit să specificați numărul de rânduri și coloane care definesc dimensiunea zonei de text.

@Html.TextArea(„text”, „bună ziua
lume", 5, 50, nul)

Acest ajutor va genera următorul marcaj:

Buna ziua <br />lume

Html.Hidden

În exemplul de formular, am folosit un câmp ascuns de intrare tip="hidden" , pe care l-am fi putut folosi cu ușurință în schimb ajutorul Html.Hidden. Deci, următorul ajutor sună:

@Html.Hidden(„CarteId”, „2”)

va genera markup:

Și când trecem o variabilă din ViewBag, trebuie să o aruncăm la tipul șirului de caractere: @Html.Hidden ("BookId", @ViewBag.BookId ca șir)

Html.Parola

Html.Password creează un câmp de introducere a parolei. Este similar cu ajutorul TextBox, dar afișează o mască de parolă în locul caracterelor pe care le introduceți. Următorul cod:

@Html.Password(„Parola utilizator”, „val”)

generează markup:

Html.RadioButton

Pentru a crea butoane radio, utilizați ajutorul Html.RadioButton. Acesta generează un element de intrare cu valoarea type="radio" . Pentru a crea un grup de butoane radio, trebuie să atribuiți același nume tuturor (proprietatea nume):

@Html.RadioButton(„culoare”, „roșu”) roșu
@Html.RadioButton(„culoare”, „albastru”) albastru
@Html.RadioButton ("culoare", "verde", adevărat) verde

Acest cod produce următorul marcaj:

roșu
albastru
verde

Html.CheckBox

Html.CheckBox poate fi folosit pentru a crea două elemente simultan. Luați de exemplu următorul cod:

@Html.CheckBox(„Activați”, fals)

Această expresie va genera următorul cod HTML:

Adică, pe lângă câmpul casetă de selectare în sine, este generat și un câmp ascuns. De ce este nevoie? Chestia este că browserul trimite valoarea casetei de selectare numai atunci când caseta de selectare este selectată sau bifată. Și câmpul ascuns asigură că elementul Enable va fi setat la o valoare chiar dacă utilizatorul nu bifează caseta.

Html.Label

Ajutorul Html.Label creează un element , iar parametrul transmis helperului determină valoarea atributului for și în același timp textul de pe element. Versiunea supraîncărcată a ajutorului vă permite să determinați valoarea atributului for și a textului de pe etichetă independent unul de celălalt. De exemplu, declarația de ajutor Html.Label(„Nume”) produce următorul marcaj:

Nume

Elementul de etichetă reprezintă o etichetă simplă concepută pentru a atașa informații elementelor de intrare, cum ar fi câmpurile de text. Atributul for al elementului label trebuie să conțină ID-ul elementului de intrare asociat. Dacă utilizatorul face clic pe o etichetă, browser-ul concentrează automat elementul de intrare asociat etichetei respective.

Html.DropDownList

Ajutorul Html.DropDownList creează o listă derulantă, adică un element . Pentru a genera o astfel de listă, aveți nevoie de o colecție de obiecte SelectListItem care reprezintă elementele listei. Obiectul SelectListItem are proprietățile Text (textul care trebuie afișat), Value (valoarea în sine, care poate să nu fie aceeași cu textul) și Selected. Puteți crea o colecție de obiecte SelectListItem sau puteți utiliza ajutorul SelectList. Acest ajutor analizează obiectele IEnumerable și le convertește într-o secvență de obiecte SelectListItem. Astfel, codul @Html.DropDownList("countires", new SelectList(new string ("Rusia","SUA", "Canada","Franța")),,"Countries") generează următorul marcaj:

Țări Rusia STATELE UNITE ALE AMERICII Canada Franţa

Acum mai mult exemplu complex. Să enumerăm colecția de elemente de carte. În controler vom trece această listă prin ViewBag:

BookContext db = new BookContext(); public ActionResult Index() ( Cărți SelectList = new SelectList(db.Books, „Author”, „Nume”); ViewBag.Books = cărți; return View(); )

Aici creăm un obiect SelectList trecând către constructorul său un set de valori pentru listă (db.Books), numele proprietății model Book care va fi folosită ca valoare (Author) și numele Cărții. proprietatea modelului care va fi utilizată pentru afișare în listă. ÎN în acest caz, Nu este necesar să setați două proprietăți diferite; puteți seta una atât pentru valoare, cât și pentru afișare.

Apoi, în vizualizare putem folosi această SelectList astfel:

@Html.DropDownList(„Autor”, ViewBag.Books ca SelectList)

Și când vizualizarea este redată, toate elementele SelectList vor fi adăugate la lista drop-down

Html.ListBox

Ajutorul Html.ListBox, precum DropDownList, creează un element , dar în același timp permite selecția multiplă de elemente (adică atributul multiplu este setat la multiplu). Pentru a crea o listă care acceptă selecții multiple, puteți utiliza clasa MultiSelectList în loc de SelectList:

@Html.ListBox(„țări”, new MultiSelectList(șir nou („Rusia”, „SUA”, „China”, „India”)))

Acest cod generează următorul marcaj:

Rusia STATELE UNITE ALE AMERICII China India

Totul este clar cu transmiterea unor valori individuale către server, dar cum să transmiteți mai multe valori? Să presupunem că avem următoarea formă:

@using (Html.BeginForm()) ( @Html.ListBox(„țări”, nou MultiSelectList(șir nou („Rusia”, „SUA”, „China”, „India”)))

}

Apoi metoda controlerului ar putea primi aceste valori astfel:

Index de șir public (șir țări) ( șir rezultat = ""; foreach (șir c în țări) ( rezultat += c; rezultat += ";"; ) return "Ați selectat: " + rezultat; )

Formular cu mai multe butoane

De obicei, există un singur buton de trimitere pe formular. Cu toate acestea, în anumite situații poate fi necesar să folosiți mai mult de un buton. De exemplu, există un câmp pentru introducerea unei valori și două butoane indică dacă această valoare trebuie ștearsă sau, dimpotrivă, adăugată:

@using (Html.BeginForm ("MyAction", "Home", FormMethod.Post)) (
Adăuga Șterge }

Cea mai simplă soluție este să setați fiecare buton la aceeași valoare atributul numelui, dar diferit pentru atributul valoare. Și metoda care ia forma ar putea arăta astfel:

Public ActionResult MyAction(produs șir, acțiune șir) ( if(action=="add") ( ) else if(action=="delete") ( ) // restul codului metodei )

Și folosind o construcție condiționată, în funcție de valoarea parametrului de acțiune, care stochează valoarea atributului de valoare al butonului apăsat, sunt efectuate anumite acțiuni.

Odată cu apariția conexiunilor la internet suficient de rapide, Flash a fost singurul instrument pentru redarea sunetelor pe site-uri web. Dar HTML5 va schimba fundamental modul în care sunetele sunt redate pe Internet. În acest articol vreau să vă spun în detaliu cum să utilizați eticheta pe site-urile dvs.

Folosim

Mai jos este un exemplu simplu de utilizare a unei etichete, acesta descarcă un fișier mp3 și îl redă. Acordați atenție atributului autopaly, care este folosit pentru a reda automat audio. Cu toate acestea, nu ar trebui să redați automat sunete pe site, deoarece acest lucru va enerva utilizatorii.

Redarea unui sunet într-o buclă

Doriți să buclați sunetul? Atributul buclă vă va ajuta să faceți acest lucru. Dar din nou, nu ar trebui să folosiți excesiv redarea automată și redarea în buclă dacă nu doriți ca utilizatorul să părăsească site-ul prematur.

Afișarea comenzilor

În loc să redați sunetele automat, ceea ce este cu siguranță o practică proastă, ar trebui să permiteți ca unele comenzi, cum ar fi butoanele de volum și de redare (pauză), să fie afișate în browser. Acest lucru este ușor de făcut prin simpla adăugare a atributului controale.

Diverse formate de fișiere

Eticheta este acceptată de majoritatea browserelor moderne, dar problema este că diferite browsere acceptă diferite formate de fișiere. Safari, de exemplu, poate reda fișiere MP3, dar Firefox nu poate și redă în schimb fișiere OGG. Soluția la această problemă este să folosiți ambele formate, astfel încât fiecare vizitator să poată auzi audio, indiferent de browserul pe care îl folosește.

Specificați tipul MIME de fișiere

Când utilizați diferite formate de fișiere, este o practică bună să specificați tipul MIME pentru fiecare fișier pentru a ajuta browserul să localizeze fișierul pe care îl acceptă. Acest lucru se poate face cu ușurință folosind atributul tip.

Pentru browsere mai vechi

Ce se întâmplă dacă vizitatorul folosește IE6 sau un alt browser preistoric care nu acceptă eticheta? Este ușor: mai jos este codul care va afișa un mesaj pentru browserele care nu acceptă eticheta.

Buffering de fișiere

Atunci când redați fișiere mari, poate fi utilizată tamponarea fișierelor. Pentru aceasta puteți folosi atributul preîncărcare. Poate lua 3 valori:

• nici unul- dacă nu doriți să utilizați buffer-ul fișierului;
• auto- dacă doriți ca browser-ul să tamponeze întregul fișier;
• metadate- pentru a descărca numai informații de serviciu (durata sunetului etc.).

Controlul redării prin JavaScript

Controlul unui player audio HTML5 prin JavaScript este foarte ușor. Următorul exemplu arată cum vă puteți crea propriile comenzi de bază ale playerului audio folosind JavaScript:

Asta e tot pentru azi.
Sper că acest articol v-a ajutat să înțelegeți capacitățile de bază ale etichetei HTML5. .

Button, LinkButton și ImageButton

Buton ASP.NET 2.0, LinkButton și comenzi de server ImageButton, evenimente clic și comandă

Controalele care reprezintă butoane (Button, LinkButton și ImageButton) sunt, de asemenea, printre cele mai frecvent utilizate. Setul lor de proprietăți și evenimente este foarte asemănător. Principala diferență dintre ele este modul în care butonul va fi afișat pe pagina Web. Diferențele dintre ele sunt prezentate clar în Fig. 4.5.3-1.

Orez. 4.5.3-1 Buton, LinkButton și comenzi Imagebutton

În cele ce urmează, vom vorbi despre controlul Button, dar toate capabilitățile acestui control se aplică controalelor LinkButton și ImageButton.

Cel mai simplu cod HTML pentru un buton de server ASP .NET ar putea arăta

< asp : Button ID =" Button 1" runat =" server " Text =" Button " />

Butoanele de pe formularele ASP .NET se împart în două categorii mari: butoanele de trimitere și butoanele de comandă. Nu există diferențe de aspect între butoanele de diferite tipuri. Doar comportamentul lor diferă: atunci când faceți clic pe un buton de tip Trimitere, conținutul controalelor formularului este pur și simplu transferat pe server, iar când faceți clic pe un buton de tip Comandă, procedura evenimentului Comandă pentru acest buton trebuie să fie executat pe server. În această procedură de eveniment, puteți utiliza obiectul CommandEventArgs pentru a obține informații despre valoarea proprietății Command și îl puteți utiliza atunci când executați procedura de eveniment.

În mod implicit, toate butoanele de pe formularele ASP .NET sunt de tip Submit. Pentru a le clasifica ca tip de comandă, pur și simplu completați informații despre numele comenzii folosind proprietatea CommandName. După aceasta, pe lângă evenimentul Click standard, puteți utiliza și evenimentul Command pentru acest buton. De obicei, butoanele de comandă sunt folosite atunci când funcționalitatea butoanelor obișnuite de trimitere nu este suficientă (de exemplu, trebuie să configurați interacțiunea controalelor părinte și imbricate).

Proprietatea principală a controlului Button, pe lângă CommandName, este proprietatea Text, care determină eticheta butonului. Alte proprietăți importante sunt prezentate mai jos:

· CausesValidation - determină dacă, după apasarea acestui buton, vor fi validate valorile introduse de utilizator. În mod implicit, această proprietate este setată la adevărat și verificarea este efectuată. Pentru unele butoane (de exemplu, butonul Reset), validarea valorilor introduse de utilizator trebuie să fie dezactivată prin setarea acestei proprietăți la Fals;

· Activat - capacitatea de a activa sau dezactiva un buton (de exemplu, îl puteți dezactiva până când utilizatorul completează toate câmpurile de text necesare);

· OnClientClick - această proprietate vă permite să definiți numele script-ului care ar trebui să fie executat în browser-ul clientului când se face clic pe acest buton;

· PostBackUrl - această proprietate vă permite să determinați ce pagină va fi trimisă utilizatorului în browser după ce se face clic pe acest buton;

· UseSubmitBehavior - în mod implicit, această proprietate este setată la True, ceea ce înseamnă: trimiteți informații către server folosind mecanismul standard de transmitere a informațiilor încorporat în browser. Dacă setați această proprietate la false , subsistemul ASP .NET va genera automat un script client pentru acest buton care se va ocupa de trimiterea informațiilor (această soluție se numește mecanism de postback ASP .NET ). Această metodă poate fi folosită dacă trebuie să oferiți funcționalități suplimentare atunci când trimiteți date de la client la server.

· ValidationGroup - folosind această proprietate puteți defini un grup de controale pentru care valorile vor fi validate atunci când se face clic pe acest buton. Această proprietate este convenabilă de utilizat atunci când formularul este mare și este mai convenabil să verificați valorile introduse de utilizator în părți.

Evenimentele principale ale butoanelor, așa cum am menționat deja, sunt Click și Command.

Paginile Razor din ASP.NET Core vă permit să construiți aplicații web axate pe pagină folosind un model de programare simplu bazat pe pagini. Dacă ați lucrat cu Razor Pages înainte, probabil că știți că în mod implicit puteți gestiona solicitările folosind metode precum OnGet(), OnPost(), OnPut() și OnDelete(). Aceasta înseamnă că un formular postat pe server trebuie gestionat folosind o singură acțiune - OnPost(). Uneori, totuși, trebuie să aveți mai multe acțiuni pentru a face față aceluiași verb HTTP. Un scenariu comun este atunci când aveți mai multe butoane de trimitere pe un formular.

Luați în considerare următorul exemplu care arată o astfel de formă.

După cum puteți vedea, pagina Index.cshtml are trei butoane de trimitere găzduite în interiorul unui formular. Și doriți să gestionați fiecare buton diferit. În mod implicit, făcând clic pe oricare dintre aceste trei butoane va declanșa acțiunea OnPost(). Cum să conectați trei handlere diferite în loc de handlerul implicit? Pentru a realiza acest lucru, trebuie să utilizați atributul asp-page-handler al etichetelor helper. Aruncă o privire la următorul semn care arată forma de mai sus:

Ce fel de cursuri de yoga cauți?

asp-page-handler="YogaPostures" asp-route-sessioncount="20" />
asp-page-handler="Meditație" asp-route-sessioncount="10" />
asp-page-handler="RestorativeYoga" asp-route-sessioncount="15" />

Observați codul afișat cu litere aldine. Elementele de intrare au atributul asp-page-handler setat la anumite valori. Acest atribut decide acțiunea din modelul de pagină care se va ocupa de trimiterea formularului. Atributul asp-page-handler emite practic formaction HTML atribut în browser. De asemenea, observați că elementele de intrare au și atributul asp-route-sessioncount. Acest atribut setează o valoare a rutei care este apoi furnizată metodei de gestionare corespunzătoare. Specificarea asp-route-* este, desigur, opțională. Câmpurile de formular sunt puse la dispoziție metodelor de gestionare prin legarea modelului, ca de obicei (vezi și articolul meu anterior).

Bine. Până acum, bine. Acum este timpul să scrieți gestionarea acelor acțiuni așa cum este menționat în atributele asp-page-handler. Deschideți clasa de model de pagină (Index.cshtml.cs) și scrieți următoarele acțiuni în ea:

Public void OnPostYogaPostures(int sessionCount) ( //faceți-vă munca aici ViewData["message"] = $"Solicitarea dvs. pentru sesiuni (sessionCount) în Yoga Postures este în curs de procesare."; ) public void OnPostMeditation(int sessionCount) ( // faceți-vă munca aici ViewData["message"] = $"Solicitarea dvs. pentru sesiuni (sessionCount) în Kriya și meditație este în curs de procesare."; ) public void OnPostRestorativeYoga(int sessionCount) ( //faceți-vă munca aici ViewData["message" ] = $"Solicitarea dvs. pentru sesiuni (sessionCount) în Restorative Yoga este procesată."; )

Observați convenția de denumire a acțiunilor. Deoarece dorim să gestionăm solicitările POST, punem înaintea tuturor numelor de acțiuni (nume asp-page-handler) cu „OnPost”. Avem OnPostYogaPostures, OnPostMeditation, OnPostRestorativeYoga. De asemenea, observați că toți handlerii au parametrul sessionCount. Acest parametru va veni de la atributul asp-route-sessioncount pe care l-am atribuit mai devreme.

Setați un punct de întrerupere în fiecare dintre aceste metode și rulați aplicația. Veți descoperi că făcând clic pe un buton duce controlul către gestionarea paginii corespunzătoare.

Asta e tot deocamdată! Continuați să codați!!

Bipin Joshi este consultant de software, trainer, autor, mentor de yoga și ghid spiritual cu peste 24 de ani de experiență în dezvoltarea de software, consultanță și formare. El conduce cursuri de formare online conduse de instructori în ASP.NET Core, ASP.NET MVC și Design Patterns pentru persoane fizice și grupuri mici. Este un autor publicat și a fost autor sau coautor de cărți pentru Apress și Wrox press. După ce a îmbrățișat modul de viață Yoga, el predă și Ajapa Yoga persoanelor interesate. Pentru a afla mai multe despre el faceți clic pe .