Sunday, January 8, 2017

Part 28 - Create Login Page using Bootstrap and JQuery in Asp.net MVC





#Expected Output format:



Note : Please create an Image folder inside Content folder and put some images .Please replace the current image file with you image file.

#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 Login()
        {

            return View();
        }

        [HttpPost]
        public JsonResult LoginUser(RegistrationViewModel model)
        {
            MVCTutorialEntities db = new MVCTutorialEntities();

            SiteUser user = db.SiteUsers.SingleOrDefault(x => x.EmailId == model.EmailId && x.Password == model.Password);
            string result = "fail";
            if (user != null)
            {

                Session["UserId"] = user.UserId;
                Session["UserName"] = user.UserName;
                if (user.RoleId == 3)
                {
                    result = "GeneralUser";

                }
                else if (user.RoleId == 1)
                {
                    result = "Admin";

                }

            }


            return Json(result, JsonRequestBehavior.AllowGet);
        }


        public ActionResult Logout()
        { 
        
            Session.Clear();
            Session.Abandon();

            return RedirectToAction("Login");
        
        }

    }
}


  
#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>

                @if (Session["UserId"] != null) { 
                
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Welcome :@Session["UserName"]  </a></li>
                    <li><a href="/Test/Logout">Logout</a></li>

                </ul>
                
                }
                else { 
                 <ul class="nav navbar-nav navbar-right">
                    <li><a href="/Test/Login">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>


 # View Page (Login.cshtml)


@model MVCTutorial.Models.RegistrationViewModel
@{
    ViewBag.Title = "Login";
}

<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>&para; Have faith in us, We will give you full satisfaction by providing best service. &para;</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>Login Here</h4>
                </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">
                    <a href="#" class="btn btn-primary " onclick="LoginUser()">Submit</a>
                </div>
            </div>
        </form>

    </div>
</div>

<script>

    var LoginUser = function () {
        debugger
        var data = $("#myForm").serialize();

        $.ajax({
            type: "Post",
            url: "/Test/LoginUser",
            data: data,
            success: function (response) {
                debugger
                if (response == "fail") {

                    window.location.href = "/Test/Login";
                }
                else if (response == "Admin") {

                    window.location.href = "/Test/Admin";
                }
                else {

                    window.location.href = "/Test/Index";
                }
            }



        })



    }

</script>


  # Database Script (DB name = MVCTutorial)
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


   

All Code Factory

2 comments:

Jon Sigurdsson said...

Thanks for the guide!
Very detailed and helpful

Melbourne Web Developer

Teju Teju said...

very informative blog and useful article thank you for sharing with us, keep posting Big Data Hadoop Online Training Bangalore