Upload
tranhuong
View
221
Download
0
Embed Size (px)
Citation preview
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: