Представления. Проектирование и разработка веб-сервисов

Нажмите для полного просмотра!

Представления. Проектирование и разработка веб-сервисов, слайд №2

Представления. Проектирование и разработка веб-сервисов, слайд №3

Представления. Проектирование и разработка веб-сервисов, слайд №4

Представления. Проектирование и разработка веб-сервисов, слайд №5

Представления. Проектирование и разработка веб-сервисов, слайд №6

Представления. Проектирование и разработка веб-сервисов, слайд №7

Представления. Проектирование и разработка веб-сервисов, слайд №8

Представления. Проектирование и разработка веб-сервисов, слайд №9

Представления. Проектирование и разработка веб-сервисов, слайд №10

Представления. Проектирование и разработка веб-сервисов, слайд №11

Представления. Проектирование и разработка веб-сервисов, слайд №12

Представления. Проектирование и разработка веб-сервисов, слайд №13

Представления. Проектирование и разработка веб-сервисов, слайд №14

Представления. Проектирование и разработка веб-сервисов, слайд №15

Представления. Проектирование и разработка веб-сервисов, слайд №16

Представления. Проектирование и разработка веб-сервисов, слайд №17

Представления. Проектирование и разработка веб-сервисов, слайд №18

Представления. Проектирование и разработка веб-сервисов, слайд №19

Представления. Проектирование и разработка веб-сервисов, слайд №20

Представления. Проектирование и разработка веб-сервисов, слайд №21

Представления. Проектирование и разработка веб-сервисов, слайд №22

Представления. Проектирование и разработка веб-сервисов, слайд №23

Представления. Проектирование и разработка веб-сервисов, слайд №24

Представления. Проектирование и разработка веб-сервисов, слайд №25

Представления. Проектирование и разработка веб-сервисов, слайд №26

Представления. Проектирование и разработка веб-сервисов, слайд №27

Представления. Проектирование и разработка веб-сервисов, слайд №28

Представления. Проектирование и разработка веб-сервисов, слайд №29

Представления. Проектирование и разработка веб-сервисов, слайд №30

Представления. Проектирование и разработка веб-сервисов, слайд №31

Представления. Проектирование и разработка веб-сервисов, слайд №32

Представления. Проектирование и разработка веб-сервисов, слайд №33

Представления. Проектирование и разработка веб-сервисов, слайд №34

Представления. Проектирование и разработка веб-сервисов, слайд №35

Представления. Проектирование и разработка веб-сервисов, слайд №36

Представления. Проектирование и разработка веб-сервисов, слайд №37

Представления. Проектирование и разработка веб-сервисов, слайд №38

Представления. Проектирование и разработка веб-сервисов, слайд №39

Представления. Проектирование и разработка веб-сервисов, слайд №40

Представления. Проектирование и разработка веб-сервисов, слайд №41

Представления. Проектирование и разработка веб-сервисов, слайд №42

Представления. Проектирование и разработка веб-сервисов, слайд №43

Представления. Проектирование и разработка веб-сервисов, слайд №44

Представления. Проектирование и разработка веб-сервисов, слайд №45

Представления. Проектирование и разработка веб-сервисов, слайд №46

Представления. Проектирование и разработка веб-сервисов, слайд №47

Представления. Проектирование и разработка веб-сервисов, слайд №48

Представления. Проектирование и разработка веб-сервисов, слайд №49

Представления. Проектирование и разработка веб-сервисов, слайд №50

Представления. Проектирование и разработка веб-сервисов, слайд №51

Представления. Проектирование и разработка веб-сервисов, слайд №52

Представления. Проектирование и разработка веб-сервисов, слайд №53

Представления. Проектирование и разработка веб-сервисов, слайд №54

Представления. Проектирование и разработка веб-сервисов, слайд №55

Представления. Проектирование и разработка веб-сервисов, слайд №56

Представления. Проектирование и разработка веб-сервисов, слайд №57

