C#.MVC. Представления

Представления – нужны для отображения данных в html формате . В ASP находятся в папке Views\Имя контроллера, имеют разрешение *.cshtml

Пример представления

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>SomeView</title>
</head>
<body>
    <div>
        <h2>@ViewBag.Message</h2>
    </div>
</body>
</html>

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>SomeView</title>

</head>

<body>

<div>

<h2>@ViewBag.Message</h2>

</div>

</body>

</html>

Создадим новое представление

Правой кнопкой на папке Views -> Add ->View

Из визарда видно, что мы можем выбрать имя, использовать шаблон, выбрать модель и контекст данных.

Create as a partial view – cоздание частичного представления, которое можно потом использовать в других представлениях.

Use a layout page. Использование шаблонов. Если выбран какой-то шаблон, наше представление будет в него вставлено.

Итак, в результате будет сгенерирован такой код.

@model IEnumerable<firstAspApp.Models.Car>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>View</title>
</head>
<body>
    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Brand)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Price)
            </th>
            <th></th>
        </tr>
    
    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Brand)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
                @Html.ActionLink("Details", "Details", new { id=item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.Id })
            </td>
        </tr>
    }
    
    </table>
</body>
</html>

@model IEnumerable<firstAspApp.Models.Car>

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

@Html.ActionLink("Create New", "Create")

</p>

<tr>

<th>

@Html.DisplayNameFor(model => model.Name)

</th>

<th>

@Html.DisplayNameFor(model => model.Brand)

</th>

<th>

@Html.DisplayNameFor(model => model.Price)

</th>

</tr>

@foreach (var item in Model) {

<tr>

<td>

@Html.DisplayFor(modelItem => item.Name)

</td>

<td>

@Html.DisplayFor(modelItem => item.Brand)

</td>

<td>

@Html.DisplayFor(modelItem => item.Price)

</td>

<td>

@Html.ActionLink("Edit", "Edit", new { id=item.Id }) |

@Html.ActionLink("Details", "Details", new { id=item.Id }) |

@Html.ActionLink("Delete", "Delete", new { id=item.Id })

</td>

</tr>

}

</table>

</body>

</html>

Все настройки окна создания представления

- View Name: имя нового представления. После создания ему автоматически будет присваиваться расширение cshtml.
- Template: шаблон нового представления. Мы можем выбрать из следующего списка шаблонов:

Типы шаблонов представления

- Empty (without model): создается пустое представление с начальной разметкой
- Empty: также создается пустое представление, но теперь ниже мы можем выбрать модель, которая будет подключена в представлении с помощью директивы @model
- Create: генерируется представление с формой для создания новых объектов модели. В этой форме для каждого свойства модели создается отдельное поле
- Delete: генерируется представление с формой для удаления объектов модели. В этой форме для каждого свойства модели создается отдельное поле
- Details: генерируется представление, которое отображает значения всех свойств модели
- Edit: генерируется представление с формой для редактирования имеющихся объектов модели. В этой форме для каждого свойства модели создается отдельное поле
- List: создается представление, которое отображает все объекты из списка моделей в виде таблицы. Для генерации списка объектов в данное представление необходимо передавать из метода контроллера значение типаIEnumerable<Тип_модели>. Представление также содержит ссылки на методы для выполнения операций создания/правки/удаления.
Model class: при выборе одной из предыдущих опций, кроме опции Empty (without model), нам становится доступно это поле, в котором мы можем указать модель для типизации представления. Такое представление будет считаться строго типизированным, то есть привязанным к одному классу модели
Data context class: также при выборе одной из предыдущих опций, кроме опции Empty (without model), нам становится доступно это поле, в котором мы можем выбрать класс контекста данных
Create as a partial view: позволяет создать частичное представление
Reference Script Libraries: эта опция показывает, будет ли представление автоматически подключать стандартный набор библиотек jQuery и прочих файлов JavaScript.
Use a layout page: эта опция указывает, будет ли использоваться мастер-страница или представление будет самодостаточным. После установки этой опции нам станет доступным нижнее поле, в котором можно выбрать мастер-страницу. Для движка Razor указание мастер-страницы не является обязательным, если вы собираетесь использовать мастер-страницу, определенную по умолчанию в файле _ViewStart.cshtml. Однако, если вы хотите переопределить мастер-страницу, то можете воспользоваться этой опцией.

Вызов представления из контроллера

Если не указать конкретное представление, то будет искаться представление Index.cshtml

public ActionResult Index()
{
    IEnumerable<Book> books = db.Books;
    ViewBag.Books = books;
    return View();
}

public ActionResult Index()

{

IEnumerable<Book> books = db.Books;

ViewBag.Books = books;

return View();

}

Если указать, будет загружено конкретное представление

public ActionResult Index()
{
    IEnumerable<Book> books = db.Books;
    ViewBag.Books = books;
    return View("~/Views/Some/SomeView.cshtml");
}

public ActionResult Index()

{

IEnumerable<Book> books = db.Books;

ViewBag.Books = books;

return View("~/Views/Some/SomeView.cshtml");

}

Синтаксис Razor

Преобразование кода C# в HTML, примеры

<p>@b.Name</p>

1	<p>@b.Name</p>

<h3>@DateTime.Now.ToShortTimeString()</h3>

1	<h3>@DateTime.Now.ToShortTimeString()</h3>

@foreach (BookStore.Models.Book b in Model)
{
    <p>@b.Name</p>
}

@foreach (BookStore.Models.Book b in Model)

{

}

@{
    string head = "Привет мир!!!";
    head = head + " Добро пожаловать на сайт!";
}
 <h3>@head</h3>

string head = "Привет мир!!!";

head = head + " Добро пожаловать на сайт!";

}

Строго типизированные представления

Представления связанные с определенной моделью, в начале файла пишется

@model IEnumerable<firstAspApp.Models.Car>

1	@model IEnumerable<firstAspApp.Models.Car>

И далее идет обращение к model, например так

@Html.DisplayNameFor(model => model.Name)

1	@Html.DisplayNameFor(model => model.Name)

HTML-хелперы

Помогают сокращать код разметки, например

@helper BookList(IEnumerable<BookStore.Models.Book> books)
{
    <ul>
        @foreach (BookStore.Models.Book b in books)
        {
            <li>@b.Name</li>
        }
    </ul>
}

@helper BookList(IEnumerable<BookStore.Models.Book> books)

{

<ul>

@foreach (BookStore.Models.Book b in books)

{

}

</ul>

}

И далее, можем обращаться так

@BookList(Model)

1	@BookList(Model)

Другой пример

@helper CreateList(string[] all)
{
    <ul>
        @foreach (string s in all)
        {
            <li>@s</li>
        }
    </ul>
}
@{
    string[] cities = new string[] { "Лондон", "Париж", "Москва" };
}
@{
    string[] countries = new string[] { "Великобритания", "Франция", "Россия" };
}
<h3>Города</h3>
@CreateList(cities)
<br />
<h3>Страны</h3>
@CreateList(countries)

@helper CreateList(string[] all)

{

<ul>

@foreach (string s in all)

{

}

</ul>

}

string[] cities = new string[] { "Лондон", "Париж", "Москва" };

}

string[] countries = new string[] { "Великобритания", "Франция", "Россия" };

}

<h3>Города</h3>

@CreateList(cities)

<br />

<h3>Страны</h3>

@CreateList(countries)

Если хэлперы требуют много кода их можно складывать в специальную папку App_Code. Это специальная папка в MVC, ее можно создать через правую кнопку мыши – контекстное меню.

Также можно определять свои хэлперы через классы в С#

using System;
using System.Web;
using System.Web.Mvc;
using System.Linq;
 
namespace BookStore.Helpers
{
    public static class ListHelper
    {
        public static MvcHtmlString CreateList(this HtmlHelper html, string[] items)
        {
            TagBuilder ul = new TagBuilder("ul");
            foreach (string item in items)
            {
                TagBuilder li = new TagBuilder("li");
                li.SetInnerText(item);
                ul.InnerHtml += li.ToString();
            }
            return new MvcHtmlString(ul.ToString());
        }
    }
}

using System;

using System.Web;

using System.Web.Mvc;

using System.Linq;

namespace BookStore.Helpers

{

public static class ListHelper

{

public static MvcHtmlString CreateList(this HtmlHelper html, string[] items)

{

TagBuilder ul = new TagBuilder("ul");

foreach (string item in items)

{

TagBuilder li = new TagBuilder("li");

li.SetInnerText(item);

ul.InnerHtml += li.ToString();

}

return new MvcHtmlString(ul.ToString());

}

…

@{
    string[] cities = new string[] { "Лондон", "Париж", "Москва" };
}
@{
    string[] countries = new string[] { "Великобритания", "Франция", "Россия" };
}
@using BookStore.Helpers
<h3>Города</h3>
@Html.CreateList(cities)
<br />
<h3>Страны</h3>
<!-- или можно вызвать так -->
@ListHelper.CreateList(Html, countries)

string[] cities = new string[] { "Лондон", "Париж", "Москва" };

}

string[] countries = new string[] { "Великобритания", "Франция", "Россия" };

}

@using BookStore.Helpers

<h3>Города</h3>

@Html.CreateList(cities)

<br />

<h3>Страны</h3>

@ListHelper.CreateList(Html, countries)

Также есть самозакрывающиеся элементы и атрибуты, которые можем добавлять.

Более подробно здесь.

Хэлперы формы

@using(Html.BeginForm("Buy", "Home", FormMethod.Post))
{
    <input type="hidden" value="@ViewBag.BookId" name="BookId" />
    <table>
        <tr><td><p>Введите свое имя </p></td>
            <td><input type="text" name="Person" /> </td></tr>
        <tr><td><p>Введите адрес :</p></td>
            <td><input type="text" name="Address" /> </td></tr>
        <tr><td><input type="submit" value="Отправить" /> </td>
                <td></td></tr>
    </table>
}

@using(Html.BeginForm("Buy", "Home", FormMethod.Post))

{

<table>

<tr><td><p>Введите свое имя </p></td>

<tr><td><p>Введите адрес :</p></td>

</table>

}

Ввод текста

Более подробно здесь

Html.TextBox

Html.TextArea

Html.Hidden

Html.Password

Html.RadioButton

Html.CheckBox

Html.Label

Html.DropDownList

Html.ListBox

Форма с несколькими кнопками

Строготипизированные хэлперы

C#.MVC. Представления

Типы шаблонов представления

Синтаксис Razor

Строго типизированные представления

HTML-хелперы

Хэлперы формы

Html.TextArea

Html.Hidden

Html.Password

Html.RadioButton

Html.CheckBox

Html.Label

Html.DropDownList

Html.ListBox

Форма с несколькими кнопками

MY PROJECTS

Recent Posts

Categories