Mając już jakieś rozeznanie w samym HTML5 postanowiłem sobie uporządkować i uzupełnić wiedzę na temat najnowszych odmian ASP.NET MVC (3 i 4), a także współdziałania ASP.NET z jQuery, ASP.NET i HTML5 i innych ostatnich nowości związanych z ASP.NET.
Na początek jakieś intro dla ASP.NET MVC 3 (na podstawie darmowego wprowadzenia):
dynamic: ViewBag i Model
Ścisłe typowanie modelu za pomocą @model
Unit testy
Teraz przejdźmy do moich notatek z Razora…
Razor
Szablon + data = output
@foreach(var item in Model) {
<tr>
<td>
@Html.ActionLink(“Edit”, “Edit”, new { id = item.ID }
</td>
<td>
@item.Title
</td>
</tr>
}
@{
//blok kodu
zmienna = wartość;
}
@zmienna
@@xxx - wyświetla @xxx
@* …
… *@ - komentarz
<img src=”@(zmienna).png” />
@{
if (warunek) {
<div>tekst diff</div>
}else{
<text>sam tekst</text>
}
}
Kontroler:
public ActionResult Index() {
ViewData[“Message”] = “mks…”;
return View(productList);
}
Widok:
@using MyProject.Models
@model IEnumerable<Product> //statyczny typ modelu
@ViewData[“Message”]
HTML Helpers
- Url helpers
- Ajax helpers
- inne/nowe
@Html.Raw(product.HtmlDescription) //jeśli w property obiektu jest string będący HTML, który chcemy wyświetlić jako HTML
Widoki częściowe (partial views)
@foreach(var product in Model)
{
@Html.Partial(“_Product”, product) //zwraca stringa zamiast bezpośredniego wypisywania do Response
}
Scaffolding - generowanie np. widoku ze szczegółami dla encji <fieldset> </fieldset>
Layout Views - coś jak master-pages dla Razora
Widok:
@{
Layout = null; //wyłączenie domyślnego layout view, wtedy ręcznie całość od <!DOCTYPE html>
}
@{
Layout = “~/Views/Shared/_Layout.cshtml”; //jawne określenie layoutu
}
Layout - ogólny markup strony z nagłówkami, sekcjami HTML z metodami RenderBody() i RenderSection()
@Url.Content(“…”) //przy imporcie skryptów
@if(IsSectionDefined(“header”)) {
@RenderSection(“header”, required: false)
}
<body>
@RenderBody()
</body>
Widok:
@section header {
<h3>Nagłówek MKS</h3>
}
_ViewStart:
- _ViewStart.cshtml - wykonuje się przed wszystkimi renderami
- aby nadpisać w przypadku konkretnego widoku należy wrzucić taki plik do jego folderu
Konfiguracja - w sekcji <system.web.webPages.razor>, uwaga: handlery
Posty
.png){kind=link}
Brak komentarzy:
Prześlij komentarz