czwartek, 7 czerwca 2012

ASP.NET MVC: odc.1 (intro + Razor)

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):

image

image

image

dynamic: ViewBag i Model

image

Ścisłe typowanie modelu za pomocą @model

image

Unit testy

image

 

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

Brak komentarzy: