Vežba 01 - Prva MVC aplikacija

U okviru ovih vežbi će biti korišćen softver Microsoft Visual Studio 2015. Ovaj softver se može besplatno preuzeti sa sajta Microsoft-a.

Kreiranje projekta

Za kreiranje novog projekta iz Visual Studio-a biramo opcije File → New Project kako bi se otvorio prozor New Project. Iz njega biramo opciju ASP.NET Web Application. Ime projekta će biti PartyInvites. Izgled prozora je prikazan na slici 1.1.

Slika 1.1 - Kreiranje novog projekta

Nakon ovoga se otvara novi prozor u okviru kog biramo šablon projekta. Različiti šabloni kreiraju projekte sa različitom količinom osnovne podrške za funkcionalnosti kao što su autentikacija, navigacija i vizuelni stilovi. U ovoj vežbi ćemo odabrati opciju MVC koja kreira projekta sa osnovnom strukturom foldera za krairanje MVC aplikacije. Iz prozora za odabir šablona biramo MVC i potvrđujemo klikom na dugme OK. Prozor za odabir šablona je prikazan na slici 1.2.

1

Slika 1.2 - Prozor za odabir šablona

Nakon toga se otvara prozor za konfigurisanje Microsoft Azure aplikacije koji ćemo preskočiti klikom na dugme Cancel.

Kada je projekat kreiran, možemo primetiti veliki broj fajlova i foldera u okviru Solution Explorer-a. To je podrazumevana struktura za MVC projekat. Ona je prikazana na slici 1.3.

2

Slika 1.3 - Struktura projekta u okviru Solution Explorer-a

Dodavanje kontrolera

U okviru MVC arhitekture, dolazeći zahtevi se obrađuju pomoću kontrolera. U ASP.NET MVC, kontroleri su jednostavne C# klase (nasleđene iz klase System.Web.Mvc.Controller). Svaka javna metoda u okviru kontrolera je poznata kao akciona metoda (action method), što znači da se ona može pozvati navođenjem određene URL putanje. Po MVC konvenciji, kontroleri se smeštaju u folder Controllers, koji je automatski kreiran od strane Visual Studio-a. Prilikom samog kreiranja projekta, automatski su nam dodati kontroleri: HomeController, AccountController i ManageController.

Da bi smo dodali novi kontroler u naš projekat, kliknemo desnim tasterom miša na folder Controllers i odaberemo Add a zatim Controller iz menija koji je prikazan. Po konvenciji, imena kontrolera treba da se završavaju reči Controller. Kod koji je automatski generisan za HomeController kontroler je prikazan u listingu 1.1. using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;

3

namespace PartyInvites.Controllers{ public class HomeController : Controller { public ActionResult Index() { return View(); }

public ActionResult About() { ViewBag.Message = "Your application description page.";

return View(); }

public ActionResult Contact() { ViewBag.Message = "Your contact page.";

return View(); } }}

Listing 1.1 - Podrazumevani kod za HomeController

Ako sada pokrenemo aplikaciju (prečica taster F5) dobijamo prikaz kao što je dato na slici 1.4. To je podrazumevani izgled aplikacije koji nam kreira Visual Studio a koji ćemo tokom ovih vežbi menjati. Aplikacija će se pokrenuti i izvršiće se Index metoda iz HomeController-a.

4

Slika 1.4 - Izgled aplikacije nakon pokretanja

Rutiranje

MVC aplikacije koriste ASP.NET sistem rutiranja koji određuje kako se URL mapira na određeni kontroler i akcionu metodu. Kada Visual Studio kreira MVC projekat, on dodaje podrazumevane rute. Bilo koja od ruta:

/

/Home

/Home/Index

će biti prebačena na akcionu metodu Index u okviru HomeController-a.

Drugim rečima, kada se putem internet pretraživača zatraži http://imesajta.com, dobiće se izlaz koji daje Index metoda u okviru HomeController-a.

Podešavanja ruta se mogu videti u okviru fajla App_Start/RouteConfig.cs:using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using System.Web.Routing;

5

namespace PartyInvites{ public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); } }}

Listing 1.2 - Klasa za podešavanje ruta

Prikazivanje Web stranica

U kreiranom kodu za Index metodu se može videti da vraćamo ViewResult objekat, što automatski govori da ćemo prikazati pogled. Pogled se kreira tako što pozovemo metodu View() bez parametara. Ovo gorovi da je potrebno prikazati podrazumevani pogled za akcionu metodu. Da bi kreirali pogled kliknemo desnim tasterom miša na akcionu metodu u okviru kontrolera i odaberemo Add View kao što je prikazano na slici 1.5. (već imamo pogled pa ne moramo ovo raditi)

6

Slika 1.5 - Dodavanje novog pogleda

U prozoru koji se zatim pojavi poništimo potvrdu za Use a layout or master page opciju i kliknemo na dugme Add. Na ovaj način je kreiran novi fajl pod imenom Index.cshtml u okviru Views/Home foldera. Prozora za dodavanje pogleda je prikazana na slici 1.6.

