Vjež ba 3-3: Ražvoj ASP.NET MVC 4 Pogleda s Ražor sintaksom

Transcription

1 Vjež ba 3-3: Ražvoj ASP.NET MVC 4 Pogleda s Ražor sintaksom U ovoj vježbi trebate dodati sljedeće view-ove u OnlineVrijednosnice aplikaciju: Details view za Graf model objekte ovaj view će prikazivati jedan Graf kao sliku u njenoj stvarnoj veličini. Create view za Graf model objekte ovaj view treba omogućiti korisnicima da uploadaju nove Grafove, te zadaju njihove naslove i opise. Graf Gallery partial view ovaj view treba prikazivati više Grafova kao slike u umanjenoj veličini s Naslov, ImeVlasnikaKorisnika i DatumKreiranja svojstvima. Navedeni view će biti korišten na stranici Svi Grafovi za prikaz svih grafova u aplikaciji, a pored toga biti će korišten i na Početnoj stranici za prikaz tri najnovija dodana grafa. Nakon dodavanja navedenih pogleda u OnlineVrijednosnice aplikaciju, testirati ćete i sam rad aplikacije. Ciljevi vježbe Nakon završetka ove vježbe, biti ćete u mogućnosti: Dodavati Razor view-ove u MVC aplikaciju i postavljati svojstva kao što su scaffold i model binding. Pisati HTML markup i C# kod u view-u pomoću Razor sintakse. Razviti partial view-e i iskorištavati ih u više view-ova. Vježba 1: Dodavanje Details View-a za Graf U ovom zadatku ćete: Razviti view koji prikazuje jedan Graf kao sliku u njenoj punoj veličini. Na navedenom view-u prikazati svojstva Grafa poput Naslova, Opisa, Datuma kreiranja. 1

2 Glavni zadaci ove vježbe su: 1. Dodavanje Details view-a. 2. Programiranje prikaza traženih svojstava u view-u. Zadatak 1: Dodavanje Details view-a 1. Otvorite OnlineVrijednosnice.sln datoteku, koja se nalazi na sljedećem linku: Vježbe / seminari: 2. Dodajte novi View za Details metodu u GrafController-u koristeći sljedeće informacije: Name: Details View Engine: Razor (CSHTML) View Type: Strongly typed Model Class: Graf Scaffold Template: Empty Layout or master page: None Zadatak 2: Programiranje prikaza traženih svojstava u view-u 1. Dodajte naslov u Details view pomoću Naslov svojstva Model objekta. 2. Dodajte h2 tag u view za prikaz Graf svojstva Naslov modela objekta na stranici. 3. Dodajte <img> tag za prikaz Grafa kao slike na stranici pomoću sljedećih podataka: Width: 800 src: Prazno 4. Dodajte URL.Action helper u src atribut <img> taga pomoću sljedećih podataka: Method: Url.Helper() Action Name: GetImage Controller Name: Graf Route Values: new { PhotoId =Model.PhotoID } 5. Dodajte span tag za prikaz Opis svojstva modela pomoću sljedećih podataka: Helper: Html.DisplayFor Lamda Expression: model => model.opis 2

3 6. Dodajte span tag za prikaz ImeVlasnikaKorisnika svojstva modela pomoću sljedećih podataka: Helperi: o Html.DisplayNameFor o HtmlDisplayFor Lamda Expression: model => model. ImeVlasnikaKorisnika 7. Dodajte span tag za prikaz DatumKreiranja svojstva modela pomoću sljedećih podataka: Helperi: o Html.DisplayNameFor o HtmlDisplayFor Lamda Expression: model => model. DatumKreiranja 8. Dodajte p tag za prikaz linka za povratak na Index stranicu pomoću sljedećih podataka: Helper: HTML.ActionLink Tekst: Natrag na listu / Back to List 9. Spremite promjene u Details.cshtml datoteci. Vježba 2: Razvoj Create view-a za nove Graf model objekte U ovom zadatku ćete: Razviti view za upload novog Grafa za prikaz u aplikaciji OnlineVrijednosnice. Prikazati svojstva Grafa kao što su Naslov, Opis i DatumKreiranja. Glavni zadaci ove vježbe su: 1. Dodavanje Create view-a. 2. Programiranje prikaza traženih svojstava u view-u. Zadatak 1: Dodavanje Create view-a 1. Napravite novi view za Create metodu u GrafController klasi pomoću sljedećih podataka: Name: Create View: Razor (CSHTML) View type: Strongly Typed Model class: Graf Scaffold template: Empty 3