Представления. Проектирование и разработка веб-сервисов, слайд №58

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Представления. Проектирование и разработка веб-сервисов. Доклад-сообщение содержит 58 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Представления Проектирование и разработка веб-сервисов

Слайд 2

Описание слайда:

Вводные понятия Структура веб-приложения Шаблоны приложений ASP.NET Core Структура проекта ASP.NET Core Концепция паттерна MVC

Слайд 3

Описание слайда:

Представления (View) В большинстве случаев при обращении к веб-приложению пользователь ожидает получить веб-страницу с какими-нибудь данными. В MVC для этого, как правило, используются представления, которые и формируют внешний вид приложения. В ASP.NET MVC Core представления - это файлы с расширением cshtml, которые содержат код пользовательского интерфейса в основном на языке html, а также конструкции Razor - специального движка представлений, который позволяет переходить от кода html к коду на языке C#.

Слайд 4

Описание слайда:

Простейшее представление @{ Layout = null; } Hello ASP.NET Привет ASP.NET Core!

Слайд 5

Описание слайда:

Представления Данное представление напоминает обычную страницу html. Здесь могут быть определены все стандартные элементы разметки html, здесь могут подключаться стили, скрипты. Но полноценной html-страницей представление все равно не является, потому что во время выполнения эти представления компилируются в сборки и уже затем используются для генерации html-страниц, которые видит пользователь в своем браузере.

Слайд 6

Описание слайда:

Представления Для хранения представлений в проекте ASP.NET MVC предназначена папка Views:

Слайд 7

Описание слайда:

Представления В этой папке уже есть некоторая подструктура. Во-первых, как правило, для каждого контроллера в проекте создается подкаталог в папке Views, который называется по имени контроллера и который хранит представления, используемые методами данного контроллера. Так, по умолчанию имеется контроллер HomeController и для него в папке Views есть подкаталог Home с представлениями для методов контроллера HomeController. Также здесь есть папка Shared, которая хранит общие представления для всех контроллеров. По умолчанию это файлы: _Layout.cshtml (используется в качестве мастер-страницы), Error.cshtml (использутся для отображения ошибок) _ValidationScripsPartial.cshtml (частичное представление, которое подключает скрипты валидации формы).

Слайд 8

Описание слайда:

Представления И в корне каталога Views также можно найти два файла: _ViewImports.cshtml _ViewStart.cshtml. Эти файлы содержат код, который автоматически добавляется ко всем представлениям. _ViewImports.cshtml устанавливает некоторые общие для всех представлений пространства имен, а _ViewStart.cshtml устанавливает общую мастер-страницу.

Слайд 9

Описание слайда:

Представления При необходимости мы можем добавлять в каталог Views какие-то свои представления, каталоги для представлений. И они необязательно должны быть связаны с контроллерами и их методами. Для добавления представления нужно правой кнопкой мыши на подкаталог в папке Views (или на саму папку Views) и в контекстном меню выбрать Add -> New Item. Затем в появившемся окне добавления нового элемента выбрать компонент MVC View Page:

Слайд 10

Описание слайда:

ViewResult За работу с представлениями отвечает объект ViewResult. Он производит рендеринг представления в веб-страницу и возвращает ее в виде ответа клиенту. Чтобы возвратить объект ViewResult используется метод View: public class HomeController : Controller { public IActionResult Index() { return View(); } }

Слайд 11

Описание слайда:

ViewResult Вызов метода View возвращает объект ViewResult. Затем уже ViewResult производит рендеринг определенного представления в ответ. По умолчанию контроллер производит поиск представления в проекте по следующим путям: /Views/Имя_контроллера/Имя_представления.cshtml /Views/Shared/Имя_представления.cshtml Согласно настройкам по умолчанию, если название представления не указано явным образом, то в качестве представления будет использоваться то, имя которого совпадает с именем действия контроллера. Например, вышеопределенное действие Index по умолчанию будет производить поиск представления Index.cshtml в папке /Views/Home/.

Слайд 12

Описание слайда:

ViewResult Метод View() имеет четыре перегруженных версии: View(): для генерации ответа используется представление, которое по имени совпадает с вызывающим методом View(string viewName): в метод передается имя представления, что позволяет переопределить используемое по умолчанию представление View(object model): передает в представление данные в виде объекта model View(string viewName, object model): переопределяет имя представления и передает в него данные в виде объекта model

Слайд 13

Описание слайда:

ViewResult Вторая версия метода позволяет переопределить используемое представление. Если представление находится в той же папке, которая предназначена для данного контроллера, то в метод View() достаточно передать название представления без расширения: public class HomeController : Controller { public IActionResult Index() { return View("About"); } }

Слайд 14

Описание слайда:

ViewResult В этом случае метод Index будет использовать представление Views/Home/About.cshtml. Если же представление находится в другой папке, то нам надо передать полный путь к представлению: public class HomeController : Controller { public IActionResult Index() { return View("~/Views/Some/Index.cshtml"); } }

Слайд 15

Описание слайда:

Razor В действительности при вызове метода View контроллер не производит рендеринг представления и не генерирует разметку html. Контроллер только готовит данные и выбирает, какое представление надо возвратить в качестве объекта ViewResult. Затем уже объект ViewResult обращается к движку представления для рендеринга представления в выходной ответ. По умолчанию в ASP.NET MVC Core используется один движок представлений - Razor. Хотя при желании мы можем также использовать какие-то другие сторонние движки или создать свой движок представлений самостоятельно. Цель движка представлений Razor - определить переход от разметки html к коду C#. Синтаксис Razor довольно прост - все его конструкции предваряются символом @, после которого происходит перед к коду C#. Все конструкции Razor можно условно разделить на два виде: однострочные выражения и блоки кода.

Слайд 16

Описание слайда:

Razor Пример применения однострочных выражений: Дата: @DateTime.Now.ToLongDateString() В данном случае используется объект DateTime и его метод ToLongDateString() Или еще один пример: @(20 + 30) Так как перед скобками стоит знак @, то выражение в скобках будет интерпретироваться как выражение на языке C#. Поэтому браузер выведет число 50, а не "20 + 30".

Слайд 17

Описание слайда:

Razor Но если вдруг мы создаем код html, в котором присутствует символ @ не как часть синтаксиса Razor, а сам по себе, то, чтобы его отобразить, нам надо его дублировать: @@DateTime.Now =@DateTime.Now.ToLongDateString()

Слайд 18

Описание слайда:

Razor Блоки кода могут иметь несколько выражений. Блок кода заключается в фигурные скобки, а каждое выражение завершается точкой запятой аналогично блокам кода и выражениям на C#: @{ string head = "Привет мир!!!"; head = head + " Добро пожаловать на сайт!"; } @head В блоках кода мы можем определить обычные переменные и потом их использовать в представлении.

Слайд 19

Описание слайда:

Razor Весь код в пределах блока расценивается как код c#. Однако с помощью конструкции @: мы можем в блоке кода выводить на веб-страницу текст: @{ string head = "Hello world"; @: Привет мир! head = head + "!!"; } @head

Слайд 20

Описание слайда:

Razor Если необходимо вывести значение переменной без каких-либо html-элементов, то мы можем использовать специальный снипет : @{ int i = 8; @i } @(i+1)

Слайд 21

Описание слайда:

Razor В Razor могут использоваться комментарии. Они располагаются между символами @**@ @* текст комментария *@

Слайд 22

Описание слайда:

Razor Управляющие конструкции языка C# в Razor: If, else Switch For Foreach While Do…while Using Try, catch, finally

Слайд 23

Описание слайда:

Razor – if, else @{ string head = "Привет мир"; bool isEnabled = false; } @if (isEnabled) { Добро пожаловать } else { @head }

Слайд 24

Описание слайда:

Razor – switch @{ int x = 6; } @switch(x) { case 5: @(x* x) break; case 6: @(x+ x) break; }

Слайд 25

Описание слайда:

Razor – for @for (var i = 1; i < 6; i++) { Строка: @i }

Слайд 26

Описание слайда:

Razor – while @{ int x = 1; } @while(x

Слайд 27

Описание слайда:

Razor – do…while @{ int x = 1; } @do { Строка: @x x++; } while (x < 6); Конец

Слайд 28

Описание слайда:

Razor – foreach @{ string[] phones = { "Lumia 950", "iPhone 6S", "Galaxy S 6", "LG G4" }; } @foreach (var phone in phones) { @phone }

Слайд 29

Описание слайда:

Razor – try…catch…finally @try { throw new InvalidOperationException("Что-то пошло не так"); } catch (Exception ex) { Возникло исключение: @ex.Message } finally { Блок finally }

Слайд 30

Описание слайда:

Передача данных в представление Существуют различные способы передачи данных из контроллера в представление: ViewData ViewBag TempData Модель представления

Слайд 31

Описание слайда:

ViewData ViewData представляет словарь из пар ключ-значение: public IActionResult About() { ViewData["Message"] = "Hello ASP.NET Core"; return View(); }

Слайд 32

Описание слайда:

ViewData Здесь динамически определяется во ViewData объект с ключом "Message" и значением "Hello ASP.NET Core". При этом в качестве значения может выступать любой объект. И после этому мы можем его использовать в представлении: @{ ViewData["Title"] = "About"; } @ViewData["Title"]. @ViewData["Message"] Use this area to provide additional information. Причем не обязательно устанавливать все объекты во ViewData в контроллере. Так, в данном случае объект с ключом "Title" устанавливается непосредственно в представлении.

Слайд 33

Описание слайда:

ViewBag ViewBag во многом подобен ViewData. Он позволяет определить различные свойства и присвоить им любое значение. Так, мы могли бы переписать предыдущий пример следующим образом: public IActionResult About() { ViewBag.Message = "Hello ASP.NET Core"; return View(); } И не важно, что изначально объект ViewBag не содержит никакого свойства Message, оно определяется динамически.

Слайд 34

Описание слайда:

ViewBag При этом свойства ViewBag могут содержать не только простые объекты типа string или int, но и сложные данные. Например, передадим список: public IActionResult About() { ViewBag.Countries = new List { "Бразилия", "Аргентина", "Уругвай", "Чили" }; return View(); } И также в представлении мы можем получить этот список: @foreach(string country in ViewBag.Countries) { @country }

Слайд 35

Описание слайда:

Модель представления Модель представления является во многих случаях более предпочтительным способом для передачи данных в представление. Для передачи данных в представление используется одна из версий метода View. public IActionResult About() { List countries = new List { "Бразилия", "Аргентина", "Уругвай", "Чили" }; return View(countries); }

Слайд 36

Описание слайда:

Модель представления В метод View передается список, поэтому моделью представления About.cshtml будет тип List (либо IEnumerable). И теперь в представлении мы можем написать так: @model List @{ ViewBag.Title = "About"; } В списке @Model.Count элемента @foreach(string country in Model) { @country }

Слайд 37

Описание слайда:

Модель представления В самом начале представления с помощью директивы @model устанавливается модель представления. Тип модели должен совпадать с типом объекта, который передается в метод View() в контроллере. Установка модели указывает, что объект Model теперь будет представлять объект List или список. И мы сможем использовать Model в качестве списка. Представления, для которых определена модель, еще называют строго типизированными.

Слайд 38

Описание слайда:

Мастер-страницы Когда у нас в проекте много представлений, и все они содержат какие-то общие элементы, то вместо того, чтобы пописывать все эти элементы в каждом представлении, гораздо удобнее задать один общий шаблон. В этом случае при изменении каких-то общих элементов будет достаточно изменить один раз в общем шаблоне, не изменяя всех остальных представлений. В ASP.NET MVC таким шаблоном являются мастер-страницы. Мастер-страницы применяются для создания единообразного, унифицированного вида сайта. По сути мастер-страницы - это те же самые представления, которе могут включать в себя другие представления. Например, можно определить на мастер-странице общие для всех остальных представлений меню, а также подключить общие стили и скрипты. Специальные теги позволяют вставлять в определенное место на мастер-страницах другие представления.

Слайд 39

Описание слайда:

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

Слайд 40

Описание слайда:

Мастер-страницы По умолчанию при создании нового проекта ASP.NET MVC Core в проект уже добавляется мастер-страница под названием _Layout.chtml, которую можно найти в каталоге Views/Shared. Код мастер-страницы напоминает полноценную веб-страницу: здесь присутсвуют основные теги , , и так далее. И также здесь могут использоваться конструкции Razor. Фактически это то же самое представление. Главное же отличие от обычных представлений состоит в использовании метода @RenderBody(), который является плейсхолдером и на место которого потом будут подставляться другие представления, использующие данную мастер-страницу. В итоге мы сможем легко установить для всех представлений веб-приложения единообразный стиль оформления.

Слайд 41

Описание слайда:

ViewStart По умолчанию представления уже подключают мастер-страницу за счет файла _ViewStart.cshtml. Этот файл можно найти в проекте в папке Views. Код этого файла добавляется в самое начало кода преставлений при их запуске. По умолчанию файл _ViewStart.cshtml содержит следующий код: @{ Layout = "_Layout"; } В каждом представлении через синтаксис Razor доступно свойство Layout, которое хранит ссылку на мастер-страницу. Здесь в качестве мастер страницы устанавливается файл _Layout.cshtml. При этом расширение можно не использовать. Когда будет происходить рендеринг представления, то система будет искать мастер страницу _Layout по следующим путям: /Views/[Название_контроллера]/_Layout.cshtml /Views/Shared/_Layout.cshtml

Слайд 42

Описание слайда:

ViewStart Код из _ViewStart.cshtml выполняется до любого кода в представлении. И чтобы переопределить мастер-страницу, в представлении достаточно установить свойство Layout. Мы можем вообще не использовать мастер-страницу, тогда нам надо присвоить значение null: @{ Layout = null; }

Слайд 43

Описание слайда:

Секции Кроме метода RenderBody(), который вставляет освновное содержимое представлений, мастер-страница может также использовать специальный метод RenderSection() для вставки секций. Мастер-страница может иметь несколько секций, куда представления могут поместить свое содержимое. Например, добавим к мастер-странице _Master.cshtml секцию footer:

Слайд 44

Описание слайда:

Секции @ViewBag.Title @RenderBody() @RenderSection("Footer")

Слайд 45

Описание слайда:

Секции Теперь при запуске предыдущего представления Index мы получим ошибку, так как секция Footer не определена. По умолчанию представление должно передавать содержание для каждой секции мастер-страницы. Поэтому добавим вниз представления Index секцию footer. Это мы можем сделать с помощью выражения @section: @{ ViewData["Title"] = "Home Page"; Layout = "~/Views/_Master.cshtml"; } Представление Index.cshtml @section Footer { Все права защищены. Site Corp. 2016. }

Слайд 46

Описание слайда:

Секции Но при таком подходе, если у нас есть куча представлений, и мы вдруг захотели определить новую секцию на мастер-странице, нам придется изменить все имеющиеся представления, что не очень удобно. В этом случае мы можем воспользоваться одним из вариантов гибкой настройки секций. @RenderSection("Scripts", required: false)

Слайд 47

Описание слайда:

_ViewImports.cshtml Содержание файла по умолчанию в проекте MVC: @using Microsoft.AspNetCore.Identity @using WebTest @using WebTest.Models @using WebTest.Models.AccountViewModels @using WebTest.Models.ManageViewModels @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Слайд 48

Описание слайда:

_ViewImports.cshtml Для каждой группы представлений в одной папке мы можем определить свой файл _ViewImports.cshtml. Так пускай, в проекте будет добавлен новый контроллер OtherController, в папке Views для его представлений будет добавлена подпапка Other. В эту папку Views/Other добавим новый файл _ViewImports.cshtml. Для его добавления можно выбрать спецальный шаблон «MVC View Imports Page». И теперь все директивы и выражения из файла Views/Other/_ViewImports.cshtml будут применяться к представлениям только из папки Views/Other. Кроме того, ко всем представлениям во всех папках продолжит применяться глобальный файл Views/_ViewImports.cshtml.

Слайд 49

Описание слайда:

_ViewImports.cshtml

Слайд 50

Описание слайда:

Частичные представления В приложениях на ASP.NET MVC кроме обычных представлений и мастер-страниц можно также использовать частичные представления или partial views. Их отличительной особенностью является то, что их можно встраивать в другие обычные представления. Частичные представления могут использоваться также как и обычные, однако наиболее удобной областью их использования является рендеринг результатов AJAX-запроса. По своему действию частичные представления похожи на секции, которые использовались в прошлой теме, только их код выносится в отдельные файлы. Частичные представления полезны для создания различных панелей веб-страницы, например, панели меню, блока входа на сайт, каких-то других блоков.

Слайд 51

Описание слайда:

Частичные представления За рендеринг частичных представлений отвечает объект PartialViewResult, который возвращается методом PartialView. Итак, определим в контроллере HomeController новое действие GetMessage: public class HomeController : Controller { public ActionResult GetMessage() { return PartialView("_GetMessage"); } //.................... }

Слайд 52

Описание слайда:

Частичные представления По своему действию частичное представление похоже на обычное, только для него по умолчанию не определяется мастер-страница. Для встраивания частичного представления в обычные изменим представление Index.cshtml: @{ ViewData["Title"] = "Home Page"; } Представление Index.cshtml @Html.Partial("_GetMessage") Обращения к методу GetMessage() в контроллере при этом не происходит.

Слайд 53

Описание слайда:

Частичные представления Одна из перегруженных версий методов Html.Partial позволяет передать модель в частичное представление. В итоге у нас получится стандартное строго типизированное представление. Например, в качестве второго параметра список строк: @Html.Partial("_GetMessage", new List { "Lumia 950", "iPhone 6S", "Samsung Galaxy s 6", "LG G 4" })

Слайд 54

Описание слайда:

Работа с формами Формы представляют одну из форм передачи наборов данных на сервер. Как правило, для создания форм и их элементов в MVC применяются либо html-хелперы, либо tag-хелперы, которые рассматриваются далее. Однако в данном случае мы рассмотрим взаимодействие на примере стандартных тегов html, которые создают элементы формы.

Слайд 55

Описание слайда:

Работа с формами Например, у нас есть действие Login: public class HomeController : Controller { [HttpGet] public IActionResult Login() { return View(); } [HttpPost] public IActionResult Login(string login, string password) { string authData = $"Login: {login} Password: {password}"; return Content(authData); } }

Слайд 56

Описание слайда:

Работа с формами Одно действие расщеплено на два метода: GET-версию, которая отдает представление с формой ввода, и POST-версию, которая принимает введенные в эту форму данные. Теперь создадим само представление. Добавим в папку Views/Home новый файл Login.cshtml: @{ ViewData["Title"] = "Login"; } Логин: Пароль:

Слайд 57

Описание слайда:

Работа с формами Чтобы инфраструктура MVC могла автоматически связать данные из формы с параметрами метода, значения атрибутов name у полей формы совпадают с именами параметров. Таким образом, когда форма отправится на сервер, при обработке запроса фреймворк MVC автоматически свяжет значения полей формы с параметрами.

Слайд 58

Описание слайда:

Работа с формами В HTML мы можем использовать ряд встроенных элементов: Списки (select) Поля для ввода многострочного текста (textarea) Элементы для ввода однострочного текста разных типов: Текст (text) Пароли (password) Числа (number) Логические значения (checkbox) Радиокнопки (radio)