Home > .NET 4.0, ASP.NET, C#, MVC, Visual Studio, Web > [PL] Brzytwa w ASP.NET – MVC 3 Razor

[PL] Brzytwa w ASP.NET – MVC 3 Razor

November 7, 2010 Leave a comment Go to comments

W większości osób ASP.NET kojarzy się ze stronami .aspx i dużą liczbą kontrolek, ale część nie ma pojęcia, że w świecie .NET od długiego czasu istnieje także wzorzec MVC. Sama koncepcja wzorca powstała już spory czas temu i w swojej budowie nie jest skomplikowana. Podstawy można znaleźć na wikipedii na stronie polskiej oraz bardziej szczegółowo w angielskiej. Nie chciałbym tutaj opisywać samego wzorca MVC, ale przedstawić co nowego możemy znaleźć w nadchodzącym, trzecim już wydaniu Microsoft ASP.NET MVC3 – a dokładniej przyjrzymy się nowemu View Engine o nazwie Razor.

Nowe wydanie MVC 3 (jeszcze w fazie beta) dostępne jest z poziomu Visual Studio 2010. Najłatwiej możemy go zainstalować używając do tego celu WebPlatform Installer (WPI) – jest to mała aplikacja, pozwalająca nam zainstalować moduły, które potrzebujemy (od samego VS po różnego rodzaju frameworki, bazę danych). Oprócz samego MVC 3 potrzebny będzie moduł ASP.NET WebPages (również dostępny z poziomu WPI). Po zainstalowaniu wszystkich komponentów i uruchomieniu VS możemy wybrać projekt MVC3. Po jego wybraniu pojawia się nowe okno z szczegółami projektu – nas interesuje głównie View Engine Razor, które wybieramy z listy rozwijanej (warto wybrać szablon Empty – dzięki temu będzie można od podstaw zapoznać się z nowymi elementami).

New MVC project window

Po utworzeniu projektu mamy strukturę katalogów zawierającą głównie plik global.asax oraz zestaw skryptów JavaScript. Na początek dodamy MasterPage do naszej strony. W tym celu dodajemy element do strony (klikając na projekt i z menu kontekstowego wybieramy Add->New Item). Pojawi się okno, z którego wybieramy MVC Layout Page – odpowiednika Master Page znanego ze zwykłego ASP.NET

Add new item - select MVC Layout Page

Do projektu została dodana strona o nazwie _MainLayout.cshtml. Jak widać pojawiło się nowe rozszerzenie cshtml – jeżeli wolimy programować w Visual Basicu, to rozszerzenie zmieni nazwę vbhtml – strony tego typu są stronami obsługiwanymi przez Razor ViewEngine. Spójrzmy teraz jak wygląda sama zawartość tej strony

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>@View.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

Jak widać jest to zwykła strona zawierająca HTML, różniąca się jedynie dodanymi znacznikami zaczynającymi znakiem @ – jest to znak rozpoznawczy stron wykorzystujących Razora.

Mając naszą “MasterPage” dodajmy do projektu stronę z treścią. W tym celu wybieramy nowy element, a z listy MVC 3 View Page with Layout (Razor)

Do projektu została dodana kolejna strona, tym razem zawierająca jedynie poniższy fragment na początku, wskazujący na nasz “MasterPage”:

@{
    Layout = "~/_MainLayout.cshtml";
}

Strony internetowe często składają się z fragmentów: stropki, lewej części zawierającego jakąś listę, nagłówka itp. Tworząc nasz “LayoutPage” możemy w łatwy sposób rozmieścić poszczególne elementy na stronie, za pomocą RenderSection, przyjmującego nazwę sekcji strony:

<div class="footer">
	@RenderSection("footer", optional:true)
</div>

Powyżej wykorzystano nazwany parametr optional informujący o tym, że występowanie definicji sekcji jest opcjonalne w stronie z treścią. Samo odwołanie w stronie z treścią wygląda następująco:

@section footer {
	<b>Tak definiujemy stopkę konkretnej strony</b>
}

Zalety i wskazówki

Powyżej opisałem jedynie fragment możliwości nowego View Engine ASP.NET MVS 3 – jest to ogólny wygląd. Strony wykorzystujące Razora są czytelniejsze, nie musimy tak jak dotychczas wykorzystywać znaczników początku i końca bloku kodu wewnątrz HTML. Są też dosyć inteligentne, wiedzą gdzie należy zakończyć blok kodu. Przykładem jest poniższy warunek. Jeżeli chcemy wyświetlić informację, zależnie od wybranej daty znajdującej się w zmiennej selectedDate, możemy użyć takiego fragmentu kodu:

@if (selectedDate > DateTime.Now) {
	Wybrałeś termin w przyszłości
} else {
	<b>Wybrałeś starszy termin</b>
}

Jak można zauważyć, w linii z kodem else i w linii zamykającej blok else nie użyto znaku @. Kompilator sam wykrył, że poszczególne znaczniki należą do bloku if.

Kolejnym udogodnieniem jest wskazywanie, jakiego modelu dotyczy dana strona. Przykładowo, jeżeli nasza strona wyświetla listę produktów Products, wystarczy, że na początku dodamy znacznik @mode i wskażemy że jest to lista produktów :

@model IList<MyProject.Models.Products>

Innym przykładem jest możliwość dodawania własnych funkcji pomocniczych.  Przykładowo chcąc wyświetlić datę w odpowiednim formacie na stronie w kilku miejscach, możemy napisać jedną funkcję pomocniczą, jak pomiżej

@helper ShowDate(DateTime date) {
	<b>Dzisiaj jest: @date.ToString()</b>
}

a następnie odwołać się w ten sposób

@ShowDate(DateTime.Now)

Co więcej

oprócz nowego View Engine, ASP.NET MVC 3 wprowadza także inne ciekawe narzędzia. Przykładem jest menedżer pakietów NuPack, za pomocą którego możemy dodawać różnego rodzaju dodatkowe dll’ki. Dodatkowo dodane zostały kolejne funkcje pomocnicze – np. WebGrid pozwalające wyświetlić np. dane z bazy. Całą listę nowości oraz plany dalszego rozwoju MVC 3 można znaleźć na stronach MVC Release Notes, oraz MVC3 Road Map.
Linki

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: