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.
This comment has been removed by the author.
ReplyDeleteexlent cooding standard.Thanks
ReplyDelete