In this article I will explain with an example, how to build a simple user registration form that will allow user register to the website in ASP.Net MVC Razor. The Registration Form will save (insert) data to database using Entity Framework.
User will fill up the registration form with details such as username, password, email address, etc. and these details will be saved in the database table.
The registration form will also make sure that duplicate username and email addresses are not saved by verifying whether username and email address must not exists in the table.
Configuring Bundles and enabling Client Side Validation
The User Registration Form validation will be performed on Client Side using Model Data Annotations and jQuery.
Please refer the following article for complete information on how to configure Bundles and enable Client Side validation in ASP.Net MVC project.
Note: By default the validation done using Data Annotation attributes is Server Side. And hence to make it work Client Side, the Client Side validation must be enabled.
Database
For this article I have created a new database named LoginDB which contains the following table named Users in it.
![Simple User Registration Form with Entity Framework Database in ASP.Net MVC]()
Note: You can download the database table SQL by clicking the download link below.
Stored Procedure to insert the User details
The following stored procedure is used to insert the user details such as username, password and email address.
The stored procedure first checks whether the username supplied already exists, if yes then it will return negative 1 (-1) value.
Then the stored procedure checks whether the email address supplied already exists, if yes then it will return negative 2 (-2) value.
If both username and email address are valid then the record will be inserted and the auto-generated UserId will be returned by the stored procedure.
CREATE PROCEDURE [dbo].[Insert_User]
@Username NVARCHAR(20),
@Password NVARCHAR(20),
@Email NVARCHAR(30)
AS
BEGIN
SET NOCOUNT ON;
IF EXISTS(SELECT UserId FROM Users WHERE Username = @Username)
BEGIN
SELECT -1 AS UserId -- Username exists.
END
ELSE IF EXISTS(SELECT UserId FROM Users WHERE Email = @Email)
BEGIN
SELECT -2 AS UserId -- Email exists.
END
ELSE
BEGIN
INSERT INTO [Users]
([Username]
,[Password]
,[Email]
,[CreatedDate])
VALUES
(@Username
,@Password
,@Email
,GETDATE())
SELECT SCOPE_IDENTITY() AS UserId -- UserId
END
END
Configuring Entity Framework
You will need to configure the Entity Framework in order to connect to the database.
Once you reach the Database Objects selection step, you will need to select the Users table and the Insert_User Stored Procedure as shown below.
![Simple User Registration Form with Entity Framework Database in ASP.Net MVC]()
Once the Finish button is clicked, the UserModel is ready as shown below.
![Simple User Registration Form with Entity Framework Database in ASP.Net MVC]()
The next step is to map the Insert_User Stored Procedure with the Insert operation of Entity Framework. In order to do so, you will need to Right Click, the Entity Model and select Stored Procedure Mapping as shown below.
![Simple User Registration Form with Entity Framework Database in ASP.Net MVC]()
Once the Mapping Details window is open, you need to click the <Select Insert Function> Dropdown and select the Insert_User Stored Procedure.
![Simple User Registration Form with Entity Framework Database in ASP.Net MVC]()
Finally from the Result Column Bindings, click on Add Result Binding and type in the value UserId and then click on the next Cell in the Operator column and automatically it will be display the UserId property name in the corresponding Cell of the Property column.
Note: The ALIAS for the returning Column in the Insert_User Stored Procedure is UserId and hence the same is used while mapping the returning value to the property.
![Simple User Registration Form with Entity Framework Database in ASP.Net MVC]()
Model
There is no need of Model class for this project as we will be using the Entity Framework Model class which is automatically generated. You will find it in the Solution Explorer as shown below.
![Simple User Registration Form with Entity Framework Database in ASP.Net MVC]()
Now you will need to open the Model class User.cs and it will have the following contents.
namespace User_Registration_MVC
{
using System;
using System.Collections.Generic;
public partial class User
{
public int UserId { get; set; }
public string Username { get; set; }
public string Password { get; set; }
public string Email { get; set; }
public System.DateTime CreatedDate { get; set; }
public Nullable<System.DateTime> LastLoginDate { get; set; }
}
}
Now you will need to add the validation Data Annotations and also one additional property ConfirmPassword as shown below.
Note: You will need to keep a copy of this class before you regenerate Entity Framework model or make changes to it as all your changes will be overwritten.
namespace User_Registration_MVC
{
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
public partial class User
{
public int UserId { get; set; }
[Required(ErrorMessage = "Required.")]
public string Username { get; set; }
[Required(ErrorMessage = "Required.")]
public string Password { get; set; }
[Required(ErrorMessage = "Required.")]
[Compare("Password", ErrorMessage = "Passwords do not match.")]
public string ConfirmPassword { get; set; }
[Required(ErrorMessage = "Required.")]
[EmailAddress(ErrorMessage = "Invalid email address.")]
public string Email { get; set; }
public System.DateTime CreatedDate { get; set; }
public Nullable<System.DateTime> LastLoginDate { get; set; }
}
}
Note: For explanation of the various Data Annotations used for Required, Email and Confirm Password validations, please refer my articles:
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling POST operation
This action method handles the POST operation and when the form is submitted, the object of the User model class is sent to this method.
The received User Model class object is inserted into the database using the Entity Framework and the value returned from the Insert_User Stored Procedure is captured in the UserId property of the User Model class object.
As discussed earlier, the Insert_User Stored Procedure will return negative 1 (-1), negative 2 (-2) or UserId of the inserted record.
Based on the returned values, a string message is set in the ViewBag object which will be later on displayed in View using JavaScript Alert Message Box.
public class HomeController : Controller
{
// GET: Registration
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(User user)
{
UsersEntities usersEntities = new UsersEntities();
usersEntities.Users.Add(user);
usersEntities.SaveChanges();
string message = string.Empty;
switch (user.UserId)
{
case -1:
message = "Username already exists.\\nPlease choose a different username.";
break;
case -2:
message = "Supplied email address has already been used.";
break;
default:
message = "Registration successful.\\nUser Id: " + user.UserId.ToString();
break;
}
ViewBag.Message = message;
return View(user);
}
}
View
Inside the View, in the very first line the User Model class is declared as Model for the View.
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
Inside the View, the following three HTML Helper functions are used:-
1. Html.TextBoxFor – Creating a TextBox for the Model property.
2. Html.PasswordFor – Creating a Password TextBox for the Model property.
3. Html.ValidationMessageFor – Displaying the Validation message for the property.
There is also Submit button which when clicked, the Form gets submitted.
The jQuery and the jQuery Validation script bundles are rendered at the end of the Model using the Scripts.Render function.
ViewBag’s Message object is checked for NULL and if it is not NULL then the string message is displayed using JavaScript Alert Message Box.
@model User_Registration_MVC.User
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
}
table th {
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td {
padding: 5px;
border: 1px solid #ccc;
}
.error {
color: red;
}
</style>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th colspan="3">
Registration
</th>
</tr>
<tr>
<td>
Username
</td>
<td>
@Html.TextBoxFor(m => m.Username)
</td>
<td>
@Html.ValidationMessageFor(m => m.Username, "", new { @class = "error" })
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
@Html.PasswordFor(m => m.Password)
</td>
<td>
@Html.ValidationMessageFor(m => m.Password, "", new { @class = "error" })
</td>
</tr>
<tr>
<td>
Confirm Password
</td>
<td>
@Html.PasswordFor(m => m.ConfirmPassword)
</td>
<td>
@Html.ValidationMessageFor(m => m.ConfirmPassword, "", new { @class = "error" })
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
@Html.TextBoxFor(m => m.Email)
</td>
<td>
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "error" })
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit"/>
</td>
<td></td>
</tr>
</table>
}
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@if (@ViewBag.Message != null)
{
<script type="text/javascript">
$(function () {
alert("@ViewBag.Message")
});
</script>
}
</body>
</html>
Screenshots
![Simple User Registration Form with Entity Framework Database in ASP.Net MVC]()
Message Box when registration is successful
![Simple User Registration Form with Entity Framework Database in ASP.Net MVC]()
Message Box when username already exists
![Simple User Registration Form with Entity Framework Database in ASP.Net MVC]()
Message Box when email address already exists
![Simple User Registration Form with Entity Framework Database in ASP.Net MVC]()
User record inserted in table
![Simple User Registration Form with Entity Framework Database in ASP.Net MVC]()
Downloads
