Part 27 - Create registration form using bootstrap and JQuery in Asp.net mvc
#Expected Output format:
#Controller Code
using MVCTutorial.Models;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Threading;
using System.Web;
using System.Web.Mvc;
namespace MVCTutorial.Controllers
{
public class TestController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Registration()
{
return View();
}
[HttpPost]
public JsonResult RegisterUser(RegistrationViewModel model)
{
MVCTutorialEntities db = new MVCTutorialEntities();
SiteUser siteUser = new SiteUser();
siteUser.UserName = model.UserName;
siteUser.EmailId = model.EmailId;
siteUser.Password = model.Password;
siteUser.Address = model.Address;
siteUser.RoleId = 3;
db.SiteUsers.Add(siteUser);
db.SaveChanges();
return Json("Success",JsonRequestBehavior.AllowGet);
}
}
}
#Layout Page (_Layout.cshtml)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/Test/Index">
<img alt="Brand" src="~/Content/Images/logo.png" height="20" width="20">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Services <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" id="myTab">
<li role="presentation"><a href="#music" aria-controls="music" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-music"> </span> Music & Dance</a></li>
<li class="divider"></li>
<li role="presentation"><a href="#training" aria-controls="training" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-book"> </span> Summar Training</a></li>
<li class="divider"></li>
<li role="presentation"><a href="#website" aria-controls="website" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-cloud"> </span> Website Building</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Career</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li>
<li><a href="/Test/Registration">Register</a></li>
</ul>
</div>
</div>
</nav>
<div class="panel-body" >
@RenderBody()
</div>
<div class="well" style="background-color:#000000;color:wheat;margin-bottom:0px">
<div class="col-lg-4" style="margin-left:20px">
<h3><span class="glyphicon glyphicon-map-marker"></span> Address</h3>
<ul class="list-group list-unstyled">
<li>Technotips Ltd.</li>
<li>xyz Industrial Area</li>
<li>Phase-2,New Delhi-52</li>
</ul>
</div>
<div class="col-lg-4">
<h3><span class="glyphicon glyphicon-cog"></span> Our Services</h3>
<ul class="list-group list-unstyled">
<li><span class="glyphicon glyphicon-music"></span> <a href="#">Musical & Dance Traning</a> </li>
<li><span class="glyphicon glyphicon-book"></span> <a href="#">Training in Asp.Net,Java,android etc.</a></li>
<li><span class="glyphicon glyphicon-globe"></span> <a href="#">Web designing -corporate & Domestic</a> </li>
</ul>
</div>
<div class="col-lg-3">
<h3><span class="glyphicon glyphicon-briefcase"></span> Career</h3>
<ul class="list-group list-unstyled">
<li><span class="glyphicon glyphicon-music"></span> <a href="#">Musical & Dance</a> </li>
<li><span class="glyphicon glyphicon-book"></span> <a href="#">Summar training</a></li>
<li><span class="glyphicon glyphicon-globe"></span> <a href="#">Website Designing</a></li>
</ul>
</div>
<div style="clear:both"></div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
@RenderSection("scripts", required: false)
</body>
</html>
@model MVCTutorial.Models.RegistrationViewModel
@{
ViewBag.Title = "Registration";
}
<div class="panel panel-body">
<div class="col-md-3">
<div class="thumbnail">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Director Message</h3>
</div>
</div>
<img src="~/Content/Images/director1.jpg" alt="..." style="margin-top:-20px">
<div class="caption">
<h3>Ashish Tiwary</h3>
<p>¶ Have faith in us, We will give you full satisfaction by providing best service. ¶</p>
<p><a href="#" class="btn btn-primary" role="button">See more</a> </p>
</div>
</div>
</div>
<div class="col-md-9">
<form id="myForm">
<div class="form-group">
<div class="col-md-12">
<h4>Register Here</h4>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
@Html.TextBoxFor(m => m.UserName, new { @class = "form-control", @placeholder = "UserName" })
</div>
</div>
<div class="form-group">
<div class="col-md-12">
@Html.TextBoxFor(m => m.EmailId, new { @class = "form-control", @placeholder = "EmailId" })
</div>
</div>
<div class="form-group">
<div class="col-md-12">
@Html.PasswordFor(m => m.Password, new { @class = "form-control", @placeholder = "Password" })
</div>
</div>
<div class="form-group">
<div class="col-md-12">
@Html.TextBoxFor(m => m.Address, new { @class = "form-control", @placeholder = "Address" })
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<a href="#" class="btn btn-primary " onclick="RegisterUser()">Submit</a>
</div>
</div>
</form>
</div>
</div>
<script>
var RegisterUser = function () {
debugger
var data = $("#myForm").serialize();
$.ajax({
type: "Post",
url: "/Test/RegisterUser",
data: data,
success: function (response) {
alert("success");
}
})
}
</script>
Note: Please drop your previous database having same name if already exist.
USE [MVCTutorial]
GO
/****** Object: Table [dbo].[Department] Script Date: 07-01-2017 19:18:09 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Department](
[DepartmentId] [int] IDENTITY(1,1) NOT NULL,
[DepartmentName] [nvarchar](100) NULL,
CONSTRAINT [PK_Department] PRIMARY KEY CLUSTERED
(
[DepartmentId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
/****** Object: Table [dbo].[Employee] Script Date: 07-01-2017 19:18:10 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Employee](
[EmployeeId] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](50) NULL,
[DepartmentId] [int] NULL,
[Address] [varchar](150) NULL,
[IsDeleted] [bit] NULL,
CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
(
[EmployeeId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
/****** Object: Table [dbo].[Sites] Script Date: 07-01-2017 19:18:10 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Sites](
[SiteId] [int] IDENTITY(1,1) NOT NULL,
[EmployeeId] [int] NULL,
[SiteName] [nvarchar](150) NULL,
CONSTRAINT [PK_Sites] PRIMARY KEY CLUSTERED
(
[SiteId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
/****** Object: Table [dbo].[SiteUser] Script Date: 07-01-2017 19:18:10 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[SiteUser](
[UserId] [int] IDENTITY(1,1) NOT NULL,
[UserName] [nvarchar](50) NULL,
[EmailId] [nvarchar](50) NULL,
[Password] [nvarchar](50) NULL,
[Address] [nvarchar](150) NULL,
[RoleId] [int] NULL,
CONSTRAINT [PK_SiteUser] PRIMARY KEY CLUSTERED
(
[UserId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
/****** Object: Table [dbo].[UserRole] Script Date: 07-01-2017 19:18:10 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[UserRole](
[RoleId] [int] IDENTITY(1,1) NOT NULL,
[RoleName] [nvarchar](50) NULL,
CONSTRAINT [PK_UserRole] PRIMARY KEY CLUSTERED
(
[RoleId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET IDENTITY_INSERT [dbo].[Department] ON
GO
INSERT [dbo].[Department] ([DepartmentId], [DepartmentName]) VALUES (1, N'IT')
GO
INSERT [dbo].[Department] ([DepartmentId], [DepartmentName]) VALUES (2, N'QA')
GO
INSERT [dbo].[Department] ([DepartmentId], [DepartmentName]) VALUES (3, N'Development ')
GO
INSERT [dbo].[Department] ([DepartmentId], [DepartmentName]) VALUES (4, N'Marketing')
GO
SET IDENTITY_INSERT [dbo].[Department] OFF
GO
SET IDENTITY_INSERT [dbo].[Employee] ON
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (1, N'Ashish', 1, N'India', 1)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (2, N'John', 2, N'London', 1)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (3, N'Methew', 3, N'NewYork', 1)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (4, N'Brano', 4, N'France1', 0)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (5, N'Smith', 1, N'London', 1)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (6, N'Sara', 4, N'New york', 0)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (1005, N'David', 3, N'London', 0)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (1006, N'Arnold', 2, N'New york', 1)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (1007, N'Pokemon', 1, N'India', 1)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (1008, N'Disney', 2, N'london', 1)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (1009, N'Sara', 3, N'New york', 1)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (1010, N'Loren', 2, N'India', 1)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (1011, N'Robert', 4, N'India', 1)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (1012, N'Ashish Tiwary', 2, N'London', 0)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (1013, N'Robert', 1, N'America', 0)
GO
SET IDENTITY_INSERT [dbo].[Employee] OFF
GO
SET IDENTITY_INSERT [dbo].[Sites] ON
GO
INSERT [dbo].[Sites] ([SiteId], [EmployeeId], [SiteName]) VALUES (1, 1005, N'google.com')
GO
INSERT [dbo].[Sites] ([SiteId], [EmployeeId], [SiteName]) VALUES (2, 1006, N'www.technotips.com')
GO
INSERT [dbo].[Sites] ([SiteId], [EmployeeId], [SiteName]) VALUES (3, 1007, NULL)
GO
INSERT [dbo].[Sites] ([SiteId], [EmployeeId], [SiteName]) VALUES (4, 1008, N'google')
GO
INSERT [dbo].[Sites] ([SiteId], [EmployeeId], [SiteName]) VALUES (5, 1009, N'google')
GO
INSERT [dbo].[Sites] ([SiteId], [EmployeeId], [SiteName]) VALUES (6, 1010, N'fb.com/technotipstutorial')
GO
SET IDENTITY_INSERT [dbo].[Sites] OFF
GO
SET IDENTITY_INSERT [dbo].[SiteUser] ON
GO
INSERT [dbo].[SiteUser] ([UserId], [UserName], [EmailId], [Password], [Address], [RoleId]) VALUES (1, N'Ashish', N'ashish@yahoo.com', N'123456', N'India', 1)
GO
INSERT [dbo].[SiteUser] ([UserId], [UserName], [EmailId], [Password], [Address], [RoleId]) VALUES (2, N'donald', N'donald@gmail.com', N'123456', N'USA', 3)
GO
SET IDENTITY_INSERT [dbo].[SiteUser] OFF
GO
SET IDENTITY_INSERT [dbo].[UserRole] ON
GO
INSERT [dbo].[UserRole] ([RoleId], [RoleName]) VALUES (1, N'Admin')
GO
INSERT [dbo].[UserRole] ([RoleId], [RoleName]) VALUES (2, N'SuperAdmin')
GO
INSERT [dbo].[UserRole] ([RoleId], [RoleName]) VALUES (3, N'User')
GO
SET IDENTITY_INSERT [dbo].[UserRole] OFF
GO
ALTER TABLE [dbo].[Employee] WITH CHECK ADD CONSTRAINT [FK_Employee_Department] FOREIGN KEY([DepartmentId])
REFERENCES [dbo].[Department] ([DepartmentId])
GO
ALTER TABLE [dbo].[Employee] CHECK CONSTRAINT [FK_Employee_Department]
GO
ALTER TABLE [dbo].[Sites] WITH CHECK ADD CONSTRAINT [FK_Sites_Employee] FOREIGN KEY([EmployeeId])
REFERENCES [dbo].[Employee] ([EmployeeId])
GO
ALTER TABLE [dbo].[Sites] CHECK CONSTRAINT [FK_Sites_Employee]
GO
ALTER TABLE [dbo].[SiteUser] WITH CHECK ADD CONSTRAINT [FK_SiteUser_UserRole] FOREIGN KEY([RoleId])
REFERENCES [dbo].[UserRole] ([RoleId])
GO
ALTER TABLE [dbo].[SiteUser] CHECK CONSTRAINT [FK_SiteUser_UserRole]
GO
0 Response to "Part 27 - Create registration form using bootstrap and JQuery in Asp.net mvc"
Post a Comment