ASP. NET MVC Light Tutorial Step by Step 6--improved form

Last Update:2015-11-10 Source: Internet

Author: User

Tags html form

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In the previous section we used the original HTML form to complete the message, but ASP. NET MVC provides a rich HTML-assisted way to help us build a more concise and elegant form.

Step 1. Modify Form Labels

First, we can use Html.BeginForm to create a form label. So we can change the original form to the following code.

@{html.beginform ("Save", "Home");} <label for= "nickname">Nickname</label>        <inputname= "nickname"type= "text" />        <BR/><BR/>        <label for= "Content">Content</label>        <textareaname= "Content"cols= " the"rows= "5" ></textarea>        <BR/><BR/>        <inputtype= "Submit"value= "Submit" />@{html.endform ();}

The prototype of the Html.BeginForm method used here is Html.BeginForm (String actionname,string controllername). The previous code <form action= "/home/save" method= "POST" the value of action in the > is written in HTML, it is not a problem to do so, but in the ASP. URL URLs in MVC can be modified by routing rules, and writing dead is bad for our later revisions, and the advantage of using this helper method is to avoid this. Note that Html.BeginForm and html.endform we want to call the statement way, so add ";" and curly braces. Of course this will appear to be not concise, so you can usually use the using statement, as follows.

 @using (Html.BeginForm ("Save", "Home")) {<label for= "nickname">Nickname</label>        <inputname= "nickname"type= "text" />        <BR/><BR/>        <label for= "Content">Content</label>        <textareaname= "Content"cols= " the"rows= "5" ></textarea>        <BR/><BR/>        <inputtype= "Submit"value= "Submit" />    }

Step 2. Improve form Labels

The label label and the input tag in the form can also be used to see the code instead of using an HTML helper.

@using (Html.BeginForm ("Save", "Home")) { @Html. Label (" Nickname" ," nickname ") @Html. TextBox ("Nickname")        <BR/><BR/> @Html. Label ("content", "contents") @Html. TextArea ("Content", "", 5,50,null) <BR/><BR/>        <inputtype= "Submit"value= "Submit" />    }

Html.label and Html.textbox can generate HTML tags that are nearly identical to the previous form. Form labels We can all use HTML helper methods, and the correspondence between them is shown in the table below.

<label>	Html.label
<input type= "Text" >	Html.textbox
<textarea>	Html.textarea
<select>	Html.dropdownlist and Html.listbox
<input type= "hidden" >	Html.hidden
<input type= "password>	Html.password
<input type= "Radio" >	Html.radiobutton
<input type= "checkbox" >	Html.checkbox

The Visible HTML helper method allows us to use the name of a control that was already familiar with ASP.

Step 3. Working with strongly typed views

When designing the index view, we already understand the benefits of using strong typing. You should also use strong typing in the write view.

First, with @model MessageBoard.Models.Message at the top of the write view, you can then replace the previous helper method with a strongly typed helper method. The strongly typed helper method name is the auxiliary method name plus the suffix "for", such as the strong type of Html.label is html.labelfor. The code after the replacement is as follows.

 @model MessageBoard.Models.Message@{Layout = null;}<!DOCTYPE HTML><HTML><Head>    <Metaname= "Viewport"content= "Width=device-width" />    <title>Write</title></Head><Body>    <H1>MVC Message Board</H1>@using (Html.BeginForm ("Save", "Home")) { @Html. Labelfor (M=>m.nickname, "nickname") @Html. Textb Oxfor (M = m.nickname) <BR/><BR/>@Html. Labelfor (M + m.content, "content") @Html. Textareafor (M = m.content,5,50,null)<BR/><BR/>        <inputtype= "Submit"value= "Submit" />    }</Body></HTML>

The strongly-typed HTML helper method uses a lambda expression instead of the name string, which has two benefits: code hints when writing code, and code refactoring that can be automatically modified. So the strongly typed HTML helper method is the way we primarily build forms.

ASP. NET MVC Light Tutorial Step by Step 6--improved form

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More