Ce este Helpers Tag?
Asistenții pentru etichete forțează codul din partea serverului să participe la crearea și prezentarea elementelor HTML în fișierele Razor. De exemplu, ImageTagHelper încorporat poate atașa numărul versiunii la numele imaginii. Atunci când o imagine este schimbată, serverul generează o nouă versiune unică a imaginii, astfel încât clientul este garantat pentru a primi versiunea curentă a imaginii (în locul unei imagini în cache). În scopuri generale, sunt multe Helpers Tag încorporate - de exemplu, pentru crearea de forme, link-uri, download-uri, etc - și multe dintre ele sunt disponibile în arhive github deschise și sub formă de pachete NuGet. Funcționatorii de etichete lucrează cu elemente HTML bazate pe numele elementului, pe numele atributului sau pe eticheta părinte. De exemplu, LabelTagHelper încorporat poate funcționa cu un element HTML
Than Helpers ajutor
Majoritatea ajutoarelor de etichetare integrate sunt direcționate către elementele HTML existente și furnizează atribute pentru elementul de pe partea clientului. De exemplu, un element . utilizat în mai multe vizualizări în dosarul Vizualizări / Cont. conține atributul asp-pentru. care preia numele proprietății modelului specificat în codul HTML trimis. Următorul marcator Razor:
generează următoarele coduri HTML:
Atributul asp-pentru este disponibil pentru proprietatea For în LabelTagHelper. Consultați Crearea unui ajutor pentru etichete.
Gestionarea ajutorului pentru etichete¶
Asistenții pentru etichete sunt controlați de o combinație de # 64; addTagHelper. # 64; removeTagHelper și semnul de oprire "!".
# 64; addTagHelper oferă asistență pentru etichete ¶
Dacă creați o nouă aplicație ASP.NET 5 numită AuthoringTagHelpers (fără autentificare), următorul fișier Vizualizări / _ViewImports.cshtml va fi adăugat la proiectul dvs.:
directivă # 64; addTagHelper face disponibile Tag-uri Helpers pentru prezentare. În acest caz, fișierul de vizualizare este Views / _ViewImports.cshtml. care, în mod implicit, este moștenit de toate fișierele de vizualizare din dosarul Vizualizări și din subdosare; Astfel, Ajutoarele pentru etichete devin disponibile tuturor. În sintaxa de cod este folosit pe partea de sus a „*“ pentru a indica faptul că toate Helpers Tag în ansamblul specificat (Microsoft.AspNet.Mvc.TagHelpers) vor fi disponibile pentru fiecare vizualizare a fișierului sau subdirector în directorul Vizualizări. Primul parametru după # 64; addTagHelper spune Helper Tag trebuie să descărcați (vom folosi „*“ pentru toate Helpers Tag), iar al doilea parametru „Microsoft.AspNet.Mvc.TagHelpers“ indică ansamblul care conține Helpers Tag. Microsoft.AspNet.Mvc.TagHelpers este un ansamblu pentru ASP.NET încorporat 5 Tag Helpers.
Pentru a utiliza toate etichetele de ajutor în acest proiect (în cazul în care este creat ansamblul AutoringTagHelpers), facem următoarele:
Dacă proiectul dvs. conține EmailTagHelper cu spațiul de nume implicit (AuthoringTagHelpers.TagHelpers.EmailTagHelper), puteți utiliza numele complet (FQN) al elementului Tag Helper:
Pentru a adăuga Helper Tag într-o reprezentare de FQN, adăugați mai întâi FQN (AuthoringTagHelpers.TagHelpers.EmailTagHelper), urmat de numele de asamblare (AuthoringTagHelpers). Majoritatea dezvoltatorilor preferă să utilizeze sintaxa wildcard - "*". Metoda wildcard vă permite să inserați caractere "*" ca un sufix în FQN. De exemplu, unele dintre următoarele directive vor adăuga un EmailTagHelper:
După cum am menționat mai devreme, adăugarea unei directive # 64; addTagHelper în fișierul Views / _ViewImports.cshtml face ca elementul Helper Tag să fie disponibil pentru toate fișierele de vizualizare din directorul și subdirectoarele Vizualizări. Puteți folosi directiva # 64; addTagHelper în fișierele de vizualizare specifice, dacă doriți ca elementul Helper Tag să fie numai în aceste vizualizări.
# 64; removeTagHelper elimină Helpers Tag
în # RemoveTagHelper are aceleași doi parametri ca și # 64; addTagHelper. iar această directivă șterge elementul Tag Helper adăugat anterior. De exemplu, dacă aplicăm # 64; removeTagHelper la o anumită vizualizare, va elimina un anumit Tag Helper din această vizualizare. utilizarea # 64; removeTagHelper din Views / Folder / _ViewImports.cshtml elimină un anumit Helper de etichete din toate vizualizările din dosar.
Controlarea elementelor Tag Helper utilizând fișierul _ViewImports.cshtml ¶
Puteți adăuga orice dosar de prezentare _ViewImports.cshtml și a motorului de prezentare adaugă directiva de fișier _ViewImports.cshtml cu cea conținută în / fișierul _ViewImports.cshtml Vizualizări. Dacă ați adăugat un fișier gol Vizualizări / Pagina principală / _ViewImports.cshtml pentru vizualizările de la Acasă. Nimic nu se schimbă deoarece fișierul _ViewImports.cshtml este opțional. Orice directivă # 64; addTagHelper. pe care le adăugați la Views / home / fișierul _ViewImports.cshtml (și care nu este implicit în vizualizările / fișierul _ViewImports.cshtml) va determina Helpers Tag numai în dosarul Acasă.
Ștergerea elementelor individuale¶
Puteți dezactiva funcția Helper pentru etichete la nivelul elementelor utilizând simbolul de oprire ("!"). De exemplu, validarea e-mailurilor este dezactivată în cu acest simbol:
utilizarea # 64; tagHelperPrefix pentru utilizarea explicită a Tag Helper #
directivă # 64; tagHelperPrefix vă permite să specificați un șir de prefix pentru etichetă pentru a activa suportul Tag Helper și a utiliza eticheta de ajutor direct. În figura de mai jos, prefixul Tag Helper este setat la "th:", astfel încât numai elementele care folosesc prefixul "th:" să susțină Tag Helpers. La elemente
Regulile ierarhiei care se aplică # 64; addTagHelper. se aplică de asemenea # 64; tagHelperPrefix.
Sprijin IntelliSense pentru Helpers Tag
Când creați o nouă aplicație ASP.NET în Visual Studio, "Microsoft.AspNet.Tooling.Razor" este adăugată fișierului project.json. Acest pachet adaugă setul de instrumente Tag Helper.
Aveți nu numai ajutor HTML, dar și o pictogramă (simbolul "# 64;" cu "<>"Sub ea).
Afișează elementul la care sunt vizate Ajutoarele pentru etichete. Elementele HTML nete (de exemplu, setul de câmpuri) afișează "<>“.
Eticheta HTML netă
IntelliSense vă permite să completați expresia cu valoarea selectată:
După introducerea atributului Tag Helper, eticheta și fonturile de atribute se vor schimba. Dacă utilizați schemele de culori de bază ale Visual Studio "Albastru" sau "Lumină", culoarea va fi violet. Dacă utilizați schema "Întunecată", culoarea va fi saturată cu turcoaz. Aici am folosit schema implicită.
Aveți posibilitatea să utilizați tastele rapide Visual Studio CompleteWord (Ctrl + spațiu implicit) în interiorul ghilimelelor duble ("") și acum sunteți în C #. IntelliSense afișează toate metodele și proprietățile modelului de pagină. Sunt disponibile metode și proprietăți, deoarece tipul de proprietate este ModelExpression. În imaginea de mai jos, editez vizualizarea Înregistrare. astfel încât să putem accesa RegisterViewModel.
IntelliSense analizează proprietățile și metodele disponibile pentru model. IntelliSense vă ajută să alegeți o clasă CSS:
Etichete de ajutor în comparație cu metodele auxiliare HTML¶
Asistentul de etichetare se alătură elementelor HTML în reprezentările Razor, în timp ce metodele HTML auxiliare sunt numite cu HTML în vizualizările Razor. Imaginați-vă următoarea etichetare a Razor, care creează o etichetă HTML cu "caption" de clasă CSS:
"La" ( # 64; ) îi spune lui Razor că acesta este începutul codului. Următorii doi parametri ("FirstName" și "First Name") sunt șiruri, astfel încât IntelliSense nu poate ajuta aici. Ultimul argument:
Folosind LabelTagHelper, același marcaj poate fi scris astfel:
IntelliSense vă ajută să înregistrați totul. De asemenea, LabelTagHelper stabilește conținutul valorii atributului asp-for ("FirstName") la "First Name"; convertește proprietățile CamelCase în expresii care constau dintr-un nume de proprietate, cu un spațiu în care totul este scris cu o literă mare. La următorul marcaj:
Această tehnică nu este utilizată dacă adăugați conținut la
este afișat pe un fundal gri. Cele mai multe marcări în vizualizarea Înregistrare sunt un cod C #. Comparați acest lucru cu echivalentul utilizării ajutorului de etichetare:
Acordați atenție grupului de e-mail:
Fiecare dintre atributele "asp-" are valoarea "Email", dar "Email" nu este un șir. În acest context, "Email" este o proprietate a expresiei modelului C # pentru RegisterViewModel.
Etichete Ajutor vs. Control Web Server¶
- Asistenții pentru etichete nu aparțin elementului cu care sunt asociați; ele pur și simplu participă la afișarea elementului și a conținutului. Controalele ASP.NET Web Server sunt declarate și invocate pe pagină.
- Controalele serverului Web au un ciclu de viață nestandard, ceea ce complică dezvoltarea și depanarea.
- Controlul Web Server vă permite să adăugați funcționalitatea elementelor DOM. Asistenții pentru etichete nu pot face acest lucru.
- Controalele serverului Web includ detectarea automată a browserului. Asistenții pentru etichete nu știu nimic despre browser.
- Mai mulți Helpers pentru etichete pot lucra cu același element (consultați Cum se evită conflictul Helper) și comenzile Web Server nu pot fi combinate.
- Asistenții pentru etichete pot schimba eticheta și contextul elementelor HTML cu care sunt conectate, dar ele nu afectează în mod direct nimic direct pe pagină. Controalele serverului Web pot efectua acțiuni care afectează alte părți ale paginii și acest lucru poate duce uneori la efecte secundare.
- Controalele serverului Web convertesc liniile către obiecte. Cu ajutorul programatorilor de etichete, inițial lucrați în C #, deci nu este necesar să faceți conversia.
- Controalele serverului Web utilizează System.ComponentModel. Pentru a implementa comportamentul componentelor în timpul dezvoltării și a duratei de execuție. System.ComponentModel include clase de bază și interfețe pentru implementarea atributelor și conversia de tip, care leagă sursele de date și componentele. Asistenții pentru etichete sunt moșteniți de la TagHelper. iar clasa de bază TagHelper oferă doar două metode - Process și ProcessAsync.
Particularizarea fontului Font Helper font
Puteți personaliza fontul și culoarea din Instrumente> Opțiuni> Mediu> Fonturi și culori:
Resurse suplimentare¶
Trimiteți-le prietenilor: