Podstawy odstawy

ASP.NET
MVC
3
Podstawy
odstawy
1
Zaawansowane programowanie internetowe
inter
Instrukcja nr 3
1. Cel zajęć
Celem zajęć jest zapoznanie się z podstawami ASP.NET MVC 2.0 Framework.
Framework
2. Zadanie
Proszę zbudować prostą aplikację WWW przy zastosowaniu framework’a ASP.NET MVC 2.0
W tym celu należy wykonać odpowiednie kroki:
worzenie projektu
I. Stworzenie
a) Tworzymy nowy projekt
b) Jako typ projektu wybieramy ASP.NET MVC 2 Web Application z grupy Web
c)
W kolejnym oknie, w którym decydujemy czy chcemy stworzyć również projekt do
testowania aplikacji wybieramy opcję „No, do not create a unit test
te project”.
2
Zaawansowane programowanie internetowe
inter
Instrukcja nr 3
II. Stworzenie bazy danych
a) Do katalogu App_data dodajemy nową bazę (SQL Server Database), którą
nazywamy np. „Kontakty”.
b) Dodajemy do bazy danych tabele, zgodnie z diagramem poniżej:
Adresy
Column Na...
Data Type
ID
int
Ulica
varchar(100)
NrDomu
int
NrMieszkania
int
KodPocztowy
varchar(6)
Miejscowosc
varchar(100)
TypAdresu
varchar(100)
IDOsoby
int
Allow Nulls
Osoba
FK_Adresy_Osoba
FK_Telefony_Osoba
Telefony
Column Name
Data Type
ID
int
NrTelefonu
int
TypNumeru
varchar(50)
IDOsoby
int
Allow Nulls
Column Name
Data Type
ID
int
Imie
varchar(100)
DrugieImie
varchar(100)
Nazwisko
varchar(100)
Allow Nulls
III. Stworzenie modelu
a) Do katalogu Model dodajemy mapowanie LinqToSql.
b) Następnie w tym samym katalogu proszę stworzyć klasę oraz interfejs zgodnie
z kodem przedstawionym poniżej:
public class OsobaModel
{
public int ID { get; set; }
public string Imie { get; set; }
public string DrugieImie { get; set;
; }
public string Nazwisko { get; set;
; }
}
public interface IOsobaUslugi
{
List
List<OsobaModel>
ZwrocOsoby();
OsobaModel ZwrocOsobyWgID(int ID);
void DodajOsobe(OsobaModel osoba);
void EdytujOsobe(OsobaModel osoba);
void UsunOsobe(OsobaModel osoba);
}
3
Zaawansowane programowanie internetowe
inter
Instrukcja nr 3
Proszę następnie o zdefiniowanie klasy np. OsobaUslugi,
OsobaUslugi która implementuje
powyższy interfejs.
d) Kolejnym krokiem, jest stworzenie podobnych klas dla tabeli Telefon. Jedna z klas
powinna implementować poniższy interfejs:
c)
public interface ITelefonUslugi
{
List<
<TelefonModel>
> PobierzTelefonyDlaOsoby(int
PobierzTelefonyDlaOsoby(
IDOsoby);
TelefonModel PobierzTelefonWgID(int ID);
void DodajNumer(TelefonModel telefon);
void EdytujNumer(TelefonModel telefon);
void UsunNumer(TelefonModel telefon);
}
IV. Stworzenie kontrolerów
a) Otwieramy
twieramy okno Solution Explorer.
b) Klikamy prawym przyciskiem myszy na katalogu „Controllers”
„Controllers i wybieramy opcję
Add > New Controller
c)
W wyświetlonym oknie dialogowym podajemy
podajemy nazwę nowego kontrolera
„OsobaController”
Controller” oraz zaznaczamy opcję „Add action methods for Create, Update,
Delete and Details scenarios”. Dzięki tej zaznaczeniu tej opcji Visual
Vi
Studio
wygeneruje dla nas szablon dla podstawowych akcji pozwalających m. in. na
dodwanie, edycję i usuwanie danych.
4
Zaawansowane programowanie internetowe
inter
Instrukcja nr 3
d) Kod wygenerowanej klasy przedstawia się następująco:
public class OsobyController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Details(int id)
{
return View();
}
public ActionResult Create()
{
return View();
}
[HttpPost
HttpPost]
public ActionResult Create(FormCollection
FormCollection collection)
{
try
{
return RedirectToAction("Index");
);
}
catch
{
return View();
}
}
public ActionResult Edit(int id)
{
return View();
}
[HttpPost
HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
try
ry
{
return RedirectToAction("Index");
);
}
catch
{
return View();
}
}
public ActionResult Delete(int id)
{
return View();
}
5
Zaawansowane programowanie internetowe
inter
Instrukcja nr 3
[HttpPost
HttpPost]
public ActionResult Delete(int id,
FormCollection collection)
{
try
{
return RedirectToAction("Index");
);
}
catch
{
return View();
}
}
}
Państwa zadaniem obecnie będzie wypełnienie poszczególnych metod,
odpowiednim kodem. Należy zwrócić uwagę na fakt, że niektóre
ni
metody mają te
same nazwy (np. ,). Pierwsza z nich ()) wywoływana jest przed danym
działaniem (w tym przypadku stworzeniem
stworzeniem artykułu) i ma za zadanie stworzenie
oraz zwrócenie użytkownikowi odpowiedniego widoku
widok (np. formularz do
wprowadzania danych).
danych). Druga jest wywoływana po przesłaniu przez
prze użytkownika
danych i w większości przypadków odpowiada za wywołanie funkcji modyfikującej
zawartość bazy danych.
Ponieważ
onieważ akcje są wywoływane na podstawie nazwy, aby
a
możliwe było ich
rozróżnienie konieczne jestt oznaczenie jednej z nich za pomocą atrybutu
rozróżnienie,
[HttpPost
HttpPost]. Atrybut ten określa, że dana metoda może być wywołana tylko
jeżeli żądanie zostało przesłane za pomocą metody POST. W przypadku, gdy
metoda nie posiada tego atrybutu może być wywołana tylko jeżeli żądanie
ż
za
pomocą metody GET.
e) Proszę o zmodyfikowanie wygenerowanego szablonu zgodnie z kodem
przedstawionym poniżej:
public class OsobaController : Controller
{
IOsobaUslugi _osoby;
ITelefonUslugi _telefony;
public OsobaController() :
this(new OsobaUslugi(), new TelefonUslugi())
TelefonUslugi
{
}
public OsobaController(
IOsobaUslugi osobaUslugi,
ITelefonUslugi telefonyUslugi)
{
_osoby = osobaUslugi;
_telefony = telefonyUslugi;
}
6
Zaawansowane programowanie internetowe
inter
Instrukcja nr 3
public ActionResult Index()
{
ViewData["Osoby"]
] = _osoby.ZwrocOsoby();
return View();
}
public ActionResult Details(int id)
{
OsobaModel osoba = _osoby.ZwrocOsobyWgID(id);
ViewData["Imie"]
] = osoba.Imie;
ViewData["DrugieImie"]
] = osoba.DrugieImie;
ViewData["Nazwisko"]
] = osoba.Nazwisko;
ViewData["ID"] = osoba.ID;
ViewData["Telefony"] =
_telefony.PobierzTelefonyDlaOsoby(id);
return View();
}
public ActionResult Create()
{
return View();
}
[HttpPost]
public ActionResult Create(OsobaModel
OsobaModel osoba)
{
try
{
_osoby.DodajOsobe(osoba);
return RedirectToAction("Index"
"Index");
}
catch
{
return View();
}
}
public ActionResult Edit(int id)
{
OsobaModel osoba = _osoby.ZwrocOsobyWgID(id);
ViewData["Imie"]
] = osoba.Imie;
ViewData["DrugieImie"]
] = osoba.DrugieImie;
ViewData["Nazwisko"]
] = osoba.Nazwisko;
ViewData["ID"] = osoba.ID;
return View();
}
7
Zaawansowane programowanie internetowe
inter
Instrukcja nr 3
[HttpPost]
public ActionResult Edit(int id, OsobaModel osoba)
{
try
{
_osoby.EdytujOsobe(osoba);
return RedirectToAction("Index"
"Index");
}
catch
{
return View();
}
}
public ActionResult Delete(int id)
{
return View();
}
[HttpPost]
public ActionResult Delete(int id,
FormCollection collection)
{
try
{
return RedirectToAction("Index"
"Index");
}
catch
{
return View();
}
}
}
Słownik ViewData pozwala na przesyłanie danych pomiędzy kontrolerem
i widokiem, który będzie tworzony w następnym punkcie. Słownik ten
przechowuje obiekty typu object, tak więc w widoku konieczne będzie ich
zrzutowanie na odpowiedni typ.
Do metod,
metod, których zadaniem jest przetwarzanie danych uzyskanych
z formularzy HTML, wymagane informacje mogą być przekazane albo za
pomocą kolekcji
kolekcji typu FormCollection albo wykorzystać możliwości
framework’a pozwalające na automatyczne zrzutowanie uzyskanych danych
na odpowiedni typ danych. W przypadku kolekcji FormCollection
FormCollec
wszystkie
informacje przekazywane są tylko w postaci tekstowej, tak więc odpowiednie
konwersje należy wykonać samemu.
Jeżeli skorzystamy z możliwości ASP.NET MVC Framework należy jedynie
pamiętać, aby odpowiednie pola do wprowadzania danych w widoku
nazywały się dokładnie tak jak właściwości obiektu przekazywanego jako
param
parametr.
8
Zaawansowane programowanie internetowe
inter
Instrukcja nr 3
V. Stworzenie widoków
a) Mając otwarty kod kontrolera, który przygotowaliśmy w poprzednim punkcie
proszę
kliknąć
prawym
klawiszem
myszy
wewnątrz
metody
public ActionResult Edit(int id) i wybrać pozycję „Add View”.
b) W wyświetlonym
wyświetlonym okienku do generowania widoku poszczególne pola wypełniamy
tak, jak na poniższym rysunku
Kliknięcie przycisku Add spowoduje wygenerowanie odpowiedniego szablonu pliku
z widokiem, który będzie korzystał z pliku zawierającego kod strony typu Master
Page „~/Views/Shared/Site.Master
~/Views/Shared/Site.Master”.
”. Plik ten zostanie automatycznie umieszczony
w odpowiednim katalogu.
9
Zaawansowane programowanie internetowe
inter
Instrukcja nr 3
c)
W pliku z widokiem odszukujemy kontrolkę typu Content, której właściwość
„ContentPlaceHolderID”
ContentPlaceHolderID” jest ustawiona na wartość „MainContent”.
d) Wewnątrz niej wystawiamy
wystawiamy kod naszego formularza pozwalającego na edycję
danych:
<h2>Edit
Edit</h2>
<form enctype="application/x-www-form-urlencoded"
enctype
urlencoded"
method
method="post"
action
action="/Osoba/Edit/<%:
ViewData["ID"] %>">
<input type="hidden"
type
name="ID" value="<%:
:ViewData["ID"] %>"/>
<fieldset
fieldset>
<div class="editor-field">
class
<label
label for="Imie">Imię</label>
<input
input type="text" name="Imie"
value="<%: ViewData["Imie"] %>"
"/>
</div>
<div class="editor-field">
class
<label
label for="DrugieImie">Drugie imię</label
label>
<input
input type="text" name="DrugieImie"
value="<%: ViewData["DrugieImie"] %>"/>
</div>
<div class="editor-field">
class
<label
label for="Nazwisko">Nazwisko</label>
>
<input
input type="text" name="Nazwisko"
value="<%: ViewData["Nazwisko"] %>"/>
</div>
<div class="editor-field">
clas
<input
input type="submit" value="OK" />
</div>
</fieldset
fieldset>
</form>
<div>
<a href="/Osoba">Wróć
href
do listy osób</a
a>
</div>
W powyższym kodzie należy zwrócić uwagę na dwa elementy: adresy
w odnośnikach oraz sposób wstawiania danych przek
przekazywanych do widoku
z kontrolera.
W
połączeniach
należy
wprowadzać
trasy
w
formacie
/<nazwa kontrolera>/<nazwa akcji>/<parametry>, natomiast dane, które mają być
wygenerowane na stronie powinno się umieszczać wewnątrz specjalnego zestawu
znaczników „<%: %>”.
e) Kolejnym krokiem, będzie stworzenie widoku dla akcji Index. W tym celu należy
podjąć podobne kroki jak powyżej, wprowadzając oczywiście inny kod (w tym
przypadku w instrukcji umieszczony jest kompletny kod strony):
10
Zaawansowane programowanie internetowe
inter
Instrukcja nr 3
<%@ Page Title="" Language="C#"
MasterPageFile="~/Views/Shared/Site.Master"
MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
Inherits="System.Web.Mvc.ViewPage<dynamic>"
<%@ Import Namespace="Lab03.Models" %>
<asp:Content
Content ID="Content1"
ContentPlaceHolderID
ContentPlaceHolderID="TitleContent"
runat="server">
Index
</asp:Content
Content>
<asp:Content
Content ID="Content2" ContentPlaceHolderID="MainContent"
ContentPlaceHolderID
runat
runat="server">
<h2>Index
Index</h2>
<a href="/Osoba/Create/">
="/Osoba/Create/">Dodaj
Dodaj nową osobę</a>
osobę
<%if (((List<OsobaModel>)ViewData["Osoby"
(((
"Osoby"]).Count > 0)
{%>
<table
table>
<tr>
<th
th>Imie</th>
<th
th>Nazwisko</th>
<th
th></th>
</tr>
>
<% foreach (OsobaModel o in
(List<OsobaModel>)ViewData[
>)ViewData["Osoby"])
{ %>
<tr>
<td><%: o.Imie%></td>
<td><%: o.Nazwisko%></td>
<td>
<a href="/Osoba/Details/<%: o.ID %>">Pokaż</a>
<a href="/Osoba/Edit/<%: o.ID %>">Edytuj</a>
</td>
</
</tr>
<%}
} %>
</table
table>
<%}
else
{ %>
<div>
>Nie
Nie wprowadzono jeszcze żadnych osób</div>
osób
<%} %>
</asp:Content
Content>
Linijka ta odpowiada
odpowiada za podłączenie do widoku wymaganej przestrzeni nazw. Jest
to konieczne, ponieważ do widoku przekazujemy listę obiektów typu Osoba.
Należy jednak pamiętać, że poprzez ViewData mogą być tylko przekazywane
obiekty typu Object, należy więc dokonać odpowiedniego
odpowiedniego rzutowania . Bez
dołączenia przestrzeni klas w której znajduje się klasa Osoba, rzutowanie to nie
było by możliwe.
Sprawdzenie czy przekazana do widoku lista
lista zawiera jakieś obiekty. Jeżeli tak, to
generujemy tabelę osób. W przeciwnym przypadku
przypadku generujemy komunikat „Nie
wprowadzono jeszcze żadnych osób”. Należy zwrócić szczególną uwagę na zestaw
znaczników, który został tu zastosowany „<% %>” Wewnątrz tych znaczników
11
Zaawansowane programowanie internetowe
inter
Instrukcja nr 3
umieszczamy wewnątrz widoku kod C#, który ma zostać wykonany, ale który sam
nie generuje fragmentów wynikowego kodu strony WWW.
Ten fragment kodu prezentuje w jaki sposób można w widoku przechodzić po
kolekcji danych i dla każdego obiektu z tej kolekcji generować np. wiersz w tabeli.
f)
Proszę rozbudować stronę Master Page, aby możliwy był z niej dostęp do
generowanej strony. Należy dołączyć do niej (np. jako pozycję menu) odnośnik do
kontrolera „OsobaController”
„Osob
VI. Zadania do samodzielnego wykonania
1.
2.
3.
4.
Proszę stworzyć pozostałe, brakujące widoki.
a. Widok do akcji Create będzie bardzo podobny do widoku z akcji Edit. Nie
będzie zawierał tylko fragmentów pozwalających na umieszczenie treści
wewnątrz generowanych kontrolek.
b. Widok dla akcji Details powinien wyświetlać szczegółowe informacje o osobie
w tym odpowiednie adresy i numery telefonów.
telefo
Proszę dopisać kod brakujących akcji Delete.
Proszę stworzyć kod pozwalający na dodawanie, modyfikowanie i usuwanie
numerów telefonów i adresów. Dla każdego z tych elementów powinien być
stworzony osobny kontroler i zestaw widoków.
Jeżeli ktoś nie skończy
skończy tworzenia tej aplikacji na zajęciach, bardzo proszę
o dokończenie jej w domu i przyniesienie na następne laboratorium, gdyż będzie
ona modyfikowana.
12
Zaawansowane programowanie internetowe
inter
Instrukcja nr 3