Html helper asp net mvc

Rendering a Form in ASP.NET MVC Using HTML Helpers

The ASP.NET MVC framework includes helper methods that provide an easy way to render HTML in a view. This topic explains how to work with the most frequently used HTML helpers. The last section shows an example that incorporates the HTML helpers described in this topic.

Available HTML Helpers

The following list shows some of the currently available HTML helpers. The helpers listed with an asterisk (*) are demonstrated in this topic.

• ActionLink — Links to an action method.
• BeginForm * — Marks the start of a form and links to the action method that renders the form.
• CheckBox * — Renders a check box.
• DropDownList * — Renders a drop-down list.
• Hidden — Embeds information in the form that is not rendered for the user to see.
• ListBox — Renders a list box.
• Password — Renders a text box for entering a password.
• RadioButton * — Renders a radio button.
• TextArea — Renders a text area (multi-line text box).
• TextBox * — Renders a text box.

Using the BeginForm Helper

The BeginForm helper marks the start of an HTML form and renders as an HTML form element. The BeginForm helper method has several overrides. The version of the BeginForm helper shown in the following example takes two parameters, the names of the action method and the controller to submit the form. The BeginForm helper implements the IDisposable interface, which enables you to use the using keyword (Using in Visual Basic), similar to ASP.NET AJAX usage.

The following example shows how to use the BeginForm helper in a using pattern.

You can also use the BeginForm helper declaratively. The difference between using BeginForm declaratively and using an HTML form tag is that BeginForm assigns default value for the action method and action attributes, which simplifies the markup. The following example uses declarative markup to mark the start and ending of a form.

Using the CheckBox Helper

The CheckBox helper method renders a check box that has the name that you specify. The rendered control returns a Boolean value (true or false). The following example shows markup for the CheckBox helper method.

Using the DropDownList Helper

The DropDownList helper renders a drop-down list. In its simplest form, DropDownList takes one parameter, the name of the ViewData key whose value is of type SelectList and that contains the option values for the drop-down list. The MVC framework uses the ModelState property of ViewData to determine the selected value. If the ModelState property is empty, the framework looks for an item whose Selected property is set.

The following example shows markup for the DropDownList helper method.

Both the DropDownList and ListBox helpers accept either a SelectList or MultiSelectList object.

The following code is a part of an Index action method in which values are added to a List object. The List object is passed to an instance of SelectList, which is then added to the ViewData object.

Dim petList As List(Of String) = New List(Of String) petList.Add("Dog") petList.Add("Cat") petList.Add("Hamster") petList.Add("Parrot") petList.Add("Gold fish") petList.Add("Mountain lion") petList.Add("Elephant") ViewData("pets") = New SelectList(petList) 

List petList = new List(); petList.Add("Dog"); petList.Add("Cat"); petList.Add("Hamster"); petList.Add("Parrot"); petList.Add("Gold fish"); petList.Add("Mountain lion"); petList.Add("Elephant"); ViewData["Pets"] = new SelectList(petList); 

Using the RadioButton Helper

The RadioButton helper method renders a radio button. In its simplest form, the method takes three parameters: the name of the control group, the option value, and a Boolean value that determines whether the radio button is selected initially. The following markup shows markup for the RadioButton helper method.

Select your favorite color: 
 Blue 
 Purple 
 Red 
 Orange 
 Yellow 
 Brown 
 Green 

Using the TextBox Helper

The TextBox helper method renders a text box that has the specified name. The following markup shows markup for the TextBox helper method.

Example Application

The following example is a complete example from which the previous examples where taken. The Index page displays a form that implements HTML helper methods. When the user submits the form, the form is handled by the HandleForm action method, which generates a view that displays the information that the user submitted.

The following example shows the HomeController class.

 _ Public Class HomeController Inherits System.Web.Mvc.Controller Function Index() As ActionResult ViewData("Message") = "Welcome to ASP.NET MVC!" Dim petList As List(Of String) = New List(Of String) petList.Add("Dog") petList.Add("Cat") petList.Add("Hamster") petList.Add("Parrot") petList.Add("Gold fish") petList.Add("Mountain lion") petList.Add("Elephant") ViewData("pets") = New SelectList(petList) Return View() End Function Function About() As ActionResult Return View() End Function Public Function HandleForm(ByVal name As String, ByVal favColor As String, ByVal bookType As Boolean, ByVal pets As String) As ActionResult ViewData("name") = name ViewData("favColor") = favColor ViewData("bookType") = bookType ViewData("pet") = pets Return View("FormResults") End Function End Class 

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcHtmlHelpers.Controllers < [HandleError] public class HomeController : Controller < public ActionResult Index() < ViewData["Message"] = "Welcome to ASP.NET MVC!"; ListpetList = new List(); petList.Add("Dog"); petList.Add("Cat"); petList.Add("Hamster"); petList.Add("Parrot"); petList.Add("Gold fish"); petList.Add("Mountain lion"); petList.Add("Elephant"); ViewData["Pets"] = new SelectList(petList); return View(); > public ActionResult About() < return View(); >public ActionResult HandleForm(string name, string favColor, Boolean bookType, string pets) < ViewData["name"] = name; ViewData["favColor"] = favColor; ViewData["bookType"] = bookType; ViewData["pet"] = pets; return View("FormResults"); >> > 

The following example shows the Index view.

 
 
 Enter your name: 
 
Select your favorite color: 
 Blue 
 Purple 
 Red 
 Orange 
 Yellow 
 Brown 
 Green 
 
 I read more fiction than non-fiction. 

 
My favorite pet: 
 
 

 
 
  Enter your name: 
 
Select your favorite color: 
 Blue 
 Purple 
 Red 
 Orange 
 Yellow 
 Brown 
 Green 
 
 I read more fiction than non-fiction. 

 
My favorite pet: 
 
  %> 

The following example shows the FormResults view.

FormResults
 
Your name: 
Your favorite color: 
You read more fiction than non-fiction.
 
You read more non-fiction than fiction.
 Your favorite pet:

FormResults
 
Your name: 
Your favorite color: 
You read more fiction than non-fiction.
 else < %>
You read more non-fiction than fiction.
 %> Your favorite pet:

Источник

Html helper asp net mvc

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Как мы увидели из прошлых примеров, представления используют разметку html для визуализации содержимого. Однако фреймворк ASP.NET MVC обладает также таким мощным инструментом как HTML-хелперы, позволяющие генерировать html-код.

Строчные хелперы

Строчные хелперы похожи на обычные определения методов на языке C#, только начинаются с тега @helper . Например, создадим в представлении хелпер для вывода названий книг в виде списка:

Данный хелпер мы можем определить в любом месте представления. И также в любом месте представления мы можем его использовать, передавая в него объект IEnumerable:

Список книг
 @BookList(ViewBag.Books) @BookList(Model)

Строчные html-хелперы удобно использовать, если необходимо создать один метод, который предполагается использовать в представлении многократно. Например:

Если бы отсутствовал подобный хелпер, то нам бы пришлось по сути дублировать один и тот же html-код для создания списка. Однако этот хелпер еще довольно простой, а если нам приходится создавать по сто раз более сложную, но однотипную разметку html, тогда хелперы окажутся еще более полезными.

Но данный подход имеет один недостаток — если хелпер очень объемный, то он может очень сильно захламлять разметку представления. И в этом случае его лучше вынести в отдельный файл кода. Так, перепишем предыдущий пример. Для этого нам надо создать новый класс с методом расширения — то есть таким методом, который расширяет функциональность уже существующих классов. А эти классы указываются в качестве первого параметра метода. Итак, создадим в проекте новую папку Helpers и добавим в нее новый класс ListHelper:

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()); > > >

В новом классе хелпера определен один статический метод CreateList, принимающий в качестве первого параметра объект, для которого создается метод. Так как данный метод расширяет функциональность html-хелперов, которые представляет класс HtmlHelper, то именно объект этого типа и передается в данном случае в качестве первого параметра. Второй параметр метода CreateList — массив строк-значений, которые потом будут выводиться в списке.

В самом методе с помощью объекта TagBuilder конструируется стандартный элемент html — элемент ul. При обходе массива все строковые значения обертываются в тег li и добавляются в список. И на выходе возвращается полноценные элемент ul.

Класс TagBuilder имеет ряд членов, которые можно использовать при таком подходе:

• Свойство InnerHtml позволяет установить или получить содержимое тега в виде строки
• Метод MergeAttribute (string, string, bool) позволяет добавить к элементу один атрибут. Для получения всех атрибутов можно использовать коллекцию Attributes
• Метод SetInnerText(string) устанавливает текстовое содержимое внутри элемента
• Метод AddCssClass(sting) добавляет класс css к элементу

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

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

Источник

HTML-хелперы

Для вывода содержимого в представлении можно применять стандартные html-элементы, которые позволяют создавать блоки, списки, таблицы и т.д. Но кроме собственно html-элементов в ASP.NET Core MVC для создания разметки можно использовать специальные методы — html-хелперы . Вообще helper можно перевести с английского как «вспомогательный метод». И фактически html-хелперы представляют собой вспомогательные методы, цель которых — генерация html-разметки.

Для создания простейшего html-хелпера в проект ASP.NET Core добавим новый класс ListHelper :

В новом классе хелпера определен один статический метод CreateList , принимающий в качестве первого параметра объект, для которого создается метод. Так как данный метод расширяет функциональность html-хелперов, которые представляет интерфейс Microsoft.AspNetCore.Mvc.Rendering.IHtmlHelper , то именно объект этого типа и передается в данном случае в качестве первого параметра. Второй параметр метода CreateList — массив строк-значений, которые потом будут выводиться в списке.

В самом методе просто пробегаемся по массиву строк и формируем из них разметку html в виде строки. Результатом метода является объект HtmlString , который в конструкторе получает разметку html в виде строки.

Этот очень простой метод уже может упростить работу с разметкой. Рассмотрим его использование. Допустим, нам надо в представлении вывести массив строк в списке:

@< string[] cities = new string[] < "Лондон", "Париж", "Берлин" >; string[] countries = new string[] < "Великобритания", "Франция", "Германия" >; > @using MvcApp 
Города
 @Html.CreateList(cities) 
Страны
 @ListHelper.CreateList(Html, countries)

Поскольку html-хелпер представляет метод расширения для объекта IHtmlHelper, то для его применения нам достаточно написать Html.CreateList и передать в метод необходимые параметры. Либо мы можем вызвать его как метод класса, в котором он определен: ListHelper.CreateList

, нам достаточно будет написать одну строку с вызовом хелпера, передав ему массив:

При отсутствии подобного хелпера, то нам бы пришлось по сути дублировать один и тот же html-код для создания списка. Однако этот хелпер еще довольно простой, а если нам приходится создавать по сто раз более сложную, но однотипную разметку html, тогда хелперы окажутся еще более полезными.

TagBuilder

Для создания html-тегов в хелпере мы можем использовать класс Microsoft.AspNetCore.Mvc.Rendering.TagBuilder . Так, перепишем код хелпера следующим образом:

using Microsoft.AspNetCore.Html; // для HtmlString using Microsoft.AspNetCore.Mvc.Rendering; // для IHtmlHelper using System.Text.Encodings.Web; // для HtmlEncoder namespace MvcApp < public static class ListHelper < public static HtmlString CreateList(this IHtmlHelper html, string[] items) < TagBuilder ul = new TagBuilder("ul"); foreach (string item in items) < TagBuilder li = new TagBuilder("li"); // добавляем текст в li li.InnerHtml.Append(item); // добавляем li в ul ul.InnerHtml.AppendHtml(li); >ul.Attributes.Add("class", "itemsList"); using var writer = new StringWriter(); ul.WriteTo(writer, HtmlEncoder.Default); return new HtmlString(writer.ToString()); > > >

В конструктор TagBuilder передается элемент, для которого создается тег. TagBuilder имеет ряд свойств и методов, которые можно использовать:

• Свойство InnerHtml позволяет установить или получить содержимое тега в виде строки. Чтобы манипулировать этим свойством, можно вызвать один из методов:
  • Append(string text) : добавление строки теста внутрь элемента
  • AppendHtml(IHtmlContent html) : добавление в элемент кода html в виде объекта IHtmlContent — это может быть другой объект TagBuilder
  • Clear() : очистка элемента
  • SetContent(string text) : установка текста элемента
  • SetHtmlContent(IHtmlContent html) : установка внутреннего кода html в виде объекта IHtmlContent

  В итоге мы получим тот же самый список, что и ранее.

  Источник