Tuesday, July 8, 2014

Registration Form in Asp.Net MVC 4

Registration Form in Asp.Net MVC 4

In this blog, I am going to tell you how to create a basic registration form in asp.net mvc 4.
In websites, we generally use registration form to register the user and save his/her information in the database.

Step -1

First create a table in the database named “StudentInformation” and following fields in it:













Now create a stored procedure named “sp_InsertRecord” to insert the records into the database, stored procedures are compile code, secured one and executes fastly than inline query.
Create Procedure sp_InsertRecord
(
@name varchar(50),
@age varchar(50),
@address varchar(50),
@course varchar(50)
)
AS
Begin
      Insert Into StudentInformation(Name,Age,Address,Course) values(@name, @age, @address,@course)
End

Step -2

Now create an asp.net mvc 4 web application with razor engine and empty template and add a controller named “HomeController” to the project and write the below code in it.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using RegistrationFormMvcApp.Models;

namespace RegistrationFormMvcApp.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        [HttpGet]
        public ActionResult Index()
        {
            ViewData["Message"] = "";
            return View();
        }

        [HttpPost]
        public ActionResult Index(Student student)
        {
            if (ModelState.IsValid)
            {
                student.InsertRecord(student);
                ViewData["Message"] = "Record Inserted";
                return View();
            }
            else
            {
                ViewData["Message"] = "";
                return View();
            }
        }

    }
}

Step-3

Now add a model class named “Student” to the project and add the below code in it.
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;

namespace RegistrationFormMvcApp.Models
{
    public class Student
    {
        [Required(ErrorMessage="Name is mandatory")]
        [Display(Name="Name")]
        public string Name { get; set; }

        [Required(ErrorMessage="Age is mandatory")]
        [Display(Name="Age")]
        public string Age { get; set; }

        [Required(ErrorMessage="Address is mandatory")]
        [Display(Name="Address")]
        public string Address { get; set; }

        [Required(ErrorMessage="Course is mandatory")]
        [Display(Name="Course")]
        public string Course { get; set; }


        public bool InsertRecord(Student student)
        {
            string ConnString = ConfigurationManager.ConnectionStrings["ConnString"].ConnectionString;
            SqlConnection conn = new SqlConnection(ConnString);
            conn.Open();
            SqlCommand cmd = new SqlCommand("sp_InsertRecord",conn);
            cmd.CommandType = System.Data.CommandType.StoredProcedure;
            cmd.Parameters.Add("@name", System.Data.SqlDbType.VarChar,50).Value = student.Name;
            cmd.Parameters.Add("@age", System.Data.SqlDbType.VarChar,50).Value= student.Age;
            cmd.Parameters.Add("@address", System.Data.SqlDbType.VarChar,50).Value= student.Address;
            cmd.Parameters.Add("@course", System.Data.SqlDbType.VarChar, 50).Value = student.Course;
            Object obj = cmd.ExecuteNonQuery();
            return true;
        }

    }
}

Step-4

Next is to a view to the project named “Index”, it will strongly – typed view and write the below code in it:
@model RegistrationFormMvcApp.Models.Student

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Script/jquery-2.1.1.js"></script>
    <script type="text/javascript">

        $(function () {
            $('#FormName').submit(function () {
            }).after(function () {
                resetValue();
                            });

            $('#btnReset').click(function () {
                window.location = "/Home/Index";
            });
           
        });

        function resetValue() {
            $('#txtName').val("");
            $('#txtAge').val("");
            $('#txtAddress').val("");
            $('#txtCourse').val("");

        }

    </script>
</head>
<body>
    <div>
        @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "FormName" }))
        {
            <fieldset style="width: 400px;">
                <legend>Student Registration Form</legend>
                <div>
                    @ViewData["Message"]
                </div>
                <div>
                    @Html.LabelFor(m => m.Name)
                </div>
                <div>
                    @Html.TextBoxFor(m => m.Name, new { id = "txtName" })
                    @Html.ValidationMessageFor(m => m.Name)
                </div>
                <div>
                    @Html.LabelFor(m => m.Age)
                </div>
                <div>
                    @Html.TextBoxFor(m => m.Age, new { id = "txtAge" })
                    @Html.ValidationMessageFor(m => m.Age)
                </div>
                <div>
                    @Html.LabelFor(m => m.Address)
                </div>
                <div>
                    @Html.TextBoxFor(m => m.Address, new { id = "txtAddress" })
                    @Html.ValidationMessageFor(m => m.Address)
                </div>
                <div>
                    @Html.LabelFor(m => m.Course)
                </div>
                <div>
                    @Html.TextBoxFor(m => m.Course, new { id = "txtCourse" })
                    @Html.ValidationMessageFor(m => m.Course)
                </div>
                <div>
                    <input type="submit" title="Submit" id="btnSubmit" />
                    <input type="button" title="Reset" id="btnReset" value="Reset"/>
                </div>
            </fieldset>
        }
    </div>
</body>
</html>

As you can see that  I have used some jquery code also in this view. I have use jquery to clear the values of the textboxes either the form is submitted or the reset button is clicked.
To use jquery in your project, you need to download the jquery file and create a folder named “Script” and add the jquery to this folder and drag and drop the file to view in which you want to use the jquery like this:














Step -5

Now add the connection string in web.config file like below:
<connectionStrings>
  <add name="ConnString" connectionString="Data Source=Your data source name;Initial Catalog=Your database name;Integrated Security=true;" providerName="System.Data.SqlClient"/>
</connectionStrings>

Output

Run the application














Click on submit button will show you all the validation errors like this:















Clicking on the reset button will reset the form like this:
















Now put appropriate values in the textbox and click on submit button, 














the record will be inserted and show you a message “Record Inserted” like this:




   









Thank you for reading this article, please put your valuable comment or any suggestion/question in the comment box. 




2 comments: