MVC5 + EF6 + Bootstrap3 (8) HtmlHelper usage (I), mvc5ef6

MVC5 + EF6 + Bootstrap3 (8) HtmlHelper usage (I), mvc5ef6

Source: Slark. NET-blog Park http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-httphelper-part1.html

Previous section: MVC5 + EF6 + Bootstrap3 (7) Bootstrap raster System

Download source code: Click here to download

Directory:

• Introduction to HtmlHelper
• Preparations
• Link
  • ActionLink Link
  • RouteLink Link
• Input control
  • TextBox input box
  • Hidden domain
  • Password Input box
  • CheckBox check box
  • RadioButton radio button
• List box
  • DropDownList drop-down menu
  • ListBox multi-choice box
• Add attribute
• End

Introduction to HtmlHelper

In the View page of ASP. NET MVC5, HtmlHelper is used to output HTML code. More official description: System. Web. Mvc. HtmlHelper object, which is used to render HTML elements. As shown in.

Each function in HtmlHelper generates a tag, which will be described in detail later.

Many people may ask why html is used instead of html directly?

I think there are several reasons:

• If you write HTML directly, the compiler will not report errors if the statement has syntax errors, such as missing ending tags </B>. The page may be messy and difficult to identify the error. If you use HtmlHelper to indicate errors during compilation, you can modify them in time.
• Pages in the View are generally dynamic pages, that is, if there is no HtmlHelper, we often write a mix of server-side code and HTML code such as <input type = "text" value = "@ id">. In this way, not only is the write format messy, the execution sequence is difficult to judge, but errors are not easy to detect. It is better to use HtmlHelper to write server-side code. It is more convenient to bind data with HtmlHelper.
• I think the relationship between HtmlHelper and HTML is similar to that between Linq and SQL. That is to say, Microsoft provides you with a way to familiarize yourself with non-HTML or SQL. when using the. NET language. NET framework to help you better solve the problem.

Preparations

To better demonstrate HtmlHelper, we create a new default Controller and default Action in the project.

In Solution Explorer, right-click the Controllers folder and choose add> controller. In the displayed window, select the MVC 5 controller-null and click OK. Enter the default controller name, DefaultControllerController. Write the following code into the DefaultControllerController. cs file.

using System.Web.Mvc;namespace SlarkInc.Controllers{    public class DefaultControllerController : Controller    {        //        // GET: /DefaultController/        public ActionResult DefaultAction()        {            return View();        }    }}

The code above shows that an Action named DefaultAction is created in the Controller named DefaultController.

Then we will create the corresponding View. Delete an existing View in the DefaultController folder under the Views folder and add a View named DefaultAction. Open the DefaultAction. cshtml file and delete all codes. In this way, our preparation is complete. Next, add the HtmlHelper code.

Link ActionLink

ActionLink is used to generate the <a> tag in HTML. Three Common reloads of ActionLink are given below a hyperlink generated on the page:

@Html.ActionLink("LinkText", "ActionName")@Html.ActionLink("LinkText", "ActionName", "ControllerName")@Html.ActionLink("LinkText", "ActionName", new { id = 1 })

Click View in the browser. Running result:

<a href="/DefaultController/ActionName">LinkText</a><a href="/ControllerName/ActionName">LinkText</a><a href="/DefaultController/ActionName/1">LinkText</a>

LinkText is the text displayed by the link. If the ActionLink parameter shows the Controller, the link points to the Action under the corresponding Controller. If no Controller is provided, it points to the Action under the Controller corresponding to the current page. If the ActionLink parameter specifies the parameter to be passed, such as id, the id value is written at the end of the link.

RouteLink

RouteLink is also used to generate <a> tags in HTML, but its parameters are different from ActionLink. Here we provide the RouteLink code that can implement the preceding three lines of HTML code:

@Html.RouteLink("LinkText", new { action = "ActionName" })@Html.RouteLink("LinkText", new { action = "ActionName", controller = "ControllerName" })@Html.RouteLink("LinkText", new { action = "ActionName", id = 1 })

From the code above, we can see that LinkText is still the text displayed by the link, and other information of the link is included in the second parameter of RouteLink. This parameter is an Object. Its action attribute indicates the Action to be directed to, and the controller attribute indicates the Controller to be directed. If the controller attribute does not exist, it is directed to the current Controller. The id attribute is the parameter to be passed.

Input control TextBox

TextBox is used to generate the <input type = "text"> tag in HTML. There are two common reloads:

@Html.TextBox("NameId")@Html.TextBox("NameId","Value")

The generated tag is as follows:

<input id="NameId" name="NameId" type="text" value="" /><input id="NameId" name="NameId" type="text" value="Value" />

It can be seen that the first parameter of TextBox is assigned to the id and name attributes of the input tag. If there is no value parameter, the value is null. If yes, the value attribute is assigned.

Hidden

Hidden is used to write the <input type = "hidden"> label to the page, which is similar to TextBox. The Code is as follows:

@Html.Hidden("NameId")@Html.Hidden("NameId", "Value")

The result is as follows:

<input id="NameId" name="NameId" type="hidden" value="" /><input id="NameId" name="NameId" type="hidden" value="Value" />

Password

Password is used to write the <input type = "password"> tag, which is similar to TextBox. The Code is as follows:

@Html.Password("NameId")@Html.Password("NameId", "Value")

The result is as follows:

<input id="NameId" name="NameId" type="password" value="" /><input id="NameId" name="NameId" type="password" value="Value" />

CheckBox

The CheckBox function is special. Check the code and running result first:

@Html.CheckBox("NameId", true)@Html.CheckBox("NameId", false)

<input checked="checked" id="NameId" name="NameId" type="checkbox" value="true" /><input name="NameId" type="hidden" value="false" /><input id="NameId" name="NameId" type="checkbox" value="true" /><input name="NameId" type="hidden" value="false" />

Normally, it should generate only one <input type = "checkbox"> tag. If the second parameter of the CheckBox is true, the checked = "checked" attribute exists, indicates that this box is checked. But why does the tag have value = "true" and a tail <input name = "NameId" type = "hidden" value = "false"/>?

Because in our ASP. net mvc: If this CheckBox is checked, a NameId = "true" value will be sent to the target page after submission, if this parameter is not checked, a NameId = "false" value is returned. This value is passed by <input name = "NameId" type = "hidden" value = "false"/>. If <input name = "NameId" type = "hidden" value = "false"/> is not specified, the system still sends a NameId = "true" value to the target page. If this parameter is not checked, the system does not pass the NameId value.

RadioButton

RadioButton generates a <input type = "radio"> tag. The Code is as follows:

@Html.RadioButton("NameId","Value", true)@Html.RadioButton("NameId", "Value", false)

The generated code is as follows:

<input checked="checked" id="NameId" name="NameId" type="radio" value="Value" /><input id="NameId" name="NameId" type="radio" value="Value" />

It can be seen that RadioButton and CheckBox both have the checked parameter, while RadioButton has a Value parameter that can be set.

Drop-down list

The DropDownList function can create a <select> label drop-down menu. Before creating the drop-down menu, you need to create a list of menu options represented by the <option> label. The creation method is as follows:

@{        SelectListItem item;        List<SelectListItem> list = new List<SelectListItem>();        for(int i=1;i<5;i++)        {            item = new SelectListItem();            item.Text = "Text" + i;            item.Value = "Value" + i;            item.Selected = (i==2);            list.Add(item);        }       }

The SelectListItem class generates a menu item. Its Text attribute indicates the Text displayed, the Value Attribute indicates its corresponding Value, and the Selected Attribute indicates whether it is Selected. The above code generates several <option> labels. When I is 2, the labels are selected.

The following code generates a drop-down menu containing the list of options above:

@Html.DropDownList("Id", list)

The result is as follows:

<select id="NameId" name="NameId">    <option value="Value1">Text1</option>    <option selected="selected" value="Value2">Text2</option>    <option value="Value3">Text3</option>    <option value="Value4">Text4</option></select>

It can be seen that the first parameter of the DropDownList function is its id and name, and the second parameter is a List composed of the four options. Each option has its own Text and Value, and the second option is selected.

ListBox

ListBox can generate a multiple-choice list box, corresponding to the <select multiple = "multiple"> tag in HTML. The structure of ListBox is basically the same as that of DropdownList, only the multiple = "multiple" attribute is added. Here we still use the option list created above to create our ListBox. The Code is as follows:

@Html.ListBox("NameId", list)

The result is as follows:

<select id="NameId" multiple="multiple" name="NameId">    <option value="Value1">Text1</option>    <option selected="selected" value="Value2">Text2</option>    <option value="Value3">Text3</option>    <option value="Value4">Text4</option></select>

Add attribute

For example, you can use the following method to add a class and style to a label:

@Html.TextBox("NameId", "Value", new { @class = "classText",@style="width:200px" })

The result is as follows:

<input class="classText" id="NameId" name="NameId" style="width:200px" type="text" value="Value" />

The yellow mark above is the added property. In fact, you can add any attribute name and attribute value in the same way, and the operation will take effect.

End

This topic is still to be continued. I hope you will understand it because the younger brother has limited energy and needs to carefully select examples, conduct in-depth analysis, and practice in writing.

If you like it, just give it a compliment or leave a message to discuss it.

Previous section: MVC5 + EF6 + Bootstrap3 (7) Bootstrap raster System