Lucrarea 1 – Medii avansate 2012

ASP MVC 3 ASP MVC 3 este un framework destinat dezvoltării aplicaţiilor web propus de Microsoft şi integrat în pachetul Microsoft Visual Studio 2010 care combină eficacitatea şi stilul organizat de programare ce caracterizează arhitecturile Model-View-Controller. Este o variantă îmbunătăţită a MVC 2. Câteva dintre avantajele pe care ASP MVC le aduce în comparaţie cu ASP Web Forms sunt:

Permite dezvoltarea aplicaţiilor web prin metode AGILE şi Test-Driven Development; Furnizează instrumente care permit Unit Testing; Utilizarea pattern-ului MVC în aplicaţiile web organizează foarte bine codul pe cele trei nivele ale

arhitecturii: View (user interface), Controllers(user actions), Models(structuri de date); Impune un anumit ciclu de execuţie a fiecarei funcţionalităţi: utilizatorul face o acţiune iar ca şi

răspuns la această acţiune, aplicaţia schimbă starea modelelor de date şi serveşte un view updatat cu rezultatele cerute de utilizator;

Extensibilitate uşoară – dacă design patternul este respectat întreţinerea şi dezvoltarea unei aplicaţii MVC este foarte uşoară şi se face cu modificări minime în codul existent;

Control asupra HTML şi HTTP – reducerea considerabilă a cantităţii de cod HTML prin utilizarea unor HTML Helpere (ex. Html.TextBox, Html.TextBoxFor) care în special în cadrul formularelor web fac legarea automată a câmpurilor din formular cu atributul modelului corespondent; Control uşor şi eficient a traficului prin HTTP la nivel de controller prin utilizarea unor directive (ex. [HttpPost], [HttpRequest]);

Securitate îmbunătăţită şi sistem de autenticare la nivel de controller şi la nivel de acţiune bazat pe utilizatori şi roluri, extensibil şi customizabil;

Testare şi debugging uşor, posibilităţi de testare automată; Integrarea perfectă cu CSS, Javascript, JSON, Ajax, Jquery; Manipulare uşoară a request-urilor şi

a postback-urilor prin ajax; Sistem de rutare robust şi SEO Friendly: in loc de

www.domeniu.com/articole.aspx?cat=2&idart=213&pag=12 => www.domeniu.com/articole/categoria_2/articolul_213/pag_12 prin simpla specificare a unor reguli de rutare;

Validarea uşoară a datelor introduse de utilizator prin ajax la nivel de server validarea modelelor

Specific MVC 3 este noul motor de interpretare şi redarea interfeţei cu utilizatorul;

Lucrarea 1 – Medii avansate 2012 Hello World from ASP MVC 3

1. Vom lucra în Microsoft Visual Web Developer 2010 ce poate fi descărcat gratuit de aici: http://www.microsoft.com/web/gallery/install.aspx?appid=VWD2010SP1AzurePack

2. Se vor parcurge aspectele esenţiale legate de dezvoltarea aplicaţiilor web utilizând această platformă prin construirea sistematică a unui proiect;

3. Deschideţi Microsoft Visual Web Developer 2010, File>New Project; în stânga alegeţi Visual C#>Web – ASP.NET MVC 3 Web Application; Apoi setati numele proiectului si calea pe disc;

4. Apare fereastra de alegere a unui template de proiect, unde alegem Internet Application cu View Engine Razor.

5. Noul proiect este creat iar in Solution Explorer este creata structura generala a unui astfel de proiect pe care o vom analiza in cele ce urmeaza.

Observatii: a) Observam anumite conventii de nume legate de numele de clase si fisiere ce contin aceste clase: clase controller au in denumire sufixul –Controller similar si clasele model au in denumire sufixul -Models; b) Este indicat ca modelele si controllerele sa fie definite cate una pe fisier iar fisierul sa aiba aceiasi denumire cu clasa;

Lucrarea 1 – Medii avansate 2012 c) Fiecarui director din structura unei aplicatii MVC ii corespunde un namespace: Models –projectname.Models, Controllers – projectname.Controllers,. d) Programatorul poate sa mai adauge directoare noi in functie de nevoi creand implicit si namespace-uri noi corespunzatoare directoarelor noi create; e) Orice proiect MVC trebuie sa aiba in mod obligatoriu controllerul Home care va fi punctul de start al oricarei aplicatii web ASP MVC; f) Fiecare Controller trebuie sa aiba actiunea Index; g) Se observa si corespondenta logica dintre denumirea subdirectoarelor folderului Views si denumirea claselor Controller; Fiecarei clase controller i se creaza un director cu acelasi nume ca si al controllerului unde se vor salva toate view-urile gestionate de actiunile controllerului respectiv; Exceptie face folderul Shared care contine elemente comune tuturor View-urilor aspecte ce vor fi discutate mai tarziu; h) Controllerul Account vine o data cu template-ul proiectului si se refera la framework-ul de login al utilizatorilor;

Pentru a continua exemplul nostru Hello World:

5. Cream un nou model prin click dreapta pe directorul Models>Add>Class clasa pe care o denumim “HelloModel.cs” 6. In clasa HelloModel scriem urmatorul cod:

public class HelloModel { public string nume; public HelloModel() { //constructorul implicit al clasei model } public HelloModel(string name) //constructor supraincarcat { nume = name; } public string SayHelloWorld() //functioneaza indiferent de constructorul utilizat { return "Hello World!"; } public string SayHello() //necesita instantierea clasei utilizand constructorul supraincarcat { return "Hello "+ nume; } }

Lucrarea 1 – Medii avansate 2012 7. In clasa controller HomeController pe langa codul implicit adaugat de mediul de dezvoltare adaugam o actiune noua “Helloworld”:

public class HomeController : Controller { public ActionResult Index() { ViewBag.Message = "Welcome to ASP.NET MVC!"; return View(); } public ActionResult About() { return View(); } public ActionResult HelloWorld() { //instantiem modelul Models.HelloModel model = new Models.HelloModel(); //punem in ViewData mesajul pe care vrem sa il afisam ViewData["msg"] = model.SayHelloWorld(); //afisam view-ul in varianta explicita : Numele view-ului return View("HelloWorld"); } }

8. Dam un Build la proiect (Debug>Build) pentru a inregistra modelul nou creat in proiect. 9. Urmatorul pas este acela de a crea un View pentru actiunea HelloWorld si anume View-ul cu acelasi nume ca si al actiunii “HelloWorld.cshtml”. 10. Pentru a crea view-ul dam click dreapta oriunde in interiorul definitiei actiunii HelloWorld si alegem din meniul contextual deschis “Add View…”. 11. Ni se va deschide o noua fereastra ca si cea de mai jos, apoi actionam butonul Add, care va adauga in directorul corespondent controllerului (Views/Home) fisierul HelloWorld.cshtml care contine codul View-ului.

Motivul pentru care am facut Build inainte de a crea View-ul este acela de a inregistra modelul nou creat pentru a putea fi vizibil in lista View Data class in cazul in care cream un View

stronglytyped;

Lucrarea 1 – Medii avansate 2012

Views/HelloWorld.cshtml

@model lab1.Models.HelloModel @{ ViewBag.Title = "HelloWorld"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>HelloWorld</h2> @{ //afisam in View mesajul stocat in ViewData["msg"] <p> @ViewData["msg"] </p> }

Observatii: 1. Intr-o exprimare improprie relatia dintre un Model si un strongly-type view este similara cu cea de mostenire a claselor. Adica toate atributele modelului si metodele acestuia sunt vizibile si apelabile din interiorul unui View prin sintaxa Model.atribut sau Model.metoda();

Nume view

Un view strongly-typed este un view care isi incarca toatele datele dintrun anumit model. Din lista Model class se alege modelul sursa al View-ului

Master page este practic sablonul general care defineste structura generala a oricarei pagini din site.Deschideti fisierul Views/Shared/_Layout.cshtml

Lucrarea 1 – Medii avansate 2012 Apelarea unei metode a unui model dintr-un View nu este recomandata deoarece nu respecta rigorile de organizare a codului impuse de pattern-ul de MVC. Accesarea membrilor unui model dintr-un view este recomandata pentru incarcarea datelor din model in View. 2. Marcatorii de cod executabil dintr-un View se face cu @ pentru a marca o linie de cod sau @{ …. } pentru bloc de cod. Pentru a rula proiectul nostru se actioneaza butonul Start debugging sau F5. O instanta de test IIS se va porni pe un port aleator care va afisa prima pagina a proiectului (URL: localhost:nrport).De fapt se va apela controllerul Home (punctul de intrare in aplicatie) si se va apela actiunea Index a controllerului care va face rendering la view-ul Index.cshtml din directorul Home. 1. Pentru a vizualiza rezultatul a ceea ce am facut pana acum vom introduce urmatorul URL in browser: http://localhost:nrport/Home/HelloWorld . 2. Observam ca apelul codului se face prin URL dupa principiul: server:port/Controller/Actiune/ mai putem avea si server:port/Controller caz in care se va apela actiunea Index() a controllerului; sau cel mai simplu server:port/ caz in care se va apela controllerul Home, actiunea Index(); 3. Tot acest format predefinit al URL-ului se defineste prin regulile de rutare definite in Global.asax si sunt customizabile, acesta fiind formatul implicit;

Actiuni cu parametrii

1. Adaugati in controller-ul Home urmatoarea actiune:

public ActionResult Hello(string nume) { //instantiem modelul Models.HelloModel model = new Models.HelloModel(nume); //punem in ViewData mesajul pe care vrem sa il afisam ViewData["msg"] = model.SayHello(); return View(model); }

2. Creati un nou View de tip strongly-typed pe baza modelului HelloWorld de tip Empty pentru actiunea de mai sus la fel ca mai inainte. In folderul Home din Views ar trebui sa aveti Hello.cshtml. In View-ul nou creat adaugati urmatorul cod:

@model lab1.Models.HelloModel @{ ViewBag.Title = "Hello"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Hello</h2> @{

Lucrarea 1 – Medii avansate 2012 //afisam in View mesajul stocat in ViewData["msg"] <p> Hello @Model.nume </p> }

3. Rulati aplicatia si introduceti URL-ul urmator in browser: http://localhost:[nrport]/Home/Hello?nume=John

Legaturi in MVC

1. In View-ul Home/Index.cshtml vom crea un link catre actiunea HelloWorld a controllerului Home astfel:

@Html.ActionLink("Start", "HelloWorld", "Home"); @{ /* link text, Actiune, Controller*/}

Aici se apeleaza actiunea HelloWorld care nu are parametri.

Arhitectura generala a unei aplicatii ASP.MVC