Create a user registration form in MVC - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

Create a user registration form in MVC

Introduction: In this article today I am going explain how to create a user registration form in asp.net MVC razor
Create a user registration form in MVC

Description:

Please follow the below given steps to create a complete user registration form:
Step 1: Create a new project
To create a new project Go to File >> New >> project >> Select asp.net MVC application>> Enter application name >> Click on Ok button >> Select Empty and hit on Ok button.

Step 2: Add class to Model
To add class Right click on Models folder >> Add >> Select Class and Enter class name. In this project I add three Classes
User_Registration.cs
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
public class User_Registration
    {
        [Key]
        public int Id { get; set; }
       [Required(ErrorMessage="Please Enter UserName")]
        public string User_Name { get; set; }
          [Required(ErrorMessage = "Please Enter First Name")]
        public string First_Name { get; set; }
      [Required(ErrorMessage = "Please Enter Last Name")]
        public string Last_Name { get; set; }
       [DataType(DataType.Upload)]
        public string Profile_Image { get; set; }
    [Required(ErrorMessage = "Please Enter Password")]
        public string Password { get; set; }
        [RegularExpression(@"^([0-9a-zA-Z]([\+\-_\.][0-9a-zA-Z]+)*)+@(([0-9a-zA-Z][-\w]*[0-9a-zA-Z]*\.)+[a-zA-Z0-9]{2,3})$",ErrorMessage = "Please Enter Email ID")]
        public string EmailId { get; set; }
       [Required(ErrorMessage = "Please Enter Gender")]
        public string Sex { get; set; }
        [Required(ErrorMessage = "Please Select Qualification")]
        [ForeignKey("Master_Qualification")]
        public int EducationId { get; set; }
       [Required(ErrorMessage = "Please Select Country")]
        [ForeignKey("Master_Country")]
        public int CountryId { get; set; }
       [Required(ErrorMessage = "Please Enter Phone No")]
        public int Phone_No { get; set; }
     [Required(ErrorMessage = "Please Select the terma & Conditions")]
        public bool Terms { get; set; }

        public virtual Master_Country Master_Country { get; set; }
        public virtual Master_Qualification Master_Qualification { get; set; }
    }

 Master_Qualification.cs
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
public class Master_Qualification
    {
        [Key]
        public int Id { get; set; }
         [Required]
        public string Qualification { get; set; }

        public virtual ICollection<User_Registration> User_Registrations { get; set; }
    }

Master_Country.cs
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
   public class Master_Country
    {
        [Key]
        public int Id { get; set; }
         [Required]
        public string Country_Name { get; set; }

        public virtual ICollection<User_Registration> User_Registrations { get; set; }
    }

Step 3: Add classes DBset to project DBContext
I add another class to Models folder named ProjectContext.cs
using System.Data.Entity;

public class ProjectContext :DbContext
    {
        public ProjectContext()
            : base("name=ProjectConnectionString")
        {
        }
        public DbSet<User_Registration> User_Registrations { get; set; }
        public DbSet<Master_Qualification> Master_Qualifications { get; set; }
        public DbSet<Master_Country> Master_Country { get; set; }
    }
Note: Firstly install the Entity Framework. Install-Package EntityFramework

Step 4: Add ConnectionString
Go to web.config file and add a ConnectionString :
  <connectionStrings>
    <add name="ProjectConnectionString" connectionString="Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\UserTestDatabase.mdf;Integrated Security=True" providerName="System.Data.SqlClient" />
  </connectionStrings>

Step 5: Add a controller to project
Right click on the Controllers folder >> Add >> Select Controller.  Add an empty Controller to Project UserRegistrationController.cs
using UserRegistration.Models;
using System.IO;

