How to create a User Registration page using mvc 4


This is the 1st part of this series, where I am going to explain how to create a User Registration page using MVC.

You know, Dotnet awesome is a platform to learn, read and explore contents related to web development. Here in this series "Implement basic functionality in MVC application", I have explained how to create some very basic functionality like create a registration pagelogin pagefile upload page etc., especially for beginners.

I have explained following articles in the series "Implement basic functionality in MVC application"
  1. How to create a User Registration page using mvc
  2. How to create a login page using mvc
  3. How to create career page with Upload file (CV) in MVC
  4. How to create Feedback page with cascade dropdownlist in MVC.
  5. How to display database data in webgrid in mvc

Steps :

Step - 1: Create New Project.

Go to File > New > Project > Select MVC4 web application > Entry Application Name > Click OK > Select Internet Application > Select view engine Razor > OK

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create table for Save data.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.
In this example, I have used one table as below

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Apply validation on model.

Open your model and add validation. Please follow below code

using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
public partial class User
    public int UserID { get; set; }
    [Required(ErrorMessage="Please provide username", AllowEmptyStrings=false)]
    public string Username { get; set; }
    [Required(ErrorMessage="Please provide Password", AllowEmptyStrings=false)]
    [DataType( System.ComponentModel.DataAnnotations.DataType.Password)]
    [StringLength(50,MinimumLength=8, ErrorMessage="Password must be 8 char long.")]
    public string Password { get; set; }
    [Compare("Password", ErrorMessage = "Confirm password dose not match.")]
    public string ConfirmPassword { get; set; }
    [Required(ErrorMessage="Please provide full name", AllowEmptyStrings=false)]
    public string FullName { get; set; }        

        ErrorMessage="Please provide valid email id")]
    public string EmailID { get; set; }

Step-6: Create a Controller .

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Here I have created a controller "UserController"

Step-7: Add new action into your controller for Get Method

Here I have added "Register" Action into "User" Controller. Please write this following code

public class UserController : Controller
    public ActionResult Register()
        return View();

Step-8: Add view for your Action (Register) & design for creating a Register form.

Right Click on Action Method (here right click on Register action) > Add View... > Enter View Name > Select View Engine (Razor) > Check "Create a strong-typed view" > Select your model class > Add.
@model MVCRegistration.User
@using (Html.BeginForm()) {
        @if (ViewBag.Message != null)
            <div style="border:solid 1px green">
        <div class="editor-label">
            @Html.LabelFor(model => model.FullName)
        <div class="editor-field">
            @Html.EditorFor(model => model.FullName)
            @Html.ValidationMessageFor(model => model.FullName)
        <div class="editor-label">
            @Html.LabelFor(model => model.EmailID)
        <div class="editor-field">
            @Html.EditorFor(model => model.EmailID)
            @Html.ValidationMessageFor(model => model.EmailID)
        <div class="editor-label">
            @Html.LabelFor(model => model.Username)
        <div class="editor-field">
            @Html.EditorFor(model => model.Username)
            @Html.ValidationMessageFor(model => model.Username)
        <div class="editor-label">
            @Html.LabelFor(model => model.Password)
        <div class="editor-field">
            @Html.EditorFor(model => model.Password)
            @Html.ValidationMessageFor(model => model.Password)
        <div class="editor-label">
            @Html.LabelFor(model => model.ConfirmPassword)
        <div class="editor-field">
            @Html.EditorFor(model => model.ConfirmPassword)
            @Html.ValidationMessageFor(model => model.ConfirmPassword)
            <input type="submit" value="Create" />
    @Html.ActionLink("Back to List", "Index")
@section Scripts {

Step-9: Add new action into your controller for POST Method (for Register)

Here I have added "Register" Action with Model Parameter (here "User") into "User" Controller. Please write this following code

public ActionResult Register(User U)
    if (ModelState.IsValid)
        using (MyDatabaseEntities dc = new MyDatabaseEntities())
            //you should check duplicate registration here 
            U = null;
            ViewBag.Message = "Successfully Registration Done";
    return View(U);

Step-10: Run Application.

Download Application     Live Demo

If you are working on AngularJS application and wants to create a registration page in angularjs with mvc as server side, this link will be useful to you how to create simple registration form with validation using angularjs and mvc.

Hello ! My name is Sourav Mondal. I am a software developer working in Microsoft .NET technologies since 2010.

I like to share my working experience, research and knowledge through my site.

I love developing applications in Microsoft Technologies including Asp.Net webforms, mvc, winforms,, sql server, entity framework, Ajax, Jquery, web api, web service and more.