- Step 2 Now Lets add Model class.Right click on Models folder and then add class and add the following properties
Here we have created two classes for user registration and change password
using System.ComponentModel.DataAnnotations;
namespace LightSwitchApplication.Models
{
public class Users
{
public string UserName { get; set; }
public string Email { get; set; }
public string Password { get; set; }
public bool IsLockedOut { get; set; }
public bool IsOnline { get; set; }
public bool RememberMe { get; set; }
}
public class ChangePassword
{
[Display(Name = "Old Password")]
public string OldPassword { get; set; }
[Display(Name = "New Password")]
public string NewPassword { get; set; }
[Display(Name = "Confirm Password")]
public string ConfirmPassword { get; set; }
}
}
- Step 3 Now Lets add 3 views create a new folder named Account under views and add the Razor views
Add the following html to the three views
ChangePassword.cshtml
@{
Layout = null;
}
@model LightSwitchApplication.Models.ChangePassword
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Change Password</title>
</head>
<body>
<h2>Change Password</h2>
<div>
@using (Html.BeginForm("ChangePassword", "Account",
FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary()
<div class="form-group">
@Html.LabelFor(model => model.OldPassword,
new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.PasswordFor(model => model.OldPassword,
new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.NewPassword,
new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.PasswordFor(model => model.NewPassword,
new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ConfirmPassword,
new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.PasswordFor(model => model.ConfirmPassword,
new { @class = "form-control" })
</div>
</div>
<br />
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit"
value="Change password"
class="btn btn-default" />
</div>
</div>
}
<br />
<div>
@Html.ActionLink("GoBack", "Index", "Home")
</div>
</div>
</body>
</html>
Login.cshtml
@{
Layout = null;
}
@model LightSwitchApplication.Models.Users
<!DOCTYPE html>
<html>
<head>
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1,
minimum-scale=1, maximum-scale=1, user-scalable=no" />
<title>Log in</title>
</head>
<body>
<h2>Log In</h2>
<div class="row">
<div class="col-md-8">
<section id="loginForm">
@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl },
FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<div class="form-group">
@Html.LabelFor(model => model.UserName, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.UserName)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Password, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.PasswordFor(model => model.Password, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Password)
</div>
</div>
<br />
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
@Html.CheckBoxFor(model => model.RememberMe)
@Html.LabelFor(model => model.RememberMe)
</div>
</div>
</div>
<br />
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Log in" class="btn btn-default" />
</div>
</div>
<p>
@Html.ActionLink("Register", "Register") if you don't have a local account.
</p>
}
</section>
</div>
</div>
</body>
</html>Register.cshtml
@{
Layout = null;
}
@model LightSwitchApplication.Models.Users
<!DOCTYPE html>
<html>
<head>
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1,
minimum-scale=1, maximum-scale=1, user-scalable=no" />
<title>Register</title>
</head>
<body>
<h2>Register</h2>
<div>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="control-group">
@Html.LabelFor(model => model.UserName, new { @class = "control-label" })
<div class="controls">
@Html.EditorFor(model => model.UserName)
@Html.ValidationMessageFor(model => model.UserName,
null, new { @class = "help-inline" })
</div>
</div>
<div class="control-group">
@Html.LabelFor(model => model.Password, new { @class = "control-label" })
<div class="controls">
@Html.PasswordFor(model => model.Password)
@Html.ValidationMessageFor(model => model.Password,
null, new { @class = "help-inline" })
</div>
</div>
<div class="control-group">
@Html.LabelFor(model => model.Email, new { @class = "control-label" })
<div class="controls">
@Html.EditorFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email,
null, new { @class = "help-inline" })
</div>
</div>
<br />
<div class="form-actions no-color">
<input type="submit" value="CreateUser" class="btn" />
</div>
@Html.ValidationSummary(true)
}
<br />
<div>
@Html.ActionLink("Back", "Index", "Home")
</div>
</div>
</body>
</html>Conclusion
In this part 3 we have learned how to enable forms authentication and creation of views..In the coming articles we will add the controller to perform login,registration and change password....
Reference
http://msdn.microsoft.com/en-us/library/ff851957.aspx