4 Partial view: None Layout or master page: None Zadatak 2: Programiranje prikaza traženih svojstava u view-u 1. Dodajte sljedeći naslov u Create view: Title: Kreirajte novi Graf 2. Dodajte h2 tag u body stranice za prikaz definiranog naslova: Kreirajte novi Graf. 3. Kreirajte obrasac (form tag) na stranici pomoću sljedećih podataka: Helper: Html.BeginForm Action: Create Controller name: Graf Form method: FormMethod.Post Parameter: proslijedite HTML atribut enctype = "multipart/form-data" 4. U formi, upotrijebite Html.ValidationSummary helper renderiranje poruka valjanosti. 5. Nakon ValidationSummary-a, dodajte span tag za prikaz kontrole svojstva Naslov modela pomoću sljedećih podataka: Helperi: o LabelFor o EditorFor o ValidationMessageFor 6. Nakon kontrole za svojstvo Naslov, dodajte span tag za kontrolu za prikaz svojstva GrafDatoteka i <input> tag pomoću sljedećih podataka: Helper: LabelFor Class: pic-upload-input Input type: file Name: Image 7. Nakon kontrole za svojstvo GrafDatoteka, dodajte span tag za kontrolu za prikaz svojstva Opis modela i pomoću sljedećih podataka: Helperi: o LabelFor o EditorFor o ValidationMessageFor 4

5 8. Nakon kontrole za svojstvo Opis, dodajte span tag za kontrolu za read-only prikaz svojstva ImeVlasnikaKorisnika modela i pomoću sljedećih podataka: Helperi: o LabelFor o DisplayFor 9. Nakon kontrole za svojstvo ImeVlasnikaKorisnika, dodajte span tag za kontrolu za read-only prikaz svojstva DatumKreiranja modela i pomoću sljedećih podataka: Helperi: o LabelFor o DisplayFor 10. Nakon DatumKreiranja kontrole, dodajte span tag koji sadrži <input> tag pomoću sljedećih podataka: Input type: submit Value: Create Helper: HTML.ActionLink Tekst: Natrag na listu / Back to List 11. Spremite promjene u Create.cshtml datoteci. Vježba 3: Razvoj i korištenje Partial View-a U ovom zadatku ćete: Dodati metodu za prikaz galerije u GrafControlleru. Dodati Partial View za galeriju. Ispuniti Partial View za galeriju. Koristiti razvijeni Partial View. Glavni zadaci ove vježbe su: 1. Dodavanje metode za galeriju u GrafController klasi. 2. Dodavanje partial view-a _GrafGallery. 3. Ispunjavanje _GrafGallery-a. 4. Korištenje _GrafGallery-a. 5

6 Zadatak 1: Dodavanje metode za galeriju u GrafController klasi 1. Dodajte novu metodu u GrafController.cs datoteku pomoću sljedećih podataka: Annotation: ChildActionOnly Vidljivost: public Povratni tip: ActionResult Ime: _GrafGallery Parametar: int naziva number s defaultnom vrijednošću 0 2. Kreirajte novu Listu Graf objekata s nazivom photos. Dodajte if izjavu, za postavjanje photos da uključuje sve Grafove izkonteksta objekata, ako je number parametar Ako number parametar nije 0, postavite photos da ispisuje najnovije Graf objekte.broj Graf objekata na popisu trebao biti jednak number parametru. 4. Proslijedite photos objekt partial view-u _GrafGallery i vratite view. 5. Spremite promjene u GrafController.cs datoteci. Zadatak 2: Dodavanje partial view-a _GrafGallery 1. Kreirajte novi partial view za _GrafGallery metodu u GrafController.cs datoteci pomoću sljedećih podataka: Name: _GrafGallery View Type: Strongly Typed Model Class: Graf Scaffold Template: Empty Layout or master page: None 2. Kreirajte novu mapu unutar Views mape u OnlineVrijednosnice projektu pomoću sljedećih podataka: Naziv mape: Shared 3. Premjestite _GrafGallery.cshtml datoteku iz Graf mape u Shared mapu. Zadatak 3: Ispunjavanje _GrafGallery-a 1. U _GrafGallery.cshtml partial view datoteci, trebate bindati view na IEnumerable kolekciju Graf modela objekata. 6

