HTML and CSS Reference
In-Depth Information
<li>
@Html.LabelFor(m => m.UserName)
@Html.TextBoxFor(m => m.UserName)
</li>
<li>
@Html.LabelFor(m => m.Email)
@Html.TextBoxFor(m => m.Email)
</li>
<li>
@Html.LabelFor(m => m.Password)
@Html.PasswordFor(m => m.Password)
</li>
<li>
@Html.LabelFor(m => m.ConfirmPassword)
@Html.PasswordFor(m => m.ConfirmPassword)
@Html.ValidationMessageFor(m => m.ConfirmPassword)
</li>
</ol>
<input type="submit" value="Register" />
</fieldset>
In the Razor syntax an
@
indicates the text that follows is code instead of literal markup. The code will
generate HTML content at run time. You'll notice that much of the code uses the
Html
class. This is a helper class
with methods that generate HTML markup. The
LabelFor()
method, for example, generates markup to insert a
label control.
For each of the fields in the form, the code uses the
LabelFor() and TextBoxFor()
methods of the
Html
helper class. (The password fields use the
PasswordFor()
method.) Each of these methods takes a lambda
expression, e.g.
m =
>
m.UserName
, that specifies a data element from the associated model. The model that is used
for the view is defined by the following instruction at the top of the file:
@model Chapter
3
.Models.RegisterModel
If you look at the
AccountModels.cs
file, you'll find the definition of the
RegisterModel
class. This class has
four public properties:
•
UserName
•
Email
•
Password
•
ConfirmPassword
Each of these properties has some metadata attributes such as
Required
and
DataType
that are used to
generate the correct HTML. I will explain this further later in the chapter.
Using Editor Templates
he
TextBoxFor()
method will output a standard textbox control. To use the new HTML5 input types you'll
need to modify this implementation. The MVC framework allows you to use the
EditorFor()
method instead
of
TextBoxFor()
. By itself that doesn't change the markup that is generated since the default implementation of
EditorFor()
will still use the
type=
"text"
attribute. I'll show you how to create an editor template to override
this default behavior.
