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.
          Download SQL file
 
 
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.
Note: The complete details of configuring and using Entity Framework in ASP.Net MVC are provided in my article ASP.Net MVC: Entity Framework Database First Approach example.
 
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; }
    }
}
 
 
 
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.
ActionNameName 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