Oснове MVC модела

MVC Model programiranje

MVC je jedan od tri ASP.NET programska modela.

MVC je framework za pravljenje web aplikacija koristeći MVC (Model View Controller) dizajn:

Model predstavlja srž aplikacije nrepresents (for instance a list of database records).

View prikazuje podatke (iz baze podataka).

Controller služi za rukovanje (podacima iz baze podataka).

MVC model takoĎe obezbeĎuje punu kontrolu nad HTML, CSS, i JavaScript.

MVC model definiše web

aplikacije sa 3 logička sloja:

Biznis sloj (Model logic)

Displej sloj (View logic)

Kontrola unosa (Controller logic)

Model je deo aplikacije za rukovanje logikom aplikacijskih podataka.

Često su to modeli objekata podataka koji se vade (I čuvaju) iz baze podataka.

View je deo aplikacije kojom se rukuje prikazivanje podataka.

Najčešće su views napravljeni po uzoru na model podataka.

Controller je deo aplikacije kojom rukujete interakciju korisnika.

Tipični kontroleri čitaju podatke iz nekog view , kontrolišu unos korisnika, I šalju unite podatke

modelu.

Ovakva MVC odvojenost pomaže vam da upravljate kompleksnim aplikacijama , zato šzo

možete da se fokusirate na posebne aspekte nezavisno od drugih. Na primer, možete da se

fokusirate na view nezavisno od biznis logike. TakoĎe je ovako lakše da se testira neka

aplikacija.

Ova MVC odvojenost uprošćava grupno programiranje. Različiti programeri mogu da

programiraju view, neki drugi logiku kontrole, a neki treći biznis logiku paralelno.

Web Forms vs MVC

Programiranje MVC modelom je lakša alternative od tradicionalnog ASP.NET (Web Forms).

On je lak, neverovatno lako se testira, u njemu su integrisane sve postojeće ASP.NET opcije, kao

Master Pages, Bezbednosna zaštita, i Autentikacija.

Visual Studio Express 2012/2010

Visual Studio Express je besplatna verzija Microsoft Visual Studio.

Visual Studio Express je programerski alat napravljen baš za MVC (i Web Forms).

Visual Studio Express sadrži:

MVC i Web Forms

Drag-and-drop web controle i web komponente

web server jezik (Razor korišćenjem VB ili C#)

web server (IIS Express)

Server baze podataka (SQL Server Compact)

Kompletno programersko razvojno okruženje web development framework (ASP.NET)

Ako instalirate Visual Studio Express, imaćete mnogo koristi od ovog tutorijala.

Ako hoćete da instalirate Visual Studio Express, kliknite na ove linkove:

Visual Web Developer 2012 (Ako imate Windows 7 ili Windows 8)

Visual Web Developer 2010 (Ako imate Windows Vista ili XP)

ASP.NET MVC - Internet Aplikacija

Za učenje ASP.NET MVC, mi ćemo da napravimo jednu Internet Aplikaciju

Deo I: Kreiranje Aplikacije

Šta ćemo da napravimo?

Napravićemo Internet aplikaciju koja će da podržava dodavanje, editovanje, brisanje i listanje

informacija koje se nalaze u bazi podataka.

Šta ćemo da uradimo

Visual Web Developer nudi različite templejte za pravljenje web aplikacija.

Mi ćemo da koristimo Visual Web Developer za pravljenje jedne za sada prazne MVC Internet

aplikacije sa HTML5 markup.

Kada je napravljena prazna Internet aplikacija, mi ćemo postepeno da dodajemo kod dok naša

aplikacija ne bude potpuno završena. We will use C# as the programming language, and the

newest Razor server code markup.

Kreiranje Web Aplikacije

Ako imate instaliran Visual Web Developer , startuje se Visual Web Developer I izabere se New

Project.

U New Project dialog box-u :

ASP.NET MVC – Aplikacijski folderi

Da bi smo naučili ASP.NET MVC, mi ćemo da napravimo jednu Internet aplikaciju.

Deo II: Istraživanje Aplikacijskih Foldera

MVC Folderi

Jedna tipična ASP.NET MVC web aplikacija ima sledeće sadržaje foldera :

Aplikacijske informacije

Karakteristike

Reference

Aplikacijski folderi

App_Data Folder

Content Folder

Controllers Folder

Models Folder

Scripts Folder

Views Folder

Configuration files

Global.asax

packages.config

Web.config

Imena foldera su ista u svim MVC aplikacijama. MVC framework je baziran na difoltnom

davanju imena. Controlleri su u Controllerskim folderima, View-ovi su u Viewskim folderima,

kao I Modeli su u Modelsovim folderima. Tako da vi ne treba da koristite imena foldera u vašim

aplikacijskom kodu jer to je već obavljen posao.

Standardno imenovanje smanjuje količinu koda I čini lakšim razumevanje MVC projekata.

Nadalje sledi kratak pregled sadržaja I namena svakog od ovih foldera:

Folder App_Data

Folder App_Data je za čuvanje podataka aplikacije.

Content Folder

Folder Content se koristi za statičke fajlove kao style sheets (css files), icone i slike.

Visual Web Developer automatski dodaje jedan folder themes Content folder. Folder sa

temama je napunjen sa jQuery styles i slikama. U ovom projektu možete da izbrišete folder sa

temama.

Visual Web Developer takoĎe dodaje standardne stilske listove projektu: fajl Site.css u content

folder. Fajl Style sheet je fajl koji može da se edituje kada hoćete da promenite stil aplikacije.

Folder Controllers

Controllers folder sdarži kontrolerske klase odgovorne za upravljanje korisničkim unosom I

odgovorima.

MVC zahteva da se sva imena kontrolerskih fajlova završavaju sa "Controller".

Visual Web Developer ima već kreiran Home controller (za Home i About stranicu) I jedan

Account controller (za Login stranice):

Kasnije ćemo da napravimo više controller.

Models Folder

Models foldersadrži klase koje predstavljaju aplikacijske modele. Modeli drže I manipulišu

aplikacijskim podacima.

Kasnije ćemo da napravimo modele (tj njihove klase).

Folder Views

Views folder čuva HTML fajlove koji se odnose na prikaz aplikacije (korisnički interfejsovi).

Views folder sadrži po jedan folder za svaki controller.

Visual Web Developer ima već kreiran Account folder, Home folder, I jedan Shared folder

(unutar Views folder).

Account folder sadrži stranice za registraciju I logovanje na korisnički nalog.

Home folder se koristi za čuvanje stranica aplikacije kao home page i about page.

Shared folder se koristi za čuvanje views shared between controllers (master pages i layout

pages).

Kasnije ćemo da editujemo layout fajlove.

Folder Scripts

Folder Scripts čuva JavaScript fajlove aplikacije.

Po difoltu Visual Web Developer je ispunio ovaj folder sa standardnim MVC, Ajax, i jQuery

fajlovima:

Napomena: Ovaj fajl "modernizr" sadrži JavaScript codove korišćene za podršku HTML5 i

CSS3 u ovoj aplikaciji.

ASP.NET MVC - Styles i Layout

Part III: Dodavanje stila I prepoznatljivog izgleda (Layout).

Dodavanje Layout

Fajl _Layout.cshtml predstavlja layout svake stranice aplikacije. On se nalazi u Shared folderu

unutar Views folder.

Otvorite taj fajl I u njega prebacite sledeće umesto prethodnog koda:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script> </head> <body> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("Filmovi", "Index", "Filmovi")</li> <li>@Html.ActionLink("About", "About", "Home")</li> </ul> <section id="main"> @RenderBody() <p>JeliZora?</p> </section> </body> </html>

HTML Helperi

U gornjem kodu, HTML helperi se koriste za modifikaciju HTML izlaza:

@Url.Content() - URL sadržaj se ovde stavlja.

@Html.ActionLink() - HTML link upisujete ovde.

Razor Syntax

U gornjem kodu, bordo slovima su obeleženi C# u kojima je korišćen Razor markup.

@ViewBag.Title – Titl ide ovde.

@RenderBody() – Sadržaj stranice ide ovde.

Dodavanje stila

Stranica sa stilom za aplikaciju se zove Site.css. Ona je locirana u folderu Content. Otvori se fajl

Site.css I prelepi ovaj sadržaj:

body { font: "Trebuchet MS", Verdana, sans-serif; background-color: #5c5cd6; color: #5c5cd6; } h1 { border-bottom: 3px solid #7300e6; font: Georgia, serif; color: #26004d; } #main { padding: 20px; background-color: #ffffff; border-radius: 0 4px 4px 4px; } a { color: #26004d; } /* Menu Styles ------------------------------*/ ul#menu { padding: 0px; position: relative; margin: 0; } ul#menu li { display: inline; } ul#menu li a { background-color: #d9b3ff; padding: 10px 20px; text-decoration: none; line-height: 2.8em; /*CSS3 properties*/ border-radius: 3px 3px 0 0; } ul#menu li a:hover { background-color: #ffffff; } /* Forms Styles ------------------------------*/ fieldset { padding-left: 12px; } fieldset label { display: block; padding: 4px; } input[type="text"], input[type="password"] {

width: 300px; } input[type="submit"] { padding: 4px; } /* Data Styles ------------------------------*/ table.data { background-color:#ffffff; border:1px solid #c3c3c3; border-collapse:collapse; width:100%; } table.data th { background-color:#e8eef4; border:1px solid #c3c3c3; padding:3px; } table.data td { border:1px solid #c3c3c3; padding:3px; }

Fajl _ViewStart

Fajl _ViewStart u Shared folderu (unutar Views folder) sadrži sledeći kod:

@{Layout = "~/Views/Shared/_Layout.cshtml";}

Ovaj kod je dodat automatski u svim views prikazanim na aplikaciji.

Ako izbrišete ovaj fajl, moraćete da dodate ovaj red u svim views.

ASP.NET MVC - Controllers

Deo IV: Dodavanje kontrolera.

Folder Controllers

Controllers Folder sadrži controller classe odgovorne za manipulisanje korisničkim unosom

podataka I odgovorima aplikacije.

MVC zahteva ime za sve kontrolere koje se završava sa "Controller".

U našem primeru, Visual Web Developer je sam kreirao sledeće fajlove: HomeController.cs (za

Home i About stranice) i AccountController.cs (za logovanje):

Home controller

Kontrolni fajl HomeController.cs,u našoj aplikaciji definiše dve kontrole Index i About.

Preko difoltnog koda prepišite ovaj u HomeController.cs :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace MvcDemo.Controllers

{

public class HomeController : Controller

{

public ActionResult Index()

{return View();}

public ActionResult About()

{return View();}

}

}

Controller Views

Fajlovi Index.cshtml i About.cshtml u folderu Views definišu ActionResult views Index() i

About() u kontroleru.

ASP.NET MVC - Views

Deo V: Dodavanje Views radi prikazivanja Aplikacije.

Folder Views

Folder Views čuva fajlove (HTML fajlove) koji se odnose na prikazivanje aplikacije (korisnički

interfejsovi ). Ovi fajlovi mogu imati ekstenzije html, asp, aspx, cshtml, i vbhtml, u zavisnosti

od jezika kojim su pisani.

Folder Views sadrži po jedan folder za svaki kontroler.

Visual Web Developer ima već napravljen Account folder, Home folder, i Shared folder (unutar

Views folder).

Account folder sadrži stranice za registraciju I logovanje na korisnički akaunt.

The Home folder is used for storing application pages like the home page and the about page.

The Shared folder is used to store views shared between controllers (master pages and layout

pages).

ASP.NET File Types

Sledeći HTML tipovi fajlova mogu da se naĎu u Views Folder:

Tip fajla Ekstenzija

Plain HTML .htm or .html

Classic ASP .asp

Classic ASP.NET .aspx

ASP.NET Razor C# .cshtml

ASP.NET Razor VB .vbhtml

Fajl Index

Fajl Index.cshtml predstavlja Home page aplikacije. To je aplikacijski difoltni fajl (index file).

Preko difoltnog sadržaja upišite ovo:

@{ViewBag.Title = "Početna";} <h1>Dobrodosli na kurs PHP II deo</h1>

<p>Kurs PHP II deo ima sledece sadryaje ............</p>

About File

Fajl About.cshtml predstavlja stranicu About naše aplikacije.

Put the following content in the file:

@{ ViewBag.Title = "O nama"; } <h2>O nama </h2> <p> Ovo je kurs PHP II deo, mi smo polaznici

</p>

Pokretanje Aplikacije

Pritisnite iz glavnog menija Debug, Start Debugging (ili F5) .

Aplikacija izgleda ovako: