Lucrarea 1 Medii avansate 2012

ASP MVC 3
ASP MVC 3 este un framework destinat dezvoltrii aplicaiilor 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 mbuntit a MVC 2. Cteva dintre avantajele pe care ASP MVC le aduce n comparaie cu ASP Web Forms sunt: Permite dezvoltarea aplicaiilor web prin metode AGILE i Test-Driven Development; Furnizeaz instrumente care permit Unit Testing; Utilizarea pattern-ului MVC n aplicaiile 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 execuie a fiecarei funcionaliti: utilizatorul face o aciune iar ca i rspuns la aceast aciune, aplicaia schimb starea modelelor de date i servete un view updatat cu rezultatele cerute de utilizator; Extensibilitate uoar dac design patternul este respectat ntreinerea i dezvoltarea unei aplicaii MVC este foarte uoar i se face cu modificri minime n codul existent; Control asupra HTML i HTTP reducerea considerabil a cantitii de cod HTML prin utilizarea unor HTML Helpere (ex. Html.TextBox, Html.TextBoxFor) care n special n cadrul formularelor web fac legarea automat a cmpurilor din formular cu atributul modelului corespondent; Control uor i eficient a traficului prin HTTP la nivel de controller prin utilizarea unor directive (ex. [HttpPost], [HttpRequest]); Securitate mbuntit i sistem de autenticare la nivel de controller i la nivel de aciune bazat pe utilizatori i roluri, extensibil i customizabil; Testare i debugging uor, posibiliti de testare automat; Integrarea perfect cu CSS, Javascript, JSON, Ajax, Jquery; Manipulare uoar 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 uoar a datelor introduse de utilizator prin ajax la nivel de server validarea modelelor Specific MVC 3 este noul motor de interpretare i redarea interfeei 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 descrcat gratuit de aici: http://www.microsoft.com/web/gallery/install.aspx?appid=VWD2010SP1AzurePack 2. Se vor parcurge aspectele eseniale legate de dezvoltarea aplicaiilor web utiliznd aceast platform prin construirea sistematic a unui proiect; 3. Deschidei Microsoft Visual Web Developer 2010, File>New Project; n stnga alegei 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 namespaceuri 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

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

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();

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