The next step is to add necessary user interface elements to
views. Here I follow a simplistic approach to have a textbox on the LogOn view
and disable or enable it whenever a flag in ViewBag
(which is called VerificationCodeEnabled) is set
(Listing 6).
Listing 6: LogOn view
@model AspNetPhoneVerificationSample.Models.LogOnModel
@{
ViewBag.Title = "Log On";
}
<h2>
Log On</h2>
<p>
Please enter your user name and password. @Html.ActionLink("Register",
"Register")
if you don't have an account.
</p>
<script src="@Url.Content%28" ~="" scripts="" jquery.validate.min.js")"=""
type="text/javascript"></script>
<script src="@Url.Content%28" ~="" scripts=""
jquery.validate.unobtrusive.min.js")"="" type="text/javascript"></script>
@Html.ValidationSummary(true,
"Login was unsuccessful. Please correct the errors and try again.")
@using (Html.BeginForm())
{
<div>
<fieldset>
<legend>Account Information</legend>
<div class="editor-label">
@Html.LabelFor(m => m.UserName)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.UserName)
@Html.ValidationMessageFor(m => m.UserName)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.Password)
</div>
<div class="editor-field">
@Html.PasswordFor(m => m.Password)
@Html.ValidationMessageFor(m => m.Password)
</div>
@if (ViewBag.VerificationCodeEnabled)
{
<div class="editor-label">
@Html.LabelFor(m => m.VerificationCode)
</div>
<div class="editor-field">
@Html.PasswordFor(m => m.VerificationCode)
@Html.ValidationMessageFor(m => m.VerificationCode)
</div>
}
<div class="editor-label">
@Html.CheckBoxFor(m => m.RememberMe)
@Html.LabelFor(m => m.RememberMe)
</div>
<p>
<input value="Log On" type="submit">
</p>
</fieldset>
</div>
} 