7 2. U _GrafGallery.cshtml djelomičnim partial view datoteci, dodajte foreach petlju koja prolazi kroz sve stavke u modelu. 3. U foreach izjavi, dodajte h3 tag koji će prikazivati svojstvo Naslov iz modela (item.naslov). 4. Nakon h3 taga, dodaje if izjavu koja provjerava da item.grafdatoteka nije null vrijednosti. 5. Ako item.grafdatoteka nema vrijednost null, treba izvršiti liniju koda s <img> oznakom. U src atributu pozovite UrlAction helper i ispunite sljedeće podatke u njemu: Action: GetImage Controller: Graf Parametar: za PhotoId parametar proslijedite item.grafid 6. Nakon if izjave, dodajte span tag i helper za prikaz sljedećeg: Kreirao: item.imevlasnikakorisnika 7. Nakon prikaza kontrole za ImeVlasnikaKorisnika, dodajte span tag i helper za prikaz riječi Kreirano: item.datumkreiranja 8. Nakon prikaza kontrole za DatumKreiranja, dodajte Html.ActionLink helper za prikaz veze za jedan graf view pomoću sljedećih podataka: Link Text: Details View Name: Details Parametar: za id parametar proslijedite item.grafid 9. Dodajte još jedan Html.ActionLink helper za prikaz veze za brisanje pomoću sljedećih podataka: Link Text: Details View Name: Details Parametar: za id parametar proslijedite item.grafid 10. Spremite promjene u _GrafGallery.cshtml datoteci. Zadatak 4: Korištenje _GrafGallery-a 1. Izmjenite Index metodu u GrafController.cs datoteci, tako da se ne predaje zadani model klase je Index view-u. 2. Kreirajte view za Index metodu u GrafController.cs datototeci pomoću sljedećih podataka: Name: Index View type: Not strongly typed Layout or master page: None 3. U Index.cshtml datototeci, promijenite Title u Graf Index. 7

8 4. Dodajte h2 tag u body stranice za prikaz naslova 'Graf Index'. 5. Dodajte p tag s linkom na Create metodu u GrafController-u pomoću sljedećih podataka: Helper: Html.ActionLink Link Text: Kreiraj novi / Create New Action Name: Create Contoller Name: Graf 6. Umetnite _GrafGallery partial view pomoću sljedećih podataka: Helper: Html.Action Action Name: _GrafGallery Controller Name: Graf 7. Spremite promjene u Index.cshtml datoteci. Vježba 4: Dodavanje Home view-a i testiranje viewova U ovoj vježbi, razviti ćete početnu stranicu koja koristi objekt graf galerije, ali prikazuje samo tri najnovija grafa. Glavni zadaci ove vježbe su: 1. Dodavanje kontrolera i view-a za početnu stranicu. 2. Korištenje web aplikacije. Zadatak 1: Dodavanje kontrolera i view-a za početnu stranicu 1. Dodajte novi kontroler za početnu stranicu pomoću sljedećih podataka: Controller name: HomeController Template: Empty MVC Controller 2. Dodajte novi view za Index metodu u HomeController-u pomoću sljedećih podataka: View Name: Index View type: Not strongly typed Layout or master page: None 3. Postavite za novododani view naslov: Početna stranica 8

9 4. Dodajte sljedeći tekst u novododani view: Registrirajte se, uploadirajte, podijelite i komentirajte. 5. Ispod teksta dodajte h2 tag za prikaz naslova: Novododane slike grafova: 6. Umetnite _GrafGallery partial view pomoću sljedećih podataka: Helper: Html.Action Action Name: _GrafGallery Controller Name: Graf Parametar: za brojčani parametar, proslijedite vrijednost 3 7. Spremite promjene u Index.cshtml datoteci. Zadatak 2: Korištenje web aplikacije 1. Pokrenite debugiranje aplikacije OnlineVrijednosnice. 2. Provjerite broj prikazanih grafova na početnoj stranici. 3. Prikažite detalje jednog grafa po vlastitom izboru kako biste utvrdili da sadrži sve potrebne podatke. 4. Provjerite broj prikazanih grafova na Svi Slike stranici. 5. Dodajte novi Graf po vašem izboru pomoću sljedećih podataka: Naslov: Moj prvi uploadirani Graf Opis: Ovo je prvi test kreiranja novog Grafa u OnlineVrijednosnice aplikaciji. Upload slike (Izvor): zse.hr 6. Zatvorite Internet Explorer i Microsoft Visual Studio. 9