U ostatku ovog poglavlja, pogledat ćemo nekoliko osnovnih značajki MVC-a stvaranjem jednostavne aplikacije za unos podataka. Malo ćemo ubrzati stvari u ovom odjeljku. Naš cilj je demonstrirati MVC na djelu, pa ćemo izostaviti neka objašnjenja kako sve to radi. Ali ne brinite, te ćemo teme detaljno obraditi u narednim poglavljima.

Nacrtajmo plan

Zamislimo da je prijateljica odlučila ugostiti novogodišnju zabavu i da nas je zamolila da izradimo web stranicu koja će omogućiti njezinim prijateljima i poznanicima da prihvate RSVP pozivnicu (potpis na pozivnici koji poziva primatelja da odgovori da prisustvuje događaj). Stranica bi trebala sadržavati sljedeće:

• Početna stranica na kojoj se prikazuju informacije o stranci
• Obrazac koji se može koristiti za RSVP
• Provjera valjanosti RSVP obrasca koji će prikazati stranicu sa zahvalom
• Popunjen i poslan odgovor na suglasnost za sudjelovanje u zabavi

U sljedećim odjeljcima nadogradit ćemo MVC projekt koji smo izradili na početku poglavlja i dodati ove mogućnosti. Prvu stavku s popisa možemo napraviti primjenom znanja koje smo ranije stekli, odnosno možemo dodati HTML u naše postojeće poglede, gdje će nam biti zadan detaljne informacije o zabavi. B prikazuje dodatke koje smo napravili u datoteci Views/Home/Index.cshtml.

Ispis 2-7: Prikaz informacija o stranci

@( Izgled = null; )

Na dobrom smo putu. Ako pokrenete aplikaciju, vidjet ćete informacije o zabavi, odnosno rezervirano mjesto za te informacije, ali shvatili ste. Primjer je prikazan u.

Slika 2-12: Dodavanje prikaza

Dizajn podatkovnog modela

U MVC-u M stoji za model, a ovo je najvažniji dio aplikacije. Model je prikaz stvarnih objekata, procesa i pravila koji definiraju objekt, poznat kao domena, naša aplikacija. Model koji se često naziva model domene, sadrži C# objekte (poznate kao objekti domene) koji čine srž naše aplikacije i metode koje nam omogućuju da njima manipuliramo. Pogledi i kontroleri izlažu domenu klijentima na dosljedan način, a dobro dizajnirana MVC aplikacija počinje s dobro dizajniranim modelom, koji zatim služi kao središnja točka dok dodajemo kontrolere i poglede.

Ne treba nam kompleksan model za aplikaciju PartyInvites, ali ćemo kreirati jednu domensku klasu koju ćemo nazvati GuestResponse. Ovaj će entitet biti odgovoran za pohranjivanje, potvrđivanje i potvrđivanje RSVP-ova.

Dodavanje klase modela

Prema MVC konvenciji, klase koje čine model smještene su u mapu Models. Klik desni klik prijeđite mišem preko Models u prozoru Solution Explorer i odaberite Add a zatim Class iz skočnog izbornika. Imenujte datoteku GuestResponse.cs i kliknite gumb Dodaj za izradu klase. Promijenite sadržaje razreda prema.

Savjet

Ako nemate stavku izbornika Class, tada ste vjerojatno ostavili pokrenut program za ispravljanje pogrešaka. Vizualni studio. Visual Studio ograničava promjene koje možete napraviti u projektu dok je aplikacija pokrenuta.

Ispis 2-8: Klasa domene GuestResponse

namespace PartyInvites.Models ( javna klasa GuestResponse ( javni niz Name ( get; set; ) javni niz Email ( get; set; ) javni niz Phone ( get; set; ) javni bool? WillAttend ( get; set; ) ) )

Savjet

Možda ste primijetili da je svojstvo WillAttend tipa bool? (Nullable ), odnosno može biti istina, laž ili ništa. To ćemo objasniti u odjeljku "Dodavanje provjere valjanosti" kasnije u ovom poglavlju.

Referenca metode akcije

Jedna od svrha naše aplikacije je uključivanje RSVP obrasca, tako da moramo dodati vezu na nju iz našeg prikaza Index.cshtml, kao što je prikazano u.

Ispis 2-9: Dodavanje veze za RSVP obrazac

@( Izgled = null; )

Html.ActionLink je pomoćna metoda HTML. MVC Framework dizajniran je sa skupom ugrađenih pomoćnih metoda koje su prikladne za HTML obrada veze, unose teksta, potvrdne okvire, odabire, pa čak i korisničke kontrole. Metoda ActionLink uzima dva parametra: prvi je tekst koji se prikazuje u vezi, a drugi je radnja koja se izvodi kada korisnik klikne na vezu. Objasnit ćemo potporu HTML metode u poglavljima 19-21. Prikazana je veza koju smo dodali.

Slika 2-13: Dodajte vezu na prikaz

Ako zadržite pokazivač iznad poveznice u svom pregledniku, vidjet ćete da poveznica upućuje na http://vašserver/Home/RsvpForm. Metoda Html.ActionLink provjerila je konfiguraciju URL-a naše aplikacije i utvrdila da je /Home/RsvpForm URL za radnju RsvpForm HomeController-a. Imajte na umu da za razliku od tradicionalnih ASP.NET aplikacija, MVC URL-ovi ne odgovaraju fizičkim datotekama. Svaka radnja ima svoj vlastiti URL, a MVC koristi ASP.NET sustav usmjeravanja za prevođenje tih URL-ova u akcije.

Stvaranje metode akcije

Ako kliknete na poveznicu, vidjet ćete grešku 404 Nije pronađeno. To je zato što još nismo izradili metodu radnje koja odgovara URL-u /Home/RsvpForm. To ćemo učiniti dodavanjem metode RsvpForm našoj klasi HomeController, kao što je prikazano u.

Ispis 2-10: Dodavanje nove metode radnje kontroleru

korištenje sustava; koristeći System.Collections.Generic; koristeći System.Linq; koristeći System.Web; koristeći System.Web.Mvc; namespace PartyInvites.Controllers ( public class HomeController: Controller ( public ViewResult Index() ( int sat = DateTime.Now.Hour; ViewBag.Greeting = sat< 12 ? "Good Morning" : "Good Afternoon"; return View(); } javni ViewResult RsvpForm() { povratak Pogled(); } } }

Dodavanje strogo tipiziranog prikaza

Želimo dodati pogled našoj akcijskoj metodi RsvpForm, ali ćemo učiniti nešto više: to jest, stvoriti snažno tipizirano izvođenje. Strogo tipizirani prikazi dizajnirani su za obradu određene vrste domene. Ako navedemo tip s kojim želimo raditi (GuestResponse u ovom primjeru), MVC pruža dodatne značajke koje nam olakšavaju stvari.

Pažnja

Provjerite je li vaš MVC projekt kompajliran prije početka. Ako ste stvorili klasu GuestResponse, ali je niste kompajlirali, MVC neće moći stvoriti striktno tipizirani prikaz za ove vrste. Za kompajliranje aplikacije odaberite Build Solution iz Visual Studio Build izbornika.

Desnom tipkom miša kliknite unutar metode radnje RsvpForm i odaberite Dodaj pogled iz skočnog izbornika za stvaranje prikaza. U dijaloškom okviru Dodavanje pogleda označite potvrdni okvir Stvori striktno tipiziran prikaz i odaberite opciju GuestResponse s padajućeg izbornika. Poništite opciju Koristi izgled ili glavnu stranicu i provjerite je li Razor odabran kao mehanizam prezentacije i je li opcija predloška skele postavljena na Prazno kao što je prikazano u .

Slika 2-14: Dodavanje strogo tipiziranog prikaza

Pritisnite gumb Dodaj i Visual Studio će kreirati nova datoteka pod nazivom RvspForm.cshtml i otvorite ga za uređivanje. Izvorni sadržaj možete vidjeti na. Kao što ste primijetili, ovo je drugačije HTML datoteka, ali sadrži izraz Razor @model. Ubrzo ćete vidjeti da je ovo ključ za jasno tipiziran prikaz i mogućnosti koje nudi.

Ispis 2-12: Početni sadržaj datoteke RsvpForm.cshtml

@model PartyInvites.Models.GuestResponse@( Izgled = null; )

Izgradnja forme

Sada kada smo stvorili striktno tipiziran prikaz, možemo izgraditi sadržaj RsvpForm.cshtml da ga pretvorimo u HTML obrazac za uređivanje GuestResponse objekata. Promijenite prikaz da odgovara.

Ispis 2-13: Stvaranje predaje obrasca

@using(Html.BeginForm()) {

Vaše ime: @Html.TextBoxFor(x => x.Name)

Vaša e-pošta: @Html.TextBoxFor(x => x.Email)

Vaš telefon: @Html.TextBoxFor(x => x.Phone)

Hoćete li prisustvovati? @Html.DropDownListFor(x => x.WillAttend, novo ( novi SelectListItem() (Tekst = "Da, bit ću tamo", vrijednost = bool.TrueString), new SelectListItem() (Tekst = "Ne, ne mogu doći", vrijednost = bool.FalseString) ), "Odaberite opciju")

}

Za svako svojstvo klase modela GuestResponse koristimo HTML pomoćnu metodu za renderiranje odgovarajuće kontrole HTML unosa. Ove metode vam omogućuju da odaberete svojstvo kojem ulazni element pripada pomoću lambda izraza, poput ovog:

@Html.TextBoxFor(x => x.Phone)

Pomoćna metoda HTML TextBoxFor generira HTML za ulazni element, postavlja parametar tipa na tekst i postavlja atribute id i name na Phone , naziv svojstva odabrane klase domene, ovako:

Ova praktična značajka radi jer je naš prikaz RsvpForm strogo tipiziran, a rekli smo MVC-u da je GuestResponse tip kojim želimo da pogled obrađuje, tako da HTML pomoćnici mogu otkriti koju vrstu podataka želimo čitati pomoću izraza @model .

Ne brinite ako niste upoznati s C# lambda izrazima. Obradit ćemo ih u 4. poglavlju, ali kao alternativu lambda izrazima, naziv svojstva tipa modela možete nazvati nizom, ovako:

@Html.TextBox("E-pošta")

Otkrili smo da nam tehnika lambda izraza pomaže u izbjegavanju pogrešaka pri upisu u nazivu svojstva tipa modela jer Visual Studio IntelliSense iskače i omogućuje nam da automatski odaberemo svojstvo, kao što je prikazano u .

Slika 2-15: Visual Studio IntelliSense za lambda izraze u HTML pomoćnicima

Još jedna zgodna pomoćna metoda je Html.BeginForm, koja generira HTML element obrasca konfiguriran za prosljeđivanje podataka natrag akcijskoj metodi. Budući da nismo proslijedili nikakve parametre pomoćnoj metodi, pretpostavlja se da želimo vratiti isti URL. Zgodan trik je umotati ga u C# using naredbu, ovako:

Tipično, kada se koristi na ovaj način, naredba using osigurava da se objekt odloži kada izađe iz opsega. Široko se koristi za povezivanje s bazom podataka, na primjer kako bi se osiguralo da se zatvori nakon što je upit dovršen. (Ova aplikacija ključna riječ korištenje se razlikuje po tome što se tiče opsega klase).

Umjesto brisanja objekta, pomoćnik HtmlBeginForm zatvara element HTML obrasca kada on izađe izvan opsega. To znači da pomoćna metoda Html.BeginForm stvara oba dijela elementa obrasca, ovako:

Ne brinite ako niste upoznati s brisanjem objekata u C#. Naš je cilj za sada pokazati kako stvoriti obrazac koristeći HTML pomoćnu metodu. Obrazac možete vidjeti u prikazu RsvpForm kada pokrenete aplikaciju i kliknete vezu RSVP Now. Prikazan je rezultat.

Slika 2-16: Pogled RspvForm

Bilješka

Ovo nije knjiga o CSS-u ili web dizajnu. Većinom ćemo stvarati primjere čiji bi se izgled mogao opisati kao zastario (iako preferiramo izraz klasični, u kojem se osjeća manje zapostavljeno). MVC prikazi generiraju vrlo čist i jednostavan HTML, a vi imate potpunu kontrolu nad rasporedom elemenata i klasama kojima pripadaju, tako da nećete imati problema s korištenjem alata za dizajn ili gotovih predložaka kako bi vaš MVC projekt izgledao lijepo.

Obrada obrazaca

Nismo rekli MVC-u što želimo učiniti kada se obrazac pošalje poslužitelju. Za sada, klikom na gumb Pošalji RSVP jednostavno uklanjate sve vrijednosti koje ste unijeli u obrazac. To je zato što se obrazac šalje natrag radnoj metodi RsvpForm u Home kontroleru, koji jednostavno govori MVC-u da ponovno obradi prikaz.

Bilješka

Mogla bi vas iznenaditi činjenica da se unos gubi kada se prikaz ponovno obradi. Ako je tako, onda ste vjerojatno razvili aplikacije koristeći ASP.NET Web Forms, koji automatski sprema podatke u ovoj situaciji. Uskoro ćemo vam pokazati kako postići isti rezultat s MVC-om.

Da bismo primili i obradili poslane podatke obrasca, učinit ćemo nešto pametno i cool. Dodat ćemo drugu akcijsku metodu RsvpForm za stvaranje sljedećeg:

• Metoda koja odgovara na HTTP GET zahtjeve: GET zahtjev je ono s čime se preglednik bavi nakon svakog klika na vezu. Ova će opcija biti odgovorna za prikazivanje početnog praznog obrasca kada prvi put netko posjeti /Home/RsvpForm .
• Metoda koja odgovara na HTTP POST zahtjeve: Prema zadanim postavkama, preglednik šalje obrasce obrađene pomoću Html.BeginForm() kao POST zahtjeve. Ova će opcija biti odgovorna za primanje poslanih podataka i odlučivanje što s njima učiniti.

Rukovanje GET i POST zahtjevima u zasebnim C# metodama pomaže u održavanju urednog koda budući da obje metode imaju različite odgovornosti. Obje akcijske metode poziva isti URL, ali MVC osigurava pozivanje odgovarajuće metode ovisno o tome imamo li posla s GET ili POST zahtjevom. B prikazuje promjene koje trebamo napraviti u klasi HomeController.

Ispis 2-14: Dodavanje metode radnje za podršku POST zahtjevima

korištenje sustava; koristeći System.Collections.Generic; koristeći System.Linq; koristeći System.Web; koristeći System.Web.Mvc; koristeći PartyInvites.Models; namespace PartyInvites.Controllers ( public class HomeController: Controller ( public ViewResult Index() ( int sat = DateTime.Now.Hour; ViewBag.Greeting = sat< 12 ? "Good Morning" : "Good Afternoon"; return View(); } public ViewResult RsvpForm() ( return View(); ) public ViewResult RsvpForm(GuestResponse guestResponse) { // TODO: odgovor e-poštom organizatoru zabave return View("Hvala", guestResponse); } } }

Dodali smo HttpGet atribut našoj postojećoj akcijskoj metodi RsvpForm. Ovo govori MVC-u da se ova metoda treba koristiti samo za GET zahtjeve. Zatim smo dodali preopterećenje RsvpForma koji uzima parametar GuestResponse i primjenjuje atribut HttpPost. Atribut to govori MVC-u nova metoda bavit će se POST zahtjevima. Imajte na umu da smo također uvezli imenski prostor PartyInvites.Models - na ovaj način se možemo pozvati na tip modela GuestResponse bez potrebe za navođenjem naziva klase. U sljedećim odjeljcima objasnit ćemo kako funkcioniraju naši dodaci za popise.

Korištenje povezivanja podataka modela

Prva varijanta preopterećenja metode akcije RsvpForm obrađuje isti pogled kao i prije. Generira obrazac prikazan u . Druga opcija preopterećene metode zanimljivija je zbog parametra, ali s obzirom na to da će se radnja metoda pozvati kao odgovor na HTTP POST zahtjev i da je GuestResponse vrsta C# klase, kako se kombiniraju?

Odgovor je vezanje podataka modela– Izuzetno korisna MVC funkcionalnost gdje se ulazni podaci analiziraju i parovi ključ/vrijednost u HTTP zahtjevu koriste za popunjavanje svojstava tipa modela domene. Ovaj proces je suprotan korištenju HTML pomoćnika; Tada smo, prilikom kreiranja podataka obrasca za slanje klijentu, generirali HTML ulazne elemente, gdje su vrijednosti atributa id i name dobivene iz naziva svojstava klase modela.

Nasuprot tome, kod povezivanja podataka modela, nazivi ulaznih elemenata koriste se za određivanje vrijednosti svojstava u instanci klase modela, koje se zatim prosljeđuju našoj akcijskoj metodi omogućenoj za POST.

Model predstavljanja podataka moćna je i prilagodljiva značajka koja eliminira gnjavažu izravnog rada s HTTP zahtjevima i omogućuje nam rad s C# objektima umjesto da se bavimo vrijednostima Request.Form i Request.QueryString. Objekt GuestResponse koji se prosljeđuje kao parametar našoj akcijskoj metodi automatski se popunjava podacima iz polja obrasca. Detaljno ćemo pogledati model predstavljanja podataka, uključujući kako se može prilagoditi, u poglavlju 22.

Rukovanje drugim pogledima

Druga varijanta preopterećenja metode akcije RsvpForm također pokazuje kako možemo reći MVC-u da obradi određeni pogled, umjesto zadanog prikaza, kao odgovor na zahtjev. Evo odgovarajućeg izraza:

return View("Hvala", guestResponse);

Ovaj poziv View metodi govori MVC-u da pronađe i obradi pogled, koji se zove Thanks, i proslijedi naš GuestResponse objekt pregledu. Da biste stvorili pogled koji smo naveli, desnom tipkom miša kliknite unutar jedne od metoda HomeControllera i odaberite Dodaj prikaz iz skočnog izbornika. Postavite naziv pogleda na Hvala kao što je prikazano u .

Slika 2-17: Dodavanje prikaza zahvale

Stvorit ćemo još jedan striktno tipizirani prikaz, pa označite taj okvir u dijaloškom okviru Dodaj prikaz. Klasa podataka koju odaberemo za ovaj pogled mora odgovarati klasi koju smo proslijedili pregledu pomoću metode Pogled. Stoga provjerite je li GuestResponse odabran u padajućem izborniku. Provjerite je li opcija Use a layout or master page poništena, View engine postavljen na Razor, a Scaffold template na Empty.

Pritisnite gumb Dodaj za stvaranje novog prikaza. Budući da je pogled povezan s Home kontrolerom, MVC će stvoriti pogled kao ~/Views/Home/Thanks.cshtml. Promijenite novi prikaz kako bi odgovarao: Istaknuli smo što treba dodati.

Ispis 2-15: Pogledaj Hvala

@model PartyInvites.Models.GuestResponse @( Layout = null; )

Pogled Thanks koristi Razor za prikaz sadržaja na temelju vrijednosti svojstva GuestResponse koje smo proslijedili metodi View u metodi akcije RsvpForm. Operator Razor @model navodi tip modela domene s kojim je pogled povezan. Za pristup vrijednosti svojstva objekta domene koristimo Model. PropertyName. Na primjer, da bismo dobili vrijednost svojstva Name, pozivamo Model.Name. Ne brinite ako ne razumijete sintaksu Razora, detaljno ćemo je objasniti u 5. poglavlju.

Sada kada smo izradili prikaz Hvala, imamo osnovni radni primjer obrade obrazaca pomoću MVC-a.

Pokrenite aplikaciju u Visual Studio, kliknite na link RSVP Now, dodajte podatke u obrazac i kliknite na gumb Submit RSVP. Vidjet ćete rezultat prikazan u (iako se može razlikovati ako se ne zovete Joe i rekli ste da ne možete prisustvovati).

Slika 2-18: Obrađeni prikaz Hvala

Dodavanje provjere valjanosti

Sada smo spremni dodati potvrdu našoj aplikaciji. Da to ne učinimo, naši bi korisnici mogli unijeti besmislene podatke ili čak poslati prazan obrazac.

U MVC aplikaciji provjera valjanosti obično se primjenjuje na model domene, a ne na korisničko sučelje. To znači da definiramo svoje kriterije provjere valjanosti na jednom mjestu i oni stupaju na snagu bilo gdje u klasi modela koja se koristi. ASP.NET MVC podržava pravila provjere valjanosti definirana atributima u prostoru imena System.ComponentModel.DataAnnotations. Pokazuje kako se ti atributi mogu primijeniti na klasu modela GuestResponse.

Ispis 2-16: Primjena provjere valjanosti na klasu modela GuestResponse

using System.ComponentModel.DataAnnotations; prostor imena PartyInvites.Models ( javna klasa GuestResponse ( ime javnog niza ( get; set; ) javni niz e-pošte ( dobiti; postaviti; ) javni niz Telefon ( dobiti; postaviti; ) javni bool? WillAttend(get;set;)))

Pravila provjere valjanosti prikazana su podebljano. MVC automatski otkriva atribute i koristi ih za provjeru valjanosti podataka tijekom prezentacije modela podataka. Imajte na umu da smo uvezli prostor naziva koji sadrži pravila provjere valjanosti, tako da ih možemo referencirati bez potrebe za navođenjem njihovih imena.

Savjet

Kao što je ranije navedeno, koristili smo tip bool? za svojstvo WillAttend, tako da smo mogli primijeniti atribut Obavezna provjera valjanosti. Ako bismo koristili obični bool, vrijednost koju bismo mogli dobiti zahvaljujući podatkovnom modelu mogla bi biti samo true ili false i ne bismo mogli reći je li korisnik odabrao vrijednost. Upišite bool? ima tri moguće vrijednosti: true, false i null. nulta vrijednost koristit će se ako korisnik nije odabrao vrijednost, a to uzrokuje da atribut Obavezno prijavi pogrešku provjere valjanosti.

Možemo provjeriti je li došlo do pogreške provjere pomoću svojstva ModelState.IsValid u našoj klasi kontrolera. Pokazuje kako se to može učiniti u našoj akcijskoj metodi RsvpForm s podrškom za POST.

Ispis 2-17: Provjera grešaka tijekom provjere valjanosti obrasca

public ViewResult RsvpForm(GuestResponse guestResponse) ( if (ModelState.IsValid) { // TODO: odgovor e-poštom organizatoru zabave return View("Hvala", guestResponse); } drugo { // postoji pogreška provjere valjanosti povratak Pogled(); } }

Ako nema greške pri potvrdi valjanosti, kažemo MVC-u da obradi pogled zahvale kao što smo radili prije. Ako postoji pogreška provjere valjanosti, RsvpForm prikaz ponovno obrađujemo pozivanjem metode View bez parametara.

Samo prikazivanje obrasca kada postoji pogreška nije od velike pomoći, moramo korisniku dati neke informacije o tome u čemu je problem i zašto ne možemo prihvatiti njegov obrazac. To radimo pomoću pomoćne metode Html.ValidationSummary na prikazu RsvpForm, kao što je prikazano u .

Ispis 2-18: Korištenje pomoćne metode Html.ValidationSummary

@model PartyInvites.Models.GuestResponse @( Layout = null; ) @using(Html.BeginForm()) ( @Html.ValidationSummary()

Vaše ime: @Html.TextBoxFor(x => x.Name)

Vaša e-pošta: @Html.TextBoxFor(x => x.Email)

Vaš telefon: @Html.TextBoxFor(x => x.Phone)

Hoćete li prisustvovati? @Html.DropDownListFor(x =>

}

Ako nema pogrešaka, metoda Html.ValidationSummary stvara skrivenu stavku popisa kao rezervirano mjesto na obrascu. MVC čini rezervirano mjesto vidljivim i dodaje poruke o grešci definirane atributima provjere valjanosti. Možete vidjeti kako to izgleda na.

Slika 2-19: Sažetak rezultata provjere valjanosti

Korisniku se neće prikazati prikaz Hvala dok sva pravila provjere koja smo primijenili na klasu GuestResponse ne budu zadovoljena. Imajte na umu da su podaci uneseni u obrazac spremljeni i ponovno se prikazuju kada se prikaz prikaže sa sažetkom provjere valjanosti. Ovo je još jedna prednost povezivanja podataka.

Bilješka

Ako ste radili s ASP.NET Web Forms, znate da Web Forms ima koncept "kontrola poslužitelja" koje pohranjuju stanje serijaliziranjem vrijednosti u skriveno polje obrasca, __VIEWSTATE. ASP.NET MVC vezanje podataka nije vezano uz koncept Web Forms elementi poslužitelja kontrola, povrat podataka ili stanje prikaza. ASP.NET MVC ne uvodi skriveno polje __VIEWSTATE u prikazane HTML stranice.

Označavanje nevažećih polja

HTML pomoćne metode koje stvaraju tekstualna polja, padajuće popise i druge elemente imaju vrlo praktičnu značajku koja se može koristiti zajedno s uvezivanjem podataka. Isti mehanizam koji pohranjuje korisnički unos u obrazac također se može koristiti za označavanje pojedinačnih polja koja ne prođu provjeru valjanosti.

Ako svojstvo klase modela nije potvrđeno, HTML pomoćne metode će generirati malo drugačiji HTML. Kao primjer, ovdje je HTML koji generira poziv za Html.TextBoxFor (x => x.Name) kada nema pogreške provjere:

A ovdje je HTML koji generira isti poziv kada korisnik nije dao vrijednost (što je pogreška provjere jer smo primijenili atribut Required svojstva Name u klasi modela GuestResponse):

class="input-validation-error" data-val="true" data-val-required="Molimo unesite svoje ime" id="Ime" name="Ime" type="text" value="" />

Naglasili smo razlike. Ova pomoćna metoda je dodala klasu pod nazivom input-validation-error. Ovu značajku možemo iskoristiti stvaranjem tablice CSS stilovi, koji sadrži stilove za ovu klasu i druge koje koriste različite HTML pomoćne metode.

Konvencija u MVC projektima je da se statični sadržaj, kao što su CSS stilske tablice, stavlja u mapu pod nazivom Sadržaj. Stvorili smo mapu Content desnim klikom na projekt PartyInvites u Solution Exploreru i odabirom Add New Folder iz skočnog izbornika. Stvorili smo stilsku tablicu desnim klikom na mapu Sadržaj, odabirom Dodaj novu stavku, a zatim odabirom Stilske tablice u dijaloškom okviru Dodaj novu stavku. Našu tablicu stilova nazvali smo Site.css, što je naziv koji Visual Studio koristi pri izradi projekta koristeći MVC predložak koji nije Empty. Možete pogledati sadržaj datoteke Content/Site.css.

Ispis 2-19: Sadržaj datoteke Content/Site.css

.field-validation-error (color: #f00;) .field-validation-valid ( display: none;).input-validation-error (border: 1px solid #f00; background-color: #fee;) .validation- sažetak-pogreški (težina-fonta: podebljano; boja: #f00;).validation-summary-valid (prikaz: nijedan;)

Da bismo koristili ovaj list stilova, dodali smo novu poveznicu u odjeljak zaglavlja pogleda RsvpForm, kao što je prikazano u . Elemente veze dodajete u prikaze baš kao što biste dodali u običnu statičnu HTML datoteku.

Ispis 2-20: Dodavanje elementa veze u prikaz RsvpForm

@model PartyInvites.Models.GuestResponse @( Layout = null; ) @using (Html.BeginForm()) ( @Html.ValidationSummary()

Vaše ime: @Html.TextBoxFor(x => x.Name)

Vaša e-pošta: @Html.TextBoxFor(x => x.Email)

Vaš telefon: @Html.TextBoxFor(x => x.Phone)

Hoćete li prisustvovati? @Html.DropDownListFor(x => x.WillAttend, new ( new SelectListItem() (Text = "Da, bit ću tamo", Value = bool.TrueString), new SelectListItem() (Text = "Ne, mogu "t come", Value = bool.FalseString) ), "Odaberite opciju")

}

Savjet

Ako ste koristili MVC 3, mogli biste očekivati ​​da dodamo CSS datoteku u prikaz navodeći atribut href kao @Href("~/Content/Site.css") ili @Url.Content("~/Content/Site .css" ). Uz MVC 4, Razor automatski otkriva atribute koji počinju s ~/ i automatski umeće @Href ili @Url umjesto vas.

Sada će se prikazati vizualno očitija pogreška provjere valjanosti ako su podaci koji su uzrokovali pogrešku predstavljeni, kao što je prikazano u .

Slika 2-20: Automatski istaknute pogreške provjere valjanosti

Dovršimo primjer

Posljednji uvjet za naš primjer aplikacije je slanje e-pošte s ispunjenim RSVP-ovima našem prijatelju, organizatoru zabave. To bismo mogli učiniti dodavanjem metode akcije za stvaranje i slanje poruke e-pošte pomoću klasa e-pošte .NET Framework. Umjesto toga koristit ćemo pomoćnu metodu WebMaila. Ovo je izvan opsega MVC-a, ali će nam omogućiti da dovršimo ovaj primjer bez da se zaglavimo u detaljima stvaranja drugih pošiljatelja e-pošte.

Bilješka

Koristili smo pomoćnu metodu WebMail jer nam omogućuje demonstraciju slanja poruka e-pošte uz minimalan napor. Međutim, u normalnoj situaciji radije bismo ovu funkciju prenijeli na akcijsku metodu. Objasnit ćemo zašto kada budemo opisivali arhitektonski MVC obrazac u 3. poglavlju.

Želimo da se e-poruka pošalje kada obradimo prikaz zahvale. B pokazuje promjene koje trebamo napraviti.

Ispis 2-21: Korištenje metode WebMail Helper

@model PartyInvites.Models.GuestResponse @( Layout = null; ) @{ probati { WebMail.SmtpServer = "smtp.example.com"; WebMail.SmtpPort = 587; WebMail.EnableSsl = istina; WebMail.UserName = "mySmtpUsername"; WebMail.Password = "mySmtpPassword"; WebMail.From = " [e-mail zaštićen]"; WebMail.Send(" [e-mail zaštićen]", "Obavijest o odgovoru na poziv", Model.Name + " je " + ((Model.WillAttend ?? false) ? "" : "ne") + "prisustvuje"); } uhvatiti (iznimka) { @:Nažalost, nismo mogli poslati e-poruku za potvrdu vašeg odgovora. } }

Dodali smo Razor izraz koji koristi pomoćnu metodu WebMaila za konfiguriranje informacija o našem poslužitelju e-pošte, uključujući naziv poslužitelja, zahtijeva li poslužitelj SSL vezu i informacije o računu. Nakon što sve postavimo, koristimo metodu WebMail.Send za slanje e-pošte.

Uključili smo sav kôd e-pošte u blok try...catch kako bismo mogli upozoriti korisnika ako e-poruka nije poslana. To činimo dodavanjem tekstualnog bloka izlazu pogleda Hvala. Bilo bi bolje prikazati zasebna prezentacija pogreške ako se e-pošta ne može poslati, ali htjeli smo to učiniti jednostavnim s našom prvom MVC aplikacijom.

Mnoga web-mjesta uključuju sadržaj koji je dostupan samo osobama koje su se prijavile (to jest, koje su autentificirane). Prema zadanim postavkama, ASP.NET nudi predloške projekta web-mjesta koji uključuju stranice koje vam omogućuju izvršavanje zadataka provjere autentičnosti.

Predložak ASP.NET web projekta koji je ilustriran u ovom vodiču je nov u Visual Studio 2010.

Ovaj vodič vam pokazuje kako koristiti predložak ASP.NET web projekta za stvaranje web stranice s osnovnom funkcijom prijave.

Zadaci ilustrirani u ovom vodiču uključuju:

Izrada ASP.NET web stranice.

Izrada stranice samo za članove. Stranica će biti dostupna samo autentificiranim korisnicima (korisnicima koji su prijavljeni).

Korištenje stranice za registraciju, koja korisnicima omogućuje registraciju i stvaranje novog računa.

Prijava i pristup informacijama koje su dostupne samo autentificiranim korisnicima.

Korištenje stranice za promjenu lozinke koja korisnicima koji imaju račun omogućuje promjenu lozinke.

Učiniti stranicu za promjenu lozinke dostupnom autentificiranim korisnicima (ali samo autentificiranim korisnicima).

Preduvjeti

Da biste dovršili ovaj korak, trebat će vam:

Microsoft Visual Web programer 2010 Express ili Visual Studio 2010.

SQL Server Express instaliran lokalno na vašem računalu. Za informacije o tome kako instalirati SQL Server Express, pogledajte Kako: povezati se s bazom podataka AdventureWorksLT pomoću .MDF datoteke.

Izrada novog projekta web stranice

Počet ćete stvaranjem novog projekta ASP.NET web stranice. Predložak projekta koji koristite uključuje mnoge elemente koji su potrebni za stvaranje stranice koja podržava provjeru autentičnosti.

Ovaj vodič koristi projekt web stranice. Umjesto toga možete koristiti projekt web aplikacije. Za informacije o razlici između ovih tipova web-projekata, pogledajte Projekti web-aplikacija u odnosu na projekte web-mjesta.

Za izradu novog ASP.NET web mjesta

Pokrenite Visual Studio ili Visual Web Developer.

u Datoteka izbornik, kliknite Nova web stranica. (Ako ne vidite ovu opciju, kliknite Novi, a zatim kliknite Web stranica.)

The Nova web stranica prikazuje se dijaloški okvir.

Pod, ispod Instalirani predlošci, kliknite Visual Basic ili C# a zatim odaberite ASP.NET web mjesto.

u Web lokacija okvir, odaberite Sustav datoteka i unesite naziv mape u kojoj želite držati stranice web stranice. Na primjer, unesite naziv mape C:\Websites\Login i zatim kliknite u redu.

Visual Studio stvara mapu i otvara web stranicu u njoj Izvor pogled. Primijetite da korijensko web mjesto sadrži nekoliko datoteka i mapa uključujući mapu računa, datoteku Web.config, stranice About.aspx i Default.aspx i glavnu stranicu Site.master.

Početna stranica web stranice prikazuje se u pregledniku. Obratite pažnju na stavke izbornika ( Dom, Oko) i Prijaviti se hipervezu.

Zatvorite preglednik.

Stvaranje stranice samo za članove

U ovom odjeljku izradit ćete stranicu samo za članove. Ovoj stranici mogu pristupiti samo korisnici koji su prijavljeni (autorizirani korisnici). Dodat ćete kontrolu glavnoj stranici za preusmjeravanje autentificiranih korisnika na stranicu samo za članove. Kada korisnici koji nisu prijavljeni (anonimni korisnici) kliknu hipervezu samo za članove, bit će preusmjereni na stranicu za prijavu gdje se mogu prijaviti ili stvoriti račun.

Za izradu stranice samo za članove

U Istraživač rješenja, desnom tipkom miša kliknite mapu Račun, a zatim kliknite Dodaj novu stavku.

Provjerite stvarate li novu stranicu u mapi računa.

u Nove web stranice dijaloški okvir, odaberite Web obrazac.

u Ime tekstni okvir unesite MembersOnly.aspx.

Odaberite Odaberite glavnu stranicu potvrdni okvir, a zatim kliknite Dodati.

The Odaberite glavnu stranicu prikazuje se dijaloški okvir.

Pod, ispod Sadržaj mapa,Izaberi Site.master a zatim kliknite u redu.

Stranica MembersOnly.aspx kreira se u mapi Račun. Stranica je stranica sadržaja za stranicu Site.master.

U Istraživač rješenja, dvaput kliknite stranicu MemberOnly.aspx da biste je otvorili, a zatim prijeđite na Oblikovati pogled.

Dodajte sadržaj na glavnu stranicu.

Na primjer, možete dodati "Dobro došli na stranicu samo za članove. Uspješno ste se prijavili."

Osim stranice koju ste izradili, mapa računa sadrži sljedeće stranice i datoteke:

Registriraj se.aspx. Ova stranica omogućuje novim korisnicima stvaranje računa.

Stranica Login.aspx. Ovo traži korisničko ime i lozinku.

Promijeni lozinku.aspx. Ova stranica omogućuje registriranim korisnicima promjenu lozinke.

ChangePasswordSuccess.aspx. Ova stranica se prikazuje kada korisnici uspješno promijene svoju lozinku.

Datoteka Web.config.

Prema zadanim postavkama, stranice u mapi računa nisu dostupne anonimnim korisnicima, osim stranica Register.aspx i Login.aspx. Postavke koje definiraju pristup stranicama u mapi Račun konfigurirane su u datoteci Web.config u toj mapi. Postavke koje definiraju pristup stranici za prijavu konfigurirane su u korijenskoj datoteci Web.config.

u Svojstva Windows, promijenite svojstvo Text u Change Password. Možete prihvatiti zadani ID.

u Svojstva prozor, kliknite NavigateUrl i kliknite na elipsu ( ... ) dugme.

The Odaberite URL prikazuje se dijaloški okvir.

Pod, ispod Projektne mape, kliknite Račun.

Pod, ispod Sadržaj mape u redu.

Pritisnite CTRL+F5 za pokretanje stranice.

Primijetite da je Promjena lozinke link je dostupan kada niste prijavljeni.

Klik Promjena lozinke.

Preusmjereni ste na stranicu za prijavu jer stranica za promjenu lozinke dostupna je samo autentificiranim korisnicima.

Unesite korisničko ime i lozinku koje ste prethodno stvorili, a zatim kliknite Prijaviti se.

Klik Odjavite se.

Kada se vratite na početnu stranicu, zatvorite preglednik.

Zatim ćete izmijeniti Promjena lozinke hipervezu kako bi bila dostupna samo korisnicima koji su prijavljeni. To možete učiniti dodavanjem hiperveze u kontrolu HeadLoginView na glavnoj stranici.

Da link za promjenu lozinke bude dostupan samo prijavljenim korisnicima

U Istraživač rješenja, dvaput kliknite na Site.master.aspx da biste ga otvorili, a zatim prijeđite na Oblikovati pogled.

Izbriši Promjena lozinke hipervezu koju ste ranije stvorili.

Prebaciti na Izvor pogled.

Od Standardčvor od Kutija s alatima, povucite kontrolu u element LoggedInTemplate koji se nalazi unutar kontrole LoginView.

Svojstvo Text postavite na Change Password.

Nakon atributa runat="server" upišite "NavigateUrl=" i zatim dvaput kliknite Odaberite URL... sa skočnog popisa.

The Odaberite stavku projekta prikazuje se dijaloški okvir.

Pod, ispod Projektne mape, kliknite Račun.

Pod, ispod Mapa sadržaja, odaberite ChangePassword.aspx i zatim kliknite u redu.

Oznaka za hipervezu sličit će sljedećem:

Promjena lozinke

Imajte na umu da ova hiperveza neće biti vidljiva u Oblikovati prikaz, jer sadržaj elementa LoggedInTemplate nije vidljiv prema zadanim postavkama.

Testiranje web stranice

Sada možete testirati funkciju promjene lozinke web stranice.

Za testiranje stranice za promjenu lozinke

Pritisnite CTRL+F5 za pokretanje stranice.

Prikazuje se početna stranica, ali Promijeniti tvoja lozinka poveznica nije vidljiva.

Klik Prijaviti se i unesite svoje korisničko ime i lozinku.

Preusmjereni ste na početnu stranicu. Primijetite da su vaše ime i promjeni lozinku poveznice su sada vidljive.

Klik Samo za članove.

Preusmjereni ste na stranicu samo za članove.

Klik promjeni lozinku.

Prikazuje se stranica za promjenu lozinke.

Upiši novu lozinku.

Klik Promjena lozinke. Ako je promjena uspješna, prikazat će se uspješna stranica.

Testiranje nove lozinke

Zatim ćete koristiti svoju novu lozinku za ponovnu prijavu i pristup stranici samo za članove.

Za testiranje nove lozinke

Klik Odjavite se. Bit ćete preusmjereni na početnu stranicu koju vide anonimni korisnici.

Klik Prijaviti se.

Unesite svoje korisničko ime i novo lozinka i zatim kliknite Prijaviti se.

Preusmjereni ste na početnu stranicu. Sada možete pristupiti sadržaju koji je dostupan autentificiranim korisnicima. .

Klik Samo za članove.

Preusmjereni ste na stranicu samo za članove. Ako se pokušate prijaviti sa starom lozinkom, provjera autentičnosti neće uspjeti.

Zatvorite preglednik.

Sljedeći koraci

U ovom ste vodiču koristili stranice koje su dio predloška projekta web-mjesta ASP.NET kako biste stvorili web-mjesto koje provjerava autentičnost korisnika. Ako želite, također možete izraditi vlastite stranice za prijavu kako biste pružili istu funkcionalnost koja je ilustrirana u uputama. Za više informacija pogledajte.

Danas želim dati 10 dobrih razloga zašto ASP.NET za početnike najprimjereniji:

Ako već radite s PHP-om ili Javom (ili čak .NETO), ili samo želite razumjeti kako izraditi web aplikacije, preporučujem vam da razmislite o ASP.NET-u.

1. Nedostatak System.Web

Za nas, korisnike WebForma, ne možemo bez njega pri izradi web aplikacija. Ako se odlučite prijeći na ASP.NET MVC Core 1.0, on eliminira interakciju s bibliotekom System.Web, što vam omogućuje da ubrzate učitavanje i rad stranice temeljene na ASP.NET.

2. Novi i poboljšani model 2016

ASP.NET MVC 4 za početnike i ASP.NET MVC 5 su pali u zaborav... Prije nekog vremena .NET je u potpunosti prepisan i preimenovan u ASP.NET Core 1.0. To je programerima dodatno olakšalo život. Faza kompilacije bila je isključena iz uobičajenog ciklusa pisanja koda, kompajliranja i testiranja funkcionalnosti. To značajno ubrzava razvojni proces.

3. Prirodniji osjećaj

Bio sam razvojni programer u Microsoftu još od vremena Classic ASP-a, a kada sam prešao na WebForms, prijelaz se uopće nije činio prirodnim. Pojavom MVC-a proces razvoja web aplikacija postao je prirodniji i svidio mi se takav format rada. MVC nema ViewState ili IsPostback i ne morate stalno brinuti o njima. Sve je vrlo slično PHP-u.

4. Najpopularniji u školi

Budući da se ASP.NET temelji na IIS-u, jednom od najpopularnijih web poslužitelja, rad s MVC-om čini se prilično poznatim. Većina korporacija u doba klasičnog ASP-a započela je s IIS-om. Danas IIS poslužitelji zauzimaju 28% cjelokupnog interneta i drugi su po popularnosti nakon Apachea i nginxa.

5. Pojednostavljena Javascript integracija

U WebForms-u, pri pokušaju korištenja Javascripta, mogu se pojaviti svakakvi problemi kojih mnogi od nas nisu ni svjesni. Vidio sam kako se programeri muče s JavaScript integracija u kod WebForm Page_Load! S druge strane, ASP.NET MVC za početnike omogućuje gotovo besprijekornu integraciju Javascripta u aplikacije. Samo pokušajte implementirati AngularJs u neku WebForms web aplikaciju i onda mi recite koliko vam je dlaka ostalo na glavi.

6. Otvoreni kod

Sada svi mogu vidjeti kod! Ako želite proširiti View i izraditi vlastiti ViewEngine, samo pogledajte kod na Githubu i pogledajte kako je implementiran. Pristup izvornom kodu potiče maštu!

7. Podrška za više platformi

Sada možete kreirati web aplikacije na bilo kojoj platformi: Apple, Linux ili Windows.

8. Visual Studio neovisno

Gotovo od trenutka prvog spominjanja izdanja ažuriranog .NET/ASP.NET-a, sve vrste programera ( uključujući Microsoft) počeli su stvarati vlastite IDE-ove koji otkrivaju mogućnosti nova verzija.NETO Takvi IDE-ovi (Visual Studio Code ili Rider in #C od JetBrains) omogućuju vam da razvijete svoje vlastite ASP.NET i C# projekte bez Visual Studija. Sada nije toliko važno kakvo okruženje programer koristi, jer klijenti trebaju samo gotovu web stranicu!

9. Adekvatna zajednica

ASP.NET MVC je povjetarac za početnike i većinu web programera svježi zrak. Ovaj alat vodi nas do nova era, daleko od WebFormsa. Značajan dio programera već je prešao na MVC.

10. Jedinično testiranje

Osim toga, ASP.NET MVC pruža mogućnosti testiranja jedinice. Ovo uvelike pojednostavljuje proces testiranja. Za neke WebForm programere, ovo će se činiti kao potpuno novi koncept, budući da je testiranje nekih sučelja i poslovnih komponenti prije stvaralo velike probleme. Uz ASP.NET MVC možete jednostavno testirati sve komponente i osigurati da vaša aplikacija potpuno funkcionira.

U zaključku

Nadam se da ste danas stekli dovoljno informacija o kvalitetama ASP.NET MVC-a zbog kojih vrijedi prijeći na ovaj alat.

Prijevod članka “ 10 razloga da počnete koristiti ASP.NET MVC” pripremio je ljubazni projektni tim.

Dobar loš

Zadnja izmjena: 31.10.2015

ASP.NET MVC je platforma za izradu web stranica i web aplikacija pomoću uzorka MVC (model – pogled – kontroler).

Rad na novoj platformi započeo je 2007. godine, a prva verzija pojavila se 2009. godine. Kao rezultat toga, do sada (2012.) već su objavljene 4 verzije platforme, a sam framework je stekao veliku popularnost diljem svijeta zbog svoje fleksibilnosti i prilagodljivosti.

Osnovni MVC uzorak nova platforma, podrazumijeva interakciju triju komponenti: upravljača (controller), modela (modela) i prezentacije (view). Što te komponente predstavljaju?

Kontroler predstavlja klasu od koje zapravo počinje aplikacija. Ova klasa osigurava vezu između modela i pogleda. Primajući korisnički unos, kontroler na temelju interne logike, ako je potrebno, pristupa modelu i generira odgovarajući prikaz.

Pogled je stvarni vizualni dio odn korisničko sučelje aplikacije - na primjer, html stranica putem koje korisnik koji posjećuje web mjesto komunicira s web aplikacijom.

Model predstavlja skup klasa koje opisuju logiku korištenih podataka.

Opća shema interakcije može se pojednostaviti na sljedeći način:

ASP.NET MVC i ASP.NET web obrasci

ASP.NET MVC je na neki način konkurent tradicionalnim web obrascima i ima sljedeće prednosti u odnosu na njih:

Dijeljenje odgovornosti. U MVC-u, aplikacija se sastoji od tri dijela: kontrolera, pogleda i modela, od kojih svaki obavlja svoje specifične funkcije. Kao rezultat toga, aplikaciju će biti lakše održavati i mijenjati u budućnosti.

Zbog razdvajanja odgovornosti, mvc aplikacije imaju bolja provjerljivost. I možemo testirati pojedinačne komponente neovisno jedna o drugoj.

Dopisivanje HTTP protokol . MVC aplikacije, za razliku od web obrazaca, ne podržavaju objekte stanja (ViewState). Jasnoća i jednostavnost platforme omogućuje vam postizanje više kontrole radeći na aplikaciji

Fleksibilnost. Različite komponente platforme možete prilagoditi po želji. Promijenite bilo koji dio MVC cjevovoda ili ga prilagodite svojim potrebama i zahtjevima.

U isto vrijeme, ne biste trebali potpuno zanemariti ASP.NET WebForms. Jer i on ima svoje prednosti, na primjer, model događaja, koji će biti bliži onim programerima koji su se prije bavili izradom klijentskih aplikacija.

S tradicionalnim web obrascima imate kontrolu nad oznakama i možete, u stvarnom vremenu, vizualni urednik Visual Studio da vidite kako će određena stranica izgledati. Kada radite s MVC-om, Visual Studio vam to ne dopušta.

U svakom slučaju, slobodni ste odabrati platformu koja vam najviše odgovara. A ako ste pisali velike projekte koristeći tradicionalne web obrasce, možda bi bilo vrijedno nastaviti raditi s njima. Štoviše, ASP.NET Web Forms još ne umire i nastavlja se razvijati.