-sponsors - Design and development of web-applications

-sponsors

Views use HTML markup to render content. However, the ASP.NET MVC framework also has such a powerful tool as HTML helper, which can generate the required HTML code. HTML helpers are not exactly the same as the server-side Web Forms, but they are the closest to them in ASP.Net MVC technology.

Standard HTML Helpers

The MVC framework provides a large set of built-in HTML helpers that allow you to generate markup for working with HTML forms (Table 4.11).

The HTML helper BeginForm takes as parameters the name of the action method, the controller name, and the HTTP method used (using the FormMethod enumeration). For example:

Html.BeginFormfBuy & quot ;, Home & quot ;, FormMethod.Post)

In order to automatically add a form completion tag, the BeginForm HTML helper is used as follows:

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

& lt; input type = hidden value = @ ViewBag.Bookld name-'Bookld /& gt;

}

Table 4.11

Basic HTML Helpers

Method

Description

BeginForm

Returns an HTML string for an HTML form

ActionLink,

RouteLink

Returns an HTML string for the HTML link

DropDownList

Returns the HTML string for the drop-down list

ListBox

Returns the HTML string for the list box

TextArea

Returns the HTML string for the text area

In this case, the following HTML will be created:

& lt; form method = post action = 7Home/Buy "& gt;

input type = hidden value=''@ViewBag.Bookld '' name = Bookld /& gt;

& lt;/form & gt;

If a page with a form is called and the form is sent using the same action (like Buy, for example), you can not specify the parameters in the Html.BeginForm helper:

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

Standard HTML helpers include helpers for entering information for almost all HTML controls. All basic HTML helpers use at least two parameters: the first parameter is the value of the id attribute or name; the second parameter is the value of the value attribute.

The Html.TextBox helper generates an input tag with the value of the type attribute equal to text. This helper is used to get markup of user input. For example:

@ Html.TextBox ("TextBox1", ViewBag.DefauItText)

The Html.Hidden helper is used to form a hidden field input type = hidden & quot ;. For example, calling the helper: @ Html.Hidden ( Bookld, 2 ) will generate the markup:

input id = Bookld name = Bookld type = hidden value = "2" '/ & gt;

And when passing a variable from ViewBag, you need to cast it to a string type:

@ Html.Hidden ("Bookld", (string) @ ViewBag.Bookld)

The Html.Password helper creates a field for entering the password. It is similar to the TextBox helper, but instead of the characters you type, it displays the password mask. For example: @ Html.Password ( UserPassword & quot ;, val )

generates markup:

& lt; input id = UserPassword name = "UserPassword '' type = password value = val /& gt;

The Html.RadioButton helper is used to create switches. It generates an input element with a value of type = "radio". To create a group of switches, you must give them all the same name (the name property). For example:

@ Html.RadioButtonf'color & quot ;, red ) & lt; span & gt; KpacHbiii & lt;/span & gt; & lt; br/& gt;

@ Html.RadioButton ("color", blue ) & lt; span> cnHHH & lt;/span & gt; & lt; br/& gt;

@ Html.RadioButton ( color & quot ;, green & quot ;, true) & lt; span & gt; 3eneHbM & lt;/span & gt;

Such code creates the following markup:

& lt; input id = color name = color type = radio value = red /& gt;

& lt; span & gt; red & lt;/span & gt; & lt; br/& gt;

& lt; input id = color name = color type = radio value = blue /& gt;

& lt; span & gt; blue & lt;/span & gt; & lt; br/& gt;

& lt; input checked = checked id = color name = color type = radio value = green /& gt;

& lt; span & gt; green & lt;/span & gt;

The Html.CheckBox helper can be used to create two elements at once. For example:

@ Html.CheckBox ( Enable & quot ;, false)

will generate the following HTML:

& lt; input id = Enable name = Enable type = checkbox value = true /& gt;

& lt; input name = Enable type = hidden value = false /& gt;

To have in addition to the flag field itself, a hidden field is also generated. It is necessary because the browser sends the flag value only when the checkbox is selected or checked. A hidden field ensures that the Enable element is set to a value even if the user does not check the box.

The Html.Label helper created the element, and the parameter passed to the helper sets the value of the for attribute and also the text for the element. For example, declaring an Html.Label helper (Name ") creates the following markup:

& lt; label for = Name & gt; Name & lt;/label & gt;

The label element represents a simple label for attaching information to input elements, such as text fields. The attribute for the label element must contain the ID of the associated input element. If the user clicks on the label, the browser automatically passes the focus to the entry associated with this label.

The Html.DropDownList helper creates a drop-down list, that is, the "select/&" element. To generate such a list, you need the Select-List collection, which contains the SelectListltem objects that describe the list items. The SelectListltem object has a Text property (displayed text), a Value property (the value itself may not coincide with the text) and the Selected property (indicates whether this element is selected or not).

For example, in the drop-down list, you can display a collection of Book entries that are passed to the view using a ViewBag object:

BookContext db = new BookContext ();

SelectList books = new SelectList (db.Books, Author & quot ;, Name );

ViewBag.Books = books;

In the SelectList object's constructor, you specify:

• a set of values ​​for the list (db.Books);

• the name of the property of the Book model that will be used as the value (Author);

• The name of the Book property that will be used to display in the list (Name).

In the view, the created SelectList object contained in ViewBag.Books can be used in the following way:

@ Html.DropDownList ("Author", (SelectList) ViewBag.Books)

The ActionLink helper generates the & lt; a & gt; tag. In its description, the first parameter specifies the name of the link, the second - the name of the action method, the third - the name of the controller, the fourth parameter - the identifier. For example, if given:

@ Html.ActionLink ("Calculate", "Calcule", "Store", new (id = 1})

then the following hyperlink will be created:

& lt; a href = /Store/Calcule/1 & gt; Execute calculation & lt;/a & gt;

As an example, the presentation template shown in Fig. 4.47, can be rewritten using HTML helpers, as shown in Fig. 4.48.

View for the [HttpGet] method Buy (int id), written using HTML helpers

Fig. 4.48. The view for the [HttpGet] Buy (int id) method written with HTML helpers

Strongly typed HTML helpers

For base helpers in ASP.NET MVC, there are strongly typed twins (DropDownListFor, ListBoxFor, TextAreaFor). They can only be used in strongly typed views and implicitly work with the model passed to the view.

View for the [HttpGet] Buy (int id) method written using HTML helpers

Fig. 4.49. The view for the [HttpGet] Buy (int id) method written with HTML helpers

A lambda-expression describing a short algorithm for determining the property of the model with which this helper will work is given as a parameter of these assistants. For example, in the helper

@ Html.TextBoxFor (m => m.Person)

indicates that it will work with the Person property of the model. The name that designates the model (in this case, t) can be any. It will implicitly communicate with the view model. The same assistant can be written in other ways:

@ Html.TextBoxFor (model => model. Person)

or

@ Html.TextBoxFor (c => c.Person).

As an example, the presentation template shown in Fig. 4.47, can be rewritten using strongly typed HTML helpers, as shown in Fig. 4.49.

In addition to standard HTML helpers (which form certain HTML markup elements), the MVC framework also has template HTML helpers (Table 4.12).

They are more flexible than standard helpers, since they do not need to describe how to create a markup element and what type of helper to use. The template helper simply communicates the model property that is being used, and he himself determines which HTML element to generate based on the type of the property and its attributes (see section 4.2.5).

Template HTML Helpers

Table 4.12

Basic Template HTML Helpers

Method

Description

Display

creates a read-only markup element for the specified model property, for example, Html.DisplayfName )

Editor

creates an available editing markup for the specified model property, for example, Html.Editor ( Name )

DisplayText

creates an expression for the specified model property in a simple string, for example, Html.DisplayTextfName )

Template assistants also have strongly typed analogs:

• DisplayFor - a strongly typed analog of the helper Display: Html.DisplayFor (e => e.Name); if the model specifies an attribute, [Dis- play (Name = & xxxx )], then the specified value will be displayed as a name xxxx & quot ;;

• EditorFor is a strongly typed analog of the Editor's helper: Html.EditorFor (e => e.Name);

• DisplayTextFor is a strongly typed analog of the Display-Text helper, for example, Html.DisplayTextFor (e => e.Name)

In addition to the template helpers that are used for a particular model property, there are a few more helpers that allow you to generate all the fields at once for a given model:

• Html.DisplayForModel () - creates readable fields for all model properties;

• EditorForModel () - creates fields for editing for all properties of the model.

For example, if you create a BookView action in the Home controller, which will display information about the specified book by id:

public ActionResult BookView (int id) {

var book = db.Books.Find (id); if (book! = null) {return View (book);}

return Viewflndex );

}

then for him, you can create a strongly typed view of BookView.cshtml, in which all fields will be generated using one helper:

@ {Layout = -/Views/Shared/Layout.cshtml & quot ;;}

@model Bookstore.Models.Book & lt; d2> Book # @ Model.ld & lt;/h2 & gt;

@ Html.DisplayForModel ()

If you access the BookView action by specifying the Home/BookView/1 route in the address bar, the following page will be displayed:

The result of running the HTML helper @ Html.DisplayForModel ()

Fig. 4.50. The result of executing the HTML helper @ Html.DisplayForModel ()

As an example of using the EditorFor editor HTML editor for editing a model, we create an action-method for editing a book (the Book model), which gets the Id ID and displays the fields for editing in the view:

In this method, int is used as a parameter, in case users specify in the id route. If the id parameter is set, then null is passed and the result of HttpNotFound will be returned.

In the view, the following set of HTML EditorFor helpers can be used:

Since the unique identifier of the id of the book is not needed to be edited, the field for displaying it is hidden, that is, the Html.HiddenFor helper is used.

Also We Can Offer!

Other services that we offer

If you don’t see the necessary subject, paper type, or topic in our list of available services and examples, don’t worry! We have a number of other academic disciplines to suit the needs of anyone who visits this website looking for help.

How to ...

We made your life easier with putting together a big number of articles and guidelines on how to plan and write different types of assignments (Essay, Research Paper, Dissertation etc)