7

Slika 1.6 - Prozor za dodavanje novog pogleda

Pošto nam je Visual Studio sam kreirao pogled, mi ga možemo otvoriti i promeniti. Pogled se nalazi na lokaciji Views/Home/Index.cshtml. U okviru njega unosimo sledeći kod: @{ ViewBag.Title = "Home Page";}

<div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework.</p> <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p></div>

<div class="row"> <div class="col-md-12"> Hello World (from the view) </div></div>

Listing 1.3 - Kod u okviru pogleda

Ako sada pokrenemo aplikaciju, dobijamo ispis koji je prikazan na slici 1.7.

8

Slika 1.7 - Izgled stranice nakon pokretanja projekta

U prethodnom primeru mi nismo rekli koji pogled treba da se prikaže. Po konvenciji, MVC traži pogled koji ima isto ime kao i akciona metoda, a nalazi se u folderu koji ima isto ime kao i kontroler.

Dodavanje dinamičkog ispisa

Ideja kod Web aplikacija je prikaz dinamičkog sadržaja. U okviru MVC-a, kontroleri imaju posao da kreiraju određene podatke i da ih proslede pogledima, čiji je posao da date podatke prikažu.

Jedan način da se podaci proslede od kontrolera do pogleda je korišćenjem ViewBag objekta, koji je član Controller bazne klase. ViewBag je dinamički objekat kojem možemo dodeliti bilo koju vrednost koja će biti dostupna pogledima za prikaz. Za demonstraciju menjamo kod u okviru HomeController klase kao što je prikazano u okviru listinga 1.4. using System;using System.Collections.Generic;using System.Linq;using System.Web;

9

using System.Web.Mvc;

namespace PartyInvites.Controllers{ public class HomeController : Controller { public ViewResult Index() { int hour = DateTime.Now.Hour; ViewBag.Greeting = hour < 12 ? "Good Morning" : "Good Afternoon"; return View(); } }}

Listing 1.4 - Promenjeni kod za HomeController

Sada menjamo i kod u okviru pogleda tako da dobijemo kod prikazan u listingu 1.5. @{ ViewBag.Title = "Home Page";}

<div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework.</p> <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p></div>

<div class="row"> <div class="col-md-12"> @ViewBag.Greeting World (from the view) </div></div>

Listing 1.5 - Kod u okviru pogleda

Ako sada pokrenemo aplikaciju, dobijamo prikaz kao na slici 1.8.

10

Slika 1.8 - Izgled stranice nakon pokretanja projekta

11

Kreiranje aplikacije sa unosom podataka

U okviru MVC-a, M označava model, i predstavlja možda i najvažniji deo aplikacije. Model predstavlja realne objekte, procese i pravila koja definišu domen naše aplikacije. Pogledi i kontroleri prikazuju domen klijentima.

Po MVC konvenciji, klase koje predstavljaju model su smeštene u okviru Model foldera. Da bi dodali klasu, kliknemo desnim na folder Models u okviru Solution Explorer-a i odaberemo Add a zatim Class. Ime klase će biti Guest i kliknemo da dugme Add kako bi smo kreirali klasu. Sadržaj klase menjamo tako da bude kao u okviru listinga 1.6. using System;using System.Collections.Generic;using System.Linq;using System.Web;

namespace PartyInvites.Models{ public class Guest { public string Name { get; set; } public string Email { get; set; } public string Phone { get; set; } public bool? WillAttend { get; set; } }}

Listing 1.6 - Kod za klasu Guest

Sledeći korak je izmena Pogleda Index.cshtml čiji kod treba da bude kao u listingu 1.7. @{ ViewBag.Title = "Home Page";}

<div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework.</p> <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p></div>

<div class="row"> <div class="col-md-12"> @ViewBag.Greeting World (from the view) <p>We're going to have an exciting party.</p> @Html.ActionLink("Reply Now", "ReplyForm") </div></div>

Listing 1.7 - Kod za pogled Index.cshtml

12

U listingu 1.7, Html.ActionLink predstavlja pomoćnu metodu koja prima dva parametra. Prvi je tekst koji će biti prikazan na stranici, a drugi je akciona metoda koja će biti izvršena kada korisnik klikne na link. Ova akciona metoda trenutno ne postoji, pa je treba dodati u okviru kontrolera HomeController. Listing 1.8 prikazuje kod kontrolera nakon dodavanja akcione metode: using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;

namespace PartyInvites.Controllers{ public class HomeController : Controller { public ViewResult Index() { int hour = DateTime.Now.Hour; ViewBag.Greeting = hour < 12 ? "Good Morning" : "Good Afternoon"; return View(); }

public ViewResult ReplyForm() { return View(); } }}

Listing 1.8 - Kod za kontroler HomeController