public class UserRegistrationController : Controller
    {
        private ProjectContext db = new ProjectContext(); 
      
        public ActionResult Create()
        {
            ViewBag.CountryId = new SelectList(db.Master_Country, "Id", "Country_Name");
            ViewBag.EducationId = new SelectList(db.Master_Qualifications, "Id", "Qualification");
            return View();
        }       

        [HttpPost]
        public ActionResult Create(User_Registration user_registration)
        {
            if (ModelState.IsValid)
            {
                HttpPostedFileBase file = Request.Files["fileupload"];
                if (file.ContentLength > 0)
                {
                    var fileName = Path.GetFileName(file.FileName);
                    var guid = Guid.NewGuid().ToString();
                    var path = Path.Combine(Server.MapPath("~/uploads"), guid + fileName);
                    file.SaveAs(path);
                    string fl = path.Substring(path.LastIndexOf("\\"));
                    string[] split = fl.Split('\\');
                    string newpath = split[1];
                    string imagepath = "~/uploads/" + newpath;
                    user_registration.Profile_Image = imagepath;
                    db.User_Registrations.Add(user_registration);
                    db.SaveChanges();
                    TempData["Success"] = "You have been Successfully Register to our Website";
                    return RedirectToAction("Create");                 
                }
            
            }

            ViewBag.CountryId = new SelectList(db.Master_Country, "Id", "Country_Name", user_registration.CountryId);
            ViewBag.EducationId = new SelectList(db.Master_Qualifications, "Id", "Qualification", user_registration.EducationId);
            return View(user_registration);
        }
     
        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }
I have added MasterCountryController.cs and MasterQualificationController.cs Controller with CRUD functionality.

Step 6: Add a View
Right Click on Create and add a strogly typed view for User_Registration.cs Model class.
@model UserRegistration.Models.User_Registration

@{
    ViewBag.Title = "Create";
}
<style>
    .editor-label
    {
        float:left;
         margin: 15px 50px 0 0;
  width: 200px;
    }
    .editor-field
    {
       margin-top: 15px;
    }
</style>
<h2>Create</h2>

@using (Html.BeginForm("Create","UserRegistration", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)


    <fieldset>
        <legend>User Registration</legend>

        <div class="editor-label">
           UserName
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.User_Name)
            @Html.ValidationMessageFor(model => model.User_Name)
        </div>

        <div class="editor-label">
           First Name
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.First_Name)
            @Html.ValidationMessageFor(model => model.First_Name)
        </div>

        <div class="editor-label">
            Last Name
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Last_Name)
            @Html.ValidationMessageFor(model => model.Last_Name)
        </div>

        <div class="editor-label">
           Upload Profile Image
        </div>
        <div class="editor-field">
            <input type="file" name="fileupload" />
            @Html.ValidationMessageFor(model => model.Profile_Image)
        </div>

        <div class="editor-label">
          Enter Password
        </div>
        <div class="editor-field">
            @Html.PasswordFor(model => model.Password)
            @Html.ValidationMessageFor(model => model.Password)
        </div>

        <div class="editor-label">
          Enter EmailId
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.EmailId)
            @Html.ValidationMessageFor(model => model.EmailId)
        </div>

        <div class="editor-label">
          Gender
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Sex)
            @Html.ValidationMessageFor(model => model.Sex)
        </div>

        <div class="editor-label">
           Qualification
        </div>
        <div class="editor-field">
            @Html.DropDownList("EducationId", "--Select--")
            @Html.ValidationMessageFor(model => model.EducationId)
        </div>

        <div class="editor-label">
           Country
        </div>
        <div class="editor-field">
            @Html.DropDownList("CountryId", "--Select--")
            @Html.ValidationMessageFor(model => model.CountryId)
        </div>

        <div class="editor-label">
           Phone No.
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Phone_No)
            @Html.ValidationMessageFor(model => model.Phone_No)
        </div>

        <div class="editor-label">
          Accept the Terms & Conditions
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Terms)
            @Html.ValidationMessageFor(model => model.Terms)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
            @if (TempData["Success"] != null)
{
    <div class="success">
        <p>@TempData["Success"].ToString()</p>
    </div>
}
    </fieldset>
}

Now build the project and run.
Download

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon