Asp textbox with html

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

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

Хелпер Html.BeginForm

Пусть в контроллере определены две версии одного метода Create- для методов POST и GET, например:

[HttpGet] public IActionResult Create() < return View(); >[HttpPost] public IActionResult Create(string name, int age) < return Content($"- "); >

В представлении для метода Create для создания формы ввода данных для последующей их отправки на post-версию метода Create мы вполне можем использовать стандартные элементы html, например:

Это обычная html-форма, которая по нажатию на кнопку отправляет все введенные данные запросом POST на адрес /Home/Create. Встроенный хелпер BeginForm/EndForm позволяет создать ту же самую форму:

@using(Html.BeginForm("Create", "Home", FormMethod.Post)) < Имя 
 
 Возраст 
 
 >

Метод BeginForm принимает в качестве параметров имя метода действия и имя контроллера, а также тип запроса. Данный хелпер создает как открывающий тег

. Поэтому при рендеринге представления в выходной поток у нас получится тот же самый html-код, что и с применением тега form. Поэтому оба способа идентичны.

Но вызов страницы с формой и отправка формы осуществляется одним и тем же действием (как в нашем случае действием Create), то в этом случае можно не указывать в хелпере Html.BeginForm параметры:

Ввод информации

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

Вне зависимости от типа все базовые html-хелперы используют как минимум два параметра: первый параметр применяется для установки значений для атрибутов id и name , а второй параметр — для установки значения атрибута value

Html.TextBox

Хелпер Html.TextBox генерирует тег input со значением атрибута type равным text . Хелпер TextBox используют для получения ввода пользователем информации. Так, перепишем предыдущую форму с заменой полей ввода на хелпер Html.TextBox:

@using (Html.BeginForm("Create", "Home", FormMethod.Post)) < Имя 
@Html.TextBox("Name")
 Возраст 
@Html.TextBox("Age","", new < type="number" >)
 >

Хелпер позволяет установить ряд дополнительных параметров с помощью перегружженных версий. Так, вызов хелпера:

В качестве второго параметра устанавливает значение по умолчанию (здесь пустая строка). Третий параметр в виде анонимного объекта позволяет задать ряд атрибутов генерируемого html-элемента. Так, в данном случае мы указываем, что поле будет числовое, так как по умолчанию создаваемое поле расценивается как текстовое, то есть с атрибутом type=»text» .

В итоге мы получим практически аналогичный результат:

Html.Label

Хелпер Html.Label создает элемент , а передаваемый в хелпер параметр определяет значение атрибута for и одновременно текст на элементе. Перегруженная версия хелпера позволяет определить значение атрибута for и текст на метке независимо друг от друга. Например, объявление хелпера Html.Label(«Name», «Имя») создает следующую разметку:

Элемент label представляет простую метку, предназначенную для прикрепления информации к элементам ввода, например, к текстовым полям. Атрибут for элемента label должен содержать id ассоциированного элемента ввода. Если пользователь нажимает на метку, то браузер автоматически передает фокус связанному с этой меткой элементу ввода.

Html.TextArea

Хелпер TextArea используется для создания элемента , который представляет многострочное текстовое поле. Результатом выражения @Html.TextArea(«text», «привет мир»)

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

Обратите внимание, что хелпер декодирует помещаемое в него значение, в том числе и html-теги, (все хелперы декодируют значения моделей и значения атрибутов). Другие версии хелпера TextArea позволяют указать число строк и столбцов, определяющих размер текстового поля.

@Html.TextArea("text", "привет мир", 5, 50, null)

Этот хелпер сгенерирует следующую разметку:

Html.Hidden

Хелпер Html.Hidden генерирует скрытое поле. Например, следующий вызов хелпера:

Html.Password

Html.Password создает поле для ввода пароля. Он похож на хелпер TextBox , но вместо введенных символов отображает маску пароля. Следующий код:

Html.RadioButton

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

@Html.RadioButton("color", "red") красный 
@Html.RadioButton("color", "blue") синий 
@Html.RadioButton("color", "green", true) зеленый

Этот код создает следующую разметку:

Html.CheckBox

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

будет генерировать следующий HTML:

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

Html.DropDownList

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

@Html.DropDownList("user", new SelectList(new string[] < "Tom", "Sam", "Bob", "Alice" >), "Выберите пользователя")

Объект SelectListItem имеет свойства Text (отображаемый текст), Value (само значение, которое может не совпадать с текстом) и Selected . Теперь более сложный пример. Выведем в список коллекцию элементов User:

public class User < public int Id < get; set; >public string Name < get; set; >public int Age < get; set; >>

В контроллере передадим список объектов User через ViewBag:

public IActionResult Create() < Listusers = new List < new User , new User , new User , new User , >; ViewBag.Users = new SelectList(users, "Id", "Name"); return View(); >

Здесь мы создаем объект SelectList, передавая в его конструктор набор значений (список users), название свойства модели User, которое будет использоваться в качестве значения (Id), и название свойства модели User, которое будет использоваться для отображения в списке. В данном случае необязательно устанавливать два разных свойства, можно было и одно установить и для значения и отображения.

Тогда в представлении мы можем так использовать этот SelectList:

@Html.DropDownList("userid", ViewBag.Users as SelectList)

И при рендеринге представления все элементы SelectList добавятся в выпадающий список

Html.ListBox

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

@Html.ListBox("users", new MultiSelectList(new string[] < "Tom", "Sam", "Bob", "Alice" >))

Этот код генерирует следующую разметку:

Html.GetEnumSelectList

Для создания выпадающего списка по перечислению применяется хелпер Html.GetEnumSelectList . Допустим, у нас есть следующее перечисление:

using System.ComponentModel.DataAnnotations; namespace HtmlHelpersApp.App_Code < public enum TimeOfDay < [Display(Name ="Утро")] Morning, [Display(Name = "День")] Afternoon, [Display(Name = "Вечер")] Evening, [Display(Name = "Ночь")] Night >>

Тогда в представлении мы сможем вывести выпадающий список значений из этого перечисления:

@using HtmlHelpersApp.App_Code @using (Html.BeginForm("Create", "Home", FormMethod.Post)) < @Html.DropDownList("daytime", Html.GetEnumSelectList(typeof(TimeOfDay))) 
 >

Источник

Html.TextBox and Html.TextBoxFor Example in ASP.NET MVC

In this chapter, you will learn:
1. What is Html.TextBox and Html.TextBoxFor Helper Class?
2. What is the difference between Html.TextBox and Html.TextBoxFor method?
3. Html.TextBox Example
4. Html.TextBoxFor Example
5. How Bind Html.TextBoxFor with a Model
6. How to send data from TextBox to Controller
7. Html Attributes of Html.TextBox

@Html.TextBox()

Html.TextBox is extension method of HtmlHelper class that draws HTML TextBox and accept input from user. Html.TextBox is loosely typed method that renders plain textbox input and doesn’t get bounded with any model properties. Because it is loosely type bounded, it also does not check for error at compile time so, if you passed wrong string as parameter that don’t match to model properties, you are likely to get runtime error.

You can define Html.TextBox() method as below:

Html.TextBox(string name, string value, object htmlAttributes)
a. string name is the name of the TextBox.
b. string value is the text, appears inside TextBox
c. object htmlAttributes is the place where you can put your own css properties and class.
Programming Example of Html.TextBox( ) method in ASP.NET MVC
Model: UserModel.cs

namespace HtmlHelperDemo.Models < public class UserModel < public string Name < get; set; >> >

@using (Html.BeginForm("Index", "Home", FormMethod.Post)) < Name: @Html.TextBox("Name","Enter Name", new < style="color:red" >) >

Html Output

@Html.TextBoxFor()

Html.TextBoxFor also used for drawing text box in asp.net web pages but it is strongly bounded with model properties. The benefit of using Html.TextBoxFor is, it checks for error at compile time and saves you from any uncertain runtime error. Because it is strongly bounded with model properties, you will also get Intellisense suggestion when using it.

You can define @Html.TextBoxFor() as follow:

TextBoxFor(model => model.properties, object htmlAttributes)
a. model uses the model class that view is bounded.
b. htmlAttributes defines space for css properties and class.

In order to bind Html.TextBoxFor() with a model, you must define model in view page.

@model HtmlHelperDemo.Models.UserModel
Programming Example of Html.TextBoxFor() method in ASP.NET MVC
Model: UserModel.cs

namespace HtmlHelperDemo.Models < public class UserModel < public string Name < get; set; >> >

@model HtmlHelperDemo.Models.UserModel @using (Html.BeginForm("Index", "Home", FormMethod.Post)) < @Html.TextBoxFor(m =>m.Name, new ) > .red

Html Output

How to Send Data from Html.TextBoxFor to controller

It is very simple of getting TextBoxFor data in the controller. Here, is an example.

[HttpPost] public ActionResult Index(UserModel u)

HTML Attributes

Html Attributes set Html Properties for input control like width, color, value, css class etc. Attributes provides additional information about elements and always comes with name=»value» pair.

@Html.TextBoxFor(m => m.Name, new < @Value = "Enter Name", @class = "red", @disabled = "true", >)

Difference Between Html.TextBox and Htm.TextBoxFor method.

Html.TextBox()	Html.TextBoxFor()
It is loosely typed. It may be or not bounded with Model Properties.	It is strongly typed. Means, It will be always bounded with a model properties.
It requires property name as string.	It requires property name as lambda expression.
It doesn’t give you compile time error if you have passed incorrect string as parameter that does not belong to model properties.	It checks controls at compile time and if any error found it raises error.
It throws run time error. Run time error gives bad impression to user and if the project is worthy, you may lose your client simply because of one error.	It throws compile time error which can be corrected before launching the project. It enhances user experience without throwing error.

Summary:

In this chapter, you learned Html.TextBox() and Html.TextBoxFor() Helper Extension method in ASP.NET MVC 5 with complete programming example. I kept this chapter simple, short and easy so hopefully you will not get any problem in understanding this chapter. In the next chapter, you will learn about Html.TextArea() extension method.

Источник