ASP.NET MVC проект на .NET Core в VS Code. Часть 2 (Добавляем Представление) C#
В предыдущей публикации мы создали простейший ASP.NET MVC проект на .NET Core и добавили в него контроллер. Весь проект состоял из 4 файлов и содержал только самое необходимое. Теперь мы добавим в этот проект представления.
Скачать исходник предыдущего проекта можно здесь:
Приступим. Для начала добавим в наш проект каталог «View» (именно так принято именовать папку содержащую представления) в котором будут лежать все наши представления. Затем в каталоге «View» создадим подкаталог «SayHello» — в нем будут лежать представления для контроллера SayHello.
Создадим представление для Экшена Hello. Для этого в каталоге «SayHello» создадим файл «Hello.cshtml» с содержимым:
@{
ViewData["Title"] = "Привет из представления";
}
<h2>HELLO !!!</h2>
<p>Привет из представления!</p>
Представление готово, теперь чтобы использовать его меняем Метод Hello() в файле «MyTestController.cs», должно получиться так:
using Microsoft.AspNetCore.Mvc;
namespace MyTest.Controllers
{
public class SayHelloController:Controller
{
public string Index()
{
return "Первое сообщение из Контроллера!!!";
}
public IActionResult Hello()
{
return View();
}
}
}
Однако этого не достаточно, если сейчас запустить сайт, то на запрос «localhost:5000/SayHello/Hello» будет пустая страница, чтобы исправить это, внесем в проект ещё два изменения.
Добавим параметр «preserveCompilationContext»: true в файл «project.json»:
{
"version": "1.0.0-*",
"buildOptions": {
"debugType": "portable",
"emitEntryPoint": true,
"preserveCompilationContext": true
},
"dependencies": {},
"frameworks": {
"netcoreapp1.0": {
"dependencies": {
"Microsoft.NETCore.App": {
"type": "platform",
"version": "1.0.0"
},
"Microsoft.AspNetCore.Server.Kestrel":"1.0.0",
"Microsoft.AspNetCore.Mvc":"1.0.0"
},
"imports": "dnxcore50"
}
}
}
И добавим корневую директорию при запуске Веб Сервера .UseContentRoot(Directory.GetCurrentDirectory()) в файле «Program.cs», вот так:
using Microsoft.AspNetCore.Hosting;
using System.IO;
namespace MyTest
{
public class Program
{
public static void Main(string[] args)
{
var host = new WebHostBuilder()
.UseKestrel()
.UseContentRoot(Directory.GetCurrentDirectory())
.UseStartup<Startup>()
.Build();
host.Run();
}
}
}
Теперь если мы запустим приложение и откроем наш сайт на странице «localhost:5000/SayHello/Hello», то увидим текст из нашего представления:
Но создавать индивидуальное представление для каждого метода, довольно утомительно. Поэтому существует такая штуковина как шаблоны в которых можно размещать однотипные части кода и использовать многократно в разных представлениях, далее мы создадим такой шаблон.
Для шаблонов создадим каталог «Shared» в каталоге «Views», в этом каталоге будем располагать файлы шаблонов.
Создадим простой шаблон для примера, и назовем его "_Layout.cshtml", с таким содержанием:
<html>
<head>
<title>@ViewData["Title"]</title>
</head>
<body>
<p>Элемент шаблона!!!</p>
<p>(под чертой элемент представления)</p>
<hr>
@RenderBody()
</body>
</html>
Элемент @ViewData[«Title»] — будем передавать его значение из контроллера.
Элемент @RenderBody() — указывает где должно быть отображено содержимое представления.
Теперь добавим в контроллер SayHelloController новый метод HelloTemplate, для экспериментов с нашим шаблоном (в файл «MyTestController.cs»):
public IActionResult HelloTemplate()
{
return View();
}
Для контроллера создадим новое представление (Файл «HelloTemplate.cshtml»):
@{
ViewData["Title"] = "Заголовок";
Layout = "_Layout";
}
<h2>Тело представления !!!</h2>
<p>Привет из представления!</p>
ViewData[«Title»] — Задает параметр Title.
Layout = "_Layout"; — Указывает на созданный нами предварительно шаблон.
Теперь, если мы запустим наш проект то по адресу localhost:5000/SayHello/HelloTemplate мы увидим:
Над чертой располагается содержимое шаблона.
Под чертой располагается содержимое представления.
Теперь рассмотрим чуть подробнее элемент ViewData при помощи которого на самом деле можно передавать значения из контроллера в представление, на небольшом примере.
Изменим метод HelloTemplate таким образом:
public IActionResult HelloTemplate(string name, int numTimes = 1)
{
ViewData["Message"] = "Здравствуй " + name;
ViewData["NumTimes"] = numTimes;
return View();
}
А представление «HelloTemplate.cshtml» изменим вот так:
@{
ViewData["Title"] = "Заголовок";
Layout = "_Layout";
}
<h2>Тело представления !!!</h2>
<ul>
@for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
{
<li>@ViewData["Message"]</li>
}
</ul>
Здесь мы передаем в контроллере приветствие параметром Message и количество раз которое это приветствие необходимо отобразить NumTimes, и обращаясь к этим параметрам в представлении отображаем несколько раз наше приветствие.
Теперь если мы запустим наш проект и перейдем по ссылке localhost:5000/SayHello/HelloTemplate?name=Roman&numtimes=4 то увидим вот такой результат:
На этом пока всё.
Рабочий исходник примера можно скачать здесь: