Simple Registration form in asp.net mvc C# with validation

Simple Registration form in asp.net MVC C# with validation: In this tutorial, we will see how we can create a simple and responsive registration form in asp.net MVC.  Here you will see the step-by-step process.

Prerequisite to make registration form in asp.net MVC

• Basic of HTML,CSS and JavaScript
• Database (Table, Procedure)
• Web Config Connectivity
• C#

In this tutorial, I am using Visual Studio 2017, you can use whatever version you have. 

Steps to Create Registration Form in asp.net MVC C# 

Back-end process

1. Create one table (SQL Server) in which our record will be inserted.
2. Create a store procedure to insert data.

Front-end / CodeBehind process

1. Add the connection string in the web config file.

2. Add a controller, add view.

3. Add scripts on views (For Validation)

Let's see the step by step process to develop the registration form in asp.net MVC c#

Step #1

 Open Visual Studio and click on File--->Project--> Website follow the below image.

Step #2

Now select Web From left sidebar and click on asp.net web application (.Net Framework) c#, give a name and click on ok.

Step #3

Click on MVC and check on MVC [4] then hit ok [5].

You can see your MVC project is added, now you can start developing the MVC registration form.

Step #4

Create table and procedure in Microsoft SQL Server

CREATE TABLE [dbo].[tbl_customer](

       [customer_id] [bigint] IDENTITY(1,1) NOT NULL,

       [customer_name] [varchar](200) NOT NULL,

       [address_text] [varchar](600) NULL,

       [contact_no] [varchar](50) NULL,

       [email] [varchar](500) NULL,

       [password] [varchar](500) NULL,

 )

  

CREATE Procedure [dbo].[UserRegistration]   

@customer_name varchar(200) NOT NULL,

@address_text varchar(600) NULL,

@contact_no varchar(50) NULL,

@email varchar(500) NULL,

@password varchar(500) NULL             

as                   

  Begin           

              insert into tbl_customer(customer_name,address_text,contact_no,email,password)

              values (@customer_name,@address_text,@contact_no,@email,@password)

        Select 1 as msg  

  End

Step #5

Now Add an Action name registration in HomeController, right-click on the registration action to add view. [See Image]

CODE:

        SqlConnection con = new
        SqlConnection(ConfigurationManager.ConnectionStrings["MYCON"].ConnectionString);
        public ActionResult registration()
        {
            return View();
        }
 
        [HttpPost]
        public ActionResult registration(user model)
        {
            return View();
        }

Step #6

Add a class in Models Folder name user.cs, add properties in it.

CODE:

public class user

{

        [Required(ErrorMessage = "*")]

        public string customer_name { get; set; }

        [Required(ErrorMessage = "*")]

        public string address_text { get; set; }

        [Required(ErrorMessage = "*")]

        public string contact_no { get; set; }

        [Required(ErrorMessage = "*")]

        public string email { get; set; }

        [Required(ErrorMessage = "*")]

        public string password { get; set; }

}

Step #7

       

Step #8

After Selecting the Template And Model Class, Click on Add

Your View Will Look Like this (See Below)

@model MyFirstApp.Models.user
@{
    ViewBag.Title = "registration";
}
<h2>registration</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <h4>user</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.customer_name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.customer_name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.customer_name, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.address_text, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.address_text, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.address_text, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.contact_no, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.contact_no, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.contact_no, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.email, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.password, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.password, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.password, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Step #9

Again Come on HomeController And Add these Source Code

           
        [HttpPost]
        public ActionResult registration(user model)
        {
            DataTable dtt = new DataTable();
            SqlParameter[] param = new SqlParameter[]
            {
                new SqlParameter("@email_id",model.customer_name),
                new SqlParameter("@address_text",model.address_text),
                new SqlParameter("@contact_no",model.contact_no),
                new SqlParameter("@email",model.email),
                new SqlParameter("@password",model.password)
            };
            dtt = SaveData("UserRegistration", param);
            if (dtt.Rows.Count > 0)
            {
                if (Convert.ToInt32(dtt.Rows[0]["msg"]) == 1)
                {
                    ViewBag.Msg = "Data Saved !";
                }
            }
            return View();
        }
 
        public DataTable SaveData(string ProName, SqlParameter[] Param)
        {

            DataTable dt = new DataTable();
            try
            {
                con.Open();
                SqlCommand cmd = new SqlCommand(ProName, con);
                cmd.CommandType =
CommandType.StoredProcedure;
                foreach (SqlParameter prm in Param)
                {
                    cmd.Parameters.Add(prm);
                }
                SqlDataAdapter adp = new SqlDataAdapter(cmd);
                adp.Fill(dt);
            }
            catch (Exception)
            {
            }
            finally
            {
                con.Close();
            }
            return dt;




























































































        }

Step #10

Add Connection String in Web. Config In <configuration> Tag.

     <connectionStrings>
    <add name="MYCON" connectionString="Data
Source=Desktop;Initial Catalog=YourDataBaseName;integrated security=true;" />
  </connectionStrings>

Step #11

Now Run Your Application

URL Should be  /Home/registration

Now Fill the Data And Click on Create.