Izvršavanjem akcione metode, prikazuje se pogled ReplyForm.cshtml koji je potrebno dodati. Ovog puta ćemo kreirati Empty model koji je namenjen za prikaz određenog tipa iz domena. Da bi dodali pogled, kliknemo desnim na ReplyForm akcionu metodu i odaberemo Add View iz menija. U Add View dijalogu odaberemo Gest iz padajućeg menija za klasu modela. Izgled stranice je prikazan na slici 1.9.

13

Slika 1.9 - Prozor za dodavanje ReplyForm pogleda

U okviru pogleda unosimo kod koji je prikazan u okviru listinga 1.9. @model PartyInvites.Models.Guest

@{ ViewBag.Title = "ReplyForm";}

@using (Html.BeginForm()){ <h4>Fill reply form.</h4> <hr /> <div class="form-group"> @Html.LabelFor(m => m.Name, new { @class = "col-md-2 control-label" }) @Html.TextBoxFor(m => m.Name, new { @class = "form-control" }) </div> <div class="form-group"> @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" }) @Html.TextBoxFor(m => m.Email, new { @class = "form-control" }) </div> <div class="form-group"> @Html.LabelFor(m => m.Phone, new { @class = "col-md-2 control-label" }) @Html.TextBoxFor(m => m.Phone, new { @class = "form-control" }) </div> <div class="form-group"> @Html.LabelFor(m => m.WillAttend, new { @class = "col-md-2 control-label" }) @Html.DropDownListFor(x => x.WillAttend, new[] { new SelectListItem() {Text = "Yes, I'll be there", Value = bool.TrueString}, new SelectListItem() {Text = "No, I can't come", Value = bool.FalseString} }, "Choose an option", new { @class = "form-control" })

14

</div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" class="btn btn-default" value="Submit Reply" /> </div> </div>}<br/>

Listing 1.9 - Kod za pogled ReplyForm.cshtml

Za svaki podatak član iz klase Guest, koristimo HTML pomoćnu metodu kako bi se prikazala odgovarajuća kontrola.

Takođe, koristimo Html.BeginForm koji generiše HTML form element koji je konfigurisan da vrati podatke akcionoj metodi.

Ako sada pokrenemo aplikaciju, imamo dva ekrana koja su prikazana na slici 1.10.

15

Slika 1.10 - Prikaz aplikacije nakon pokretanja

Obrada formi

Da bi primili i procesirali podatke potrebno je dodati još jednu akcionu metodu ReplyForm. To znači da ćemo imati dve akcione metode sa istim imenom, pri čemu će one raditi sledeće:

Metoda koja je zadužena za HTTP GET zahtev: GET zahtev je zahtev koji se obrađuje svaki put kada neko klikne link i biće zadužen da prikaše praznu formu sa poljima za unos

Metoda koja je zadužena za HTTP POST zahtev: U podrazumevanom slučaju, forme koje se prikazuju pomoću metode Html.BeginForm() se prosleđuju kao POST zahtevi. Ova verzija akcione metode će biti zadužena da primi poslate podatke i da odluči šta će raditi sa njima.

Obrada GET i POST zahteva posebne C# metode jer metode imaju različite odgovornosti. Obe metode se pozivaju pomoću istog URL-a, ali MVC osigurava da se izvrši odgovarajuća metoda na osnovu toga da li je u pitanju GET ili POST zahtev. Izmene koje moramo da uradimo u okviru HomeController-a su prikazane u okviru listinga 1.10. using PartyInvites.Models;using System;using System.Collections.Generic;

16

using System.Linq;using System.Web;using System.Web.Mvc;

namespace PartyInvites.Controllers{ public class HomeController : Controller { public ViewResult Index() { int hour = DateTime.Now.Hour; ViewBag.Greeting = hour < 12 ? "Good Morning" : "Good Afternoon"; return View(); }

[HttpGet] public ViewResult ReplyForm() { return View(); }

[HttpPost] public ViewResult ReplyForm(Guest guestResponse) { return View("Thanks", guestResponse); } }}

Listing 1.10 - Kod u okviru HomeController-a

Druga metoda prikazuje kako možemo prikazati pogled koji nije podrazumevani, odnosno koji nema isto ime kao i metoda i kako mu prosleđujemo podatke:

return View("Thanks", guestResponse);

Na ovaj način smo rekli da treba prikazati pogled Thanks i da mu treba proslediti GuestResponse objekat. Prozor za dodavanje pogleda je prikazan na slici 1.11.

17

Slika 1.11 - Dodavanje Thanks pogleda u aplikaciju

Kod u okviru pogleda je prikazan u okviru listinka 1.11. @model PartyInvites.Models.Guest

@{ ViewBag.Title = "Thanks";}

<div> <h3>Thank you, @Model.Name!</h3> @if (Model.WillAttend == true) { @:It's great that you're coming. The drinks are in the fridge! } else { @:Sorry to hear that you can't make it. }</div>

Listing 1.11 - Kod za pogled Thanks.cshtml

Prikaz stranice nakon pokretanja aplikacije je dat na slici 1.12.

18

Slika 1.12 - Prikaz stranice Thanks.cshtml

19