Introduction
This article provides a walkthrough of how to use Forms Authentication with Visual Studio LightSwitch. In my previous articles we saw how to get started by creating a LightSwitch application. You can get them from the following:
Before we proceed please check the articles above since this is a continuation of them.
Step 1: Click on properties of SampleLightSwitchMVC. Navigate to Access Control and enable "Use Forms authentication" as shown below.
![Forms authentication]()
Notice this will cause LightSwitch to create LogIn and LogOut pages as shown below. These pages will redirect to the LightSwitch application.
![Solution Explorer]()
Step 2: Now let's add a Model class. Right-click on the Models folder and then "Add class" and add the following properties. Here we have created two classes for user registration and to change the 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 Let's add 3 views. Create a new folder named "Account" under views and add the Razor views.
![add views]()
![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
Summary
In this article we learned how to enable forms authentication and creation of views. In the future articles we will add the controller to do login, registration and to change the password.
Next article: Learn How to Use Forms Authentication in Lightswitch With MVC: Part 2