Разработка представлений

1.

Разработка
представлений
МОДУЛЬ 6

2.

План
View
Razor Engine
Layout
Html Helpers
Url Helpers
Templates

3.

View
Представление отвечает за предоставление
пользовательского интерфейса (UI) пользователю. После
того, как контроллер выполнил соответствующую логику
для запрошенного URL, он делегирует отображение
представлению.

4.

5.

6.

7.

ViewResult
/Views/Имя_контроллера/Имя_представления.cshtml
/Views/Shared/Имя_представления.cshtml

8.

ViewResult
View():
использует название вызывающего экшена.
View(string viewName):
переопределяет имя представления.
View(object model):
передает модель.
View(string viewName, object model):
переопределяет имя представления и передает в него модель.

9.

10.

11.

View
Html
Razor syntax
Html Helpers

12.

Razor View Engine

13.

Razor View Engine
Вывод текста в блоке кода

14.

Razor View Engine
Вывод текста в блоке кода

15.

Razor View Engine
функции

16.

Razor View Engine
@ для написания server side code.
@{* code * } для написания блока server side code.
@: для отображения текста из блока кода.
<text></<text> для отображения текста из блока кода.
@if{ }
@for
@model позволяет использовать модель во всем view.

17.

Передача данных в представление
View Model
ViewBag
ViewData
TempData
TempData.Keep();

18.

Передача данных в представление
ViewBag, ViewData
ViewData["CurrentTime"] = DateTime.Now;
ViewBag.CurrentTime = DateTime.Now;
ViewBag.CurrentTime эквивалент ViewData["CurrentTime"]

19.

Передача данных в представление
ViewBag, ViewData
@Html.TextBox("name", ViewBag.Name) will fail
@Html.TextBox("name", ViewData["Name"])
или
@Html.TextBox("name", (string)ViewBag.Name)

20.

Передача данных в представление

21.

Partial View
@{Html.RenderPartial("Partial");}
результат напрямую пишет вывод в выходной поток
@Html.Partial("Partial")
возвращает MvcHtmlString
@{Html.RenderAction(“Menu")}
@Html.Action("Menu")

22.

Demo

23.

Layout
Мастер-страницы

24.

Layout
Мастер-страницы
_Layout.chtml
•RenderBody: exactly one
•RenderSection: zero or more
_ViewStart.cshtml

25.

26.

Layout
Мастер-страницы

27.

Layout
Мастер-страницы

28.

_ViewStart.cshtml
выполнение перед каждой Full View

29.

Static Data
(Bundling and Minification)
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")

30.

Demo

31.

Html Helpers

32.

Html Helper
Strongly Typed Html Helper Html Control
Html.ActionLink
<a>
Html.RouteLink
<a>

33.

Html Helpers
Html.ActionLink

34.

Html Helpers
Html.RouteLink

35.

Url Helpers
Url.Action
Url.RouteUrl
Url.Content

36.

Html Helper
Strongly Typed Html Helper Html Control
Html.TextBox
Html.TextBoxFor
<input type="text">
Html.TextArea
Html.TextAreaFor
<textarea>
Html.CheckBox
Html.CheckBoxFor
<input type="checkbox">
Html.RadioButton
Html.RadioButtonFor
<input type="radio">
Html.DropDownList
Html.DropDownListFor
<select>
Html.Hidden
Html.HiddenFor
<input type="hidden">
Html.Password
Html.PasswordFor
<input type="password">
Html.Label
Html.LabelFor
<label>

37.

Html Helpers

38.

Html Helpers

39.

Html Helper
Strongly Typed Html Helper Html Control
Html.Display
Html.DisplayFor
Html text
Html.DisplayText
Html.Editor
Html.DisplayTextFor
Html.EditorFor
Html text
Generates Html controls
based on data type of
specified model property
e.g. textbox for string
property, numeric field for
int, double or other numeric
type.
Html.DisplayForModel
Html.EditorForModel

40.

Html.Editor
Property DataType
string
Html Element
<input type="text" >
int
<input type="number" >
decimal, float
<input type="text" >
boolean
<input type="checkbox" >
Enum
<input type="text" >
DateTime
<input type="datetime" >
string
<input type="text" >

41.

Html.Editor

42.

Html.Editor

43.

Html Helper
Html.BeginForm
Strongly Typed Html Helper Html Control
<form>

44.

Html Helper
Html.ValidationMessage
Html.ValidationSummary
Strongly Typed Html Helper
Html.ValidationMessageFor

45.

Custom Html Helper
in class

46.

Custom Html Helper
in view

47.

Templates
Editor
Display

48.

Templates