Представления в ASP.NET Core MVC. Html-хэлперы элементов форм

В разделе «Контроллеры ASP.NET Core MVC» мы уже затрагивали тему обработки форм и даже написали небольшой html-файл c несколькими формами. В этой части мы рассмотрим работу с формами со стороны представлений. Чисто технически, мы уже знаем достаточно, чтобы создавать более менее сложные представления, используя обычные html-элементы типа списков, форм и т.д. Однако, в ASP.NET Core MVC для создания разметки возможно использовать так называемые html-хэлперы — специальные методы, которые могут сократить и, в некоторых случаях, упростить работу с html-разметкой в представлении. В этой части мы в общих чертах рассмотрим применение различных html-хэлперов.

Html.BeginForm/Html.EndForm

Эти методы создают открывающий и закрывающий тэги формы. Например, создадим новое приложение ASP.NET Core MVC и добавим в представление Views/Index/Index.cshtml следующую форму:

<form method='post' action='Form/Index'>
    <label>ID:</label><br />
    <input type='number' name='id' /><br />
    <label>Имя:</label><br />
    <input name='name' /><br />
    <label>Email:</label><br />
    <input name='email' /><br />
    <input type='submit' value='Отправить' />
</form>

Это обычная html-форма, с несколькими полями и кнопкой «Отправить». Вот так она выглядит в приложении:

Применим методы Html.BeginForm/Html.EndForm для этой формы:

@using (Html.BeginForm("Index","Form",FormMethod.Post))
{
    <label>ID:</label>
    <br />
    <input type='number' name='id' />
    <br />
    <label>Имя:</label>
    <br />
    <input name='name' />
    <br />
    <label>Email:</label>
    <br />
    <input name='email' />
    <br />
    <input type='submit' value='Отправить' />
}

Метод Html.BeginForm() создает открывающий и закрывающий тэг формы и имеет несколько перегрузок, принимающих различные параметры. В даном случае, мы указали в параметрах название действия, которое должно выполняться при отправке формы, контроллер, в котором находится действие и метод, которым форма должна отправляться на сервер. Для вызова этого метода в представлении мы использовали следующую конструкцию Razor:

@using (Html.BeginForm())
{
   ....
}

Теперь можно снова запустить приложение и убедиться, что в html — это таже самая форма:

При этом, стоит обратить внимание, что в html-разметке формы также появилось скрытое поле с именем «__RequestVerificationToken», которое используется ASP.NET Core MVC для верификации запроса, а также из атрибута action исчезло название действия — Index, так как в маршруте по умолчанию это действие и будет выполнено при отправке этой формы. Таким образом, форма будет выполнять ту же самую функцию — отправлять POST-запрос по пути /Form/Index.

Теперь перейдем к элементам формы.

Html.Label

Этот метод создает элемент <label> и также имеет несколько перегрузок, наиболее часто используемая из которых принимает два параметра:

IHtmlContent Label(string expression, string labelText);
  • expression — атрибут for метки
  • labelText — текст метки

Перепишем нашу форму с использованием этого метода:

@using (Html.BeginForm("Index","Form",FormMethod.Post))
{
    @Html.Label("id", "ID:");
    <br />
    <input type='number' name='id' id="id"/>
    <br />
    @Html.Label("name", "Имя:");
    <br />
    <input name='name' id="name"/>
    <br />
    @Html.Label("email", "Email:");
    <br />
    <input name='email' id="email"/>
    <br />
    <input type='submit' value='Отправить' />
}

Здесь стоит обратить внимание на то, что у полей ввода появился атрибут id по которому мы привязываем метку к полю ввода. Теперь, если запустить приложение и кликнуть по метке, то поле ввода к которому эта метка прикреплена получит фокус. В остальном, опять же, форма не претерпела в html-разметке никаких изменений:

Html.TextBox

Этот метод создает поле ввода input в html-разметке. Перепишем нашу форму с использованием метода Html.TextBox();

@using (Html.BeginForm("Index","Form",FormMethod.Post))
{
    @Html.Label("id", "ID:")
    <br />
    @Html.TextBox("id","", new { type="number" })
    <br />
    @Html.Label("name", "Имя:");
    <br />
    @Html.TextBox("name")
    <br />
    @Html.Label("email", "Email:");
    <br />
    @Html.TextBox("email")
    <br />
    @Html.TextBox("button", "Отправить", new { type="submit" })
}

 

для того, чтобы поле ввода использовалось для ввода числовых значений мы использовали следующую версию метода:

@Html.TextBox("id","", new { type="number" })

первый параметр автоматически подставляется в атрибуты name и id, второй параметр — это значение, которое будет показано в поле (атрибут value), третий параметр — дополнительные атрибуты поля (в данном случае это атрибут type=number). Аналогичным образом мы определили в форме и кнопку «Отправить»:

@Html.TextBox("button", "Отправить", new { type="submit" })

Результат:

Таким образом, мы практически на 100% сверстали нашу форму с использованием html-хэлперов ASP.NET Core MVC. Ниже, для наглядности, представлен код того как было и как стало:

Было Стало 
<form method='post' action='Form/Index'>
    <label>ID:</label><br />
    <input type='number' name='id' /><br />
    <label>Имя:</label><br />
    <input name='name' /><br />
    <label>Email:</label><br />
    <input name='email' /><br />
    <input type='submit' value='Отправить' />
</form>
 
@using (Html.BeginForm("Index","Form",FormMethod.Post))
{
    @Html.Label("id", "ID:") <br />
    @Html.TextBox("id","", new { type="number" }) <br />
    @Html.Label("name", "Имя:"); <br />
    @Html.TextBox("name")  <br />
    @Html.Label("email", "Email:"); <br />
    @Html.TextBox("email") <br />
    @Html.TextBox("button", "Отправить", new { type="submit" })
}

Конечно, разнообразие html-хэлперов в ASP.NET Core не ограничивается только этими тремя, поэтому далее рассмотрим какие ещё хэлперы мы можем использовать.

Html.TextArea

Метод Html.TextArea() используется для создания элемента <textarea>, который представляет многострочное текстовое поле. Например, результатом

@Html.TextArea("Comment", "Комментарий")

будет следующая html-разметка:

<textarea id="Comment" name="Comment">
Комментарий
</textarea>

Html.CheckBox

Метод Html.CheckBox() используется для создания элемента checkbox. Например, следующий код:

@Html.CheckBox("check",true)

Создаст следующую html-разметку

<input checked="checked" id="check" name="check" type="checkbox" value="true" />

Html.RadioButton

Метод Html.RadioButton() создает переключатель — элемент input со значением type="radio". Чтобы создать группу переключателей, необходимо присвоить всем переключателям группы одно и то же имя (атрибут name):

@Html.RadioButton("postType","post")
<span>Статья</span><br/>
@Html.RadioButton("postType","note")
<span>Заметка</span>
<br />
@Html.RadioButton("postType","draft")
<span>Черновик</span>

Результат в браузере:

html-разметка:

<input id="postType" name="postType" type="radio" value="post" />    
<span>Статья</span><br/>
<input id="postType" name="postType" type="radio" value="note" />    
<span>Заметка</span><br />
<input id="postType" name="postType" type="radio" value="draft" />    
<span>Черновик</span>

Html.Hidden

Метод Html.Hidden() генерирует скрытое поле. Например:

@Html.Hidden("secret", "abcd")

сгенерирует разметку:

<input id="secret" name="secret" type="hidden" value="abcd" />

Html.Password

Метод Html.Password создает поле для ввода пароля. Например,

@Html.Password("password","123456");

Создаст следующее поле ввода пароля:

и разметку:

<input id="password" name="password" type="password" value="123456" />

Html.DropDownList

Метод Html.DropDownList() создает выпадающий список (элемент select). При этом, для генерации списка необходима коллекция объектов SelectListItem, представляющие элементы списка. Такую коллекцию можно создать самостоятельно или же использовать другой хелпер — SelectList, который перебирает объекты IEnumerable и преобразуют их в последовательность объектов SelectListItem. Например:

@Html.DropDownList("items", new SelectList(new[]{ "Один", "Два", "Три"}),"Элементы списка")

сгенерирует вот такой список:

и разметку:

<select id="items" name="items">
<option value="">Элементы списка</option>
<option>Один</option>
<option>Два</option>
<option>Три</option>
</select>

Объект SelectListItem  содержит такие свойства, как Text (отображаемый текст), Value (значение, которое может не совпадать с текстом) и Selected (указывает на то, что элемент выбран в списке). Использование объектов SelectListItem  позволяет генерировать более сложную html-разметку списка. Например, добавим в папку Models файл со следующим классов:

public class Post
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Author { get; set; }
    public string Body { get; set; }

}

а в представлении создадим список объектов этого класса:

Список объектов в представлении используется исключительно для примера. В рабочем варианте приложения такой список должен передаваться в представление из контроллера
@{
    List<Post> posts = new()
    {
        new Post(){Id=1, Title="Заголовок #1", Author="admin", Body="Текст статьи 1" },
        new Post(){Id=2, Title="Заголовок #2", Author="admin", Body="Текст статьи 2" },
        new Post(){Id=3, Title="Заголовок #3", Author="admin", Body="Текст статьи 3" },
        new Post(){Id=4, Title="Заголовок #4", Author="admin", Body="Текст статьи 4" },
    };

}

Теперь создадим список:

@Html.DropDownList("items", new Microsoft.AspNetCore.Mvc.Rendering.SelectList(posts, "Id", "Title") as SelectList)

здесь мы создаем список элементов:

new Microsoft.AspNetCore.Mvc.Rendering.SelectList(posts, "Id", "Title")

первый параметр — коллекция из которой будет формироваться список, второй — значение элемента списка, третий — текст. В итоге, мы получим следующий список:

с разметкой:

<select id="items" name="items">
<option value="1">Заголовок #1</option>
<option value="2">Заголовок #2</option>
<option value="3">Заголовок #3</option>
<option value="4">Заголовок #4</option>
</select>

Html.ListBox

Метод Html.ListBox(), как и DropDownList(), создает элемент select, но при этом делает возможным множественное выделение элементов. Для создания списка, поддерживающего множественное выделение, вместо SelectList используется класс MultiSelectList. Например,

@Html.ListBox("multi", new MultiSelectList(new[]{11111, 22222, 33333, 44444, 55555}))

сгенерирует список:

и соответствующую ему разметку:

<select id="multi" multiple="multiple" name="multi">
<option>11111</option>
<option>22222</option>
<option>33333</option>
<option>44444</option>
<option>55555</option>
</select>

Итого

HTML-хэлперы представляют собой методы, которые формируют строку — html-разметку представления по заданным параметрам. В ASP.NET Core MVC имеется достаточно большое количество различных html-хэлперов, позволяющих генерировать разметку элементов форм. На этом, тема использования хэлперов не заканчивается и далее мы рассмотрим ещё несколько видов html-хэлперов, которые мы можем использовать в наших приложениях.

Подписаться
Уведомить о
guest
0 Комментарий
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии