Complete Login And Registration System In ASP.NET MVC Application With Database Connection

Here, I am going to demonstrate a simple login and registration form along with a simple admin panel in MVC, so that after registration users can easily log in and see their data in the admin panel.
 
I hope you are familiar with MVC Concepts but still, I write this blog in consideration for beginners so that they can easily understand. I am using MVC 4 in VS 2010. You can code in any VS.
 
Let us first start with the DATABASE SECTION.
 
STEP-1
 
First, create a table in SQL SERVER in your already created database or you can create a new one by using the below code,
  1. --Syntax 
  2. CREATE DATABASE database name;  
  3.   
  4. CREATE DATABASE Sample;  //My DB name is Sample
Now, execute the below code to create a  table in the database,
  1. SET ANSI_NULLS ON  
  2. GO  
  3.   
  4. SET QUOTED_IDENTIFIER ON  
  5. GO  
  6.   
  7. SET ANSI_PADDING ON  
  8. GO  
  9.   
  10. CREATE TABLE [dbo].[Enrollment](  
  11.     [ID] [int] IDENTITY(1,1) NOT NULL,  
  12.     [FirstName] [varchar](50) NULL,  
  13.     [LastName] [varchar](50) NULL,  
  14.     [Password] [nvarchar](30) NULL,  
  15.     [Email] [nvarchar](50) NULL,  
  16.     [Phone] [varchar](15) NULL,  
  17.     [SecurityAnwser] [nvarchar](50) NULL,  
  18.     [Gender] [varchar](15) NULL,  
  19. PRIMARY KEY CLUSTERED   
  20. (  
  21.     [ID] ASC  
  22. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ONON [PRIMARY]  
  23. ON [PRIMARY]  
  24.   
  25. GO  
  26.   
  27. SET ANSI_PADDING OFF  
  28. GO 
STEP-2
 
Now write a stored procedure named as SP_EnrollDetail as below,
  1. SET ANSI_NULLS ON  
  2. GO  
  3. SET QUOTED_IDENTIFIER ON  
  4. GO  
  5.   
  6. create procedure [dbo].[SP_EnrollDetail]  
  7. (  
  8. @FirstName varchar(50)=NULL,  
  9. @LastName varchar(50)=NULL,  
  10. @Password varchar(50)=NULL,  
  11. @Gender varchar(10)=NULL,  
  12. @Email nvarchar(50)=NULL,  
  13. @Phone varchar(15)=NULL,  
  14. @SecurityAnwser nvarchar(50)=NULL,  
  15. @status varchar(15)  
  16. )  
  17. as  
  18. begin  
  19. if @status='Insert'  
  20. begin  
  21. insert into Enrollment(FirstName,LastName,Password,Gender,Email,Phone,SecurityAnwser)values(@FirstName,@LastName,@Password,@Gender,@Email,@Phone,@SecurityAnwser)  
  22. end  
  23. end 
Now, create another procedure named as sp_GetEnrollmentDetails to get the details in Admin Panel
  1. SET ANSI_NULLS ON  
  2. GO  
  3. SET QUOTED_IDENTIFIER ON  
  4. GO  
  5. create procedure [dbo].[sp_GetEnrollmentDetails]  
  6. (@Email nvarchar(50))  
  7. as  
  8. begin  
  9. select * from Enrollment where Email=@Email  
  10. end 
Now, let's come to the programming part of it using Visual Studio. I am using VS 2010 due to a specific problem, you can code in VS 2015 or further.
 
STEP-1 
 
Create a Project in MVC then, create a class in the Model folder by right clicking. Name it Enroll. cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.ComponentModel.DataAnnotations;  
  6. using System.Web.Mvc;  
  7.   
  8. namespace PRIYANKAPROJECT.Models  
  9. {  
  10.     public class Enroll  
  11.     {  
  12.         [Display(Name = "ID")]  
  13.         public int ID { getset; }  
  14.   
  15.         [Required(ErrorMessage = "Please enter FirstName")]  
  16.         [Display(Name = "FirstName")]  
  17.         public string FirstName { getset; }  
  18.   
  19.         [Required(ErrorMessage="Please enter LastName" )]  
  20.         [Display(Name = "LastName")]  
  21.         public string LastName { getset; }  
  22.   
  23.         [Required(ErrorMessage = "Please enter password")]  
  24.         [DataType(DataType.Password)]  
  25.         [StringLength(100, ErrorMessage = "Password \"{0}\" must have {2} character", MinimumLength = 8)]  
  26.         [RegularExpression(@"^([a-zA-Z0-9@*#]{8,15})$", ErrorMessage = "Password must contain: Minimum 8 characters atleast 1 UpperCase Alphabet, 1 LowerCase      Alphabet, 1 Number and 1 Special Character")]
          public string Password { getset; }  
  27.   
  28.         [Display(Name = "Confirm password")]  
  29.         [Required(ErrorMessage = "Please enter confirm password")]  
  30.         [Compare("Password", ErrorMessage = "Confirm password doesn't match, Type again !")]  
  31.         [DataType(DataType.Password)]  
  32.         public string Confirmpwd { getset; }  
  33.         public Nullable<bool> Is_Deleted { getset; }  
  34.   
  35.         [Display(Name = "Gender")]
            [Required(ErrorMessage = "Please Select the gender")]
            public string Gender { get; set; }
  36.   
  37.         [Required]  
  38.         [RegularExpression("^[a-zA-Z0-9_\\.-]+@([a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,6}$", ErrorMessage = "E-mail id is not valid")]  
  39.         public string Email { getset; }  
  40.   
  41.         [DataType(DataType.PhoneNumber)]  
  42.         [Display(Name = "Phone Number")]  
  43.         [Required(ErrorMessage = "Phone Number Required!")]  
  44.         [RegularExpression(@"^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$",ErrorMessage = "Entered phone format is not valid.")]  
  45.         public string PhoneNumber { getset; }  
  46.   
  47.         [Required(ErrorMessage = "Please enter Security Answer")]  
  48.         [Display(Name = "Security Answer")]  
  49.         public string SecurityAnwser { getset; }  
  50.   
  51.         public List<Enroll> Enrollsinfo { getset; }  
  52.   
  53.     }  

STEP-2
 
Right click on Controller Class. Add a Controller named EnrollmentController
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using PRIYANKAPROJECT.Models;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9. using System.Configuration;  
  10.   
  11. namespace PRIYANKAPROJECT.Controllers  
  12. {  
  13.     public class EnrollmentController : Controller  
  14.     {  
  15.         public string value = "";  
  16.   
  17.         [HttpGet]  
  18.         public ActionResult Index()  
  19.         {  
  20.             return View();  
  21.         }  
  22.   
  23.         [HttpPost]  
  24.         public ActionResult Index(Enroll e)  
  25.         {  
  26.             if (Request.HttpMethod == "POST")  
  27.             {  
  28.                 Enroll er = new Enroll();  
  29.                 using (SqlConnection con = new SqlConnection("Data Source=PRIYANKA\\SQLEXPRESS;Integrated Security=true;Initial Catalog=Sample"))  
  30.                 {  
  31.                     using (SqlCommand cmd = new SqlCommand("SP_EnrollDetail", con))  
  32.                     {  
  33.                         cmd.CommandType = CommandType.StoredProcedure;  
  34.                         cmd.Parameters.AddWithValue("@FirstName", e.FirstName);  
  35.                         cmd.Parameters.AddWithValue("@LastName", e.LastName);  
  36.                         cmd.Parameters.AddWithValue("@Password", e.Password);  
  37.                         cmd.Parameters.AddWithValue("@Gender", e.Gender);  
  38.                         cmd.Parameters.AddWithValue("@Email", e.Email);  
  39.                         cmd.Parameters.AddWithValue("@Phone", e.PhoneNumber);  
  40.                         cmd.Parameters.AddWithValue("@SecurityAnwser", e.SecurityAnwser);  
  41.                         cmd.Parameters.AddWithValue("@status""INSERT");  
  42.                         con.Open();  
  43.                         ViewData["result"] = cmd.ExecuteNonQuery();  
  44.                         con.Close();  
  45.                     }  
  46.                 }  
  47.             }  
  48.             return View();  
  49.         }  
  50.           
  51.     }  

STEP-3
 
Right-click on Index() Action Method and add a view
  1. @model PRIYANKAPROJECT.Models.Enroll    
  2.     
  3. @{    
  4.     ViewBag.Title = "Index";    
  5. }    
  6. <!DOCTYPE html>    
  7. <html>    
  8. <head>    
  9. <meta name="viewport" content="width=device-width" />    
  10. <title>ENROLLMENT</title>    
  11. <link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"/>    
  12. <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>    
  13. <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
  14. <link href="../../Content/StyleSheet.css" rel="stylesheet" type="text/css" />   
  15. <script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"></script>  
  16. <script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>  
  17. <script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>  
  18. <script type="text/javascript" src="~/Scripts/passwordscheck.js"></script>  
  19. <link href="~/Scripts/passwordscheck.css" rel="stylesheet" />  
  20. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
  21. </head>    
  22. <body>    
  23. <!------ Include the above in your HEAD tag ---------->    
  24. @using (Html.BeginForm("Index""Enrollment", FormMethod.Post))    
  25. {    
  26. <div class="container register">    
  27.                 <div class="row">    
  28.                     <div class="col-md-3 register-left">    
  29.                         <img src="https://image.ibb.co/n7oTvU/logo_white.png" alt=""/>    
  30.                         <h3>Welcome</h3>    
  31.                          <p>This Example is for learning Basic Login and Registration Using ADO.NET in MVC.    
  32.                          <br />Hope this will boast your Knowledge.</p>    
  33.                      </div>    
  34.                     <div class="col-md-9 register-right">    
  35.                         <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">    
  36.                             <li class="nav-item">    
  37.                                 <a class="nav-link active" id="home-tab" data-toggle="tab" href="../Enrollment/Index" role="tab" aria-controls="home" aria-selected="true">Register</a>    
  38.                             </li>    
  39.                             <li class="nav-item">    
  40.                                 <a class="nav-link" id="profile-tab" data-toggle="tab" href="../UserLogin/Index" role="tab" aria-controls="profile" aria-selected="false">Login</a>    
  41.                             </li>    
  42.                         </ul>    
  43.                         <div class="tab-content" id="myTabContent">    
  44.                             <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">    
  45.                                 <h3 class="register-heading">Apply as a Employee</h3>    
  46.                                 <div class="row register-form">    
  47.                                     <div class="col-md-6">    
  48.                                         <div class="form-group">    
  49.                                              @Html.TextBoxFor(e => e.FirstName, new { @class = "form-control", placeholder = "First Name *" })    
  50.                                              @Html.ValidationMessageFor(e => e.FirstName)    
  51.                                         </div>    
  52.                                         <div class="form-group">    
  53.                                                @Html.TextBoxFor(e => e.LastName, new { @class = "form-control", placeholder = "Last Name *" })    
  54.                                                @Html.ValidationMessageFor(e => e.LastName)    
  55.                                         </div>    
  56.                                         <div class="form-group">    
  57.                                            @Html.PasswordFor(e => e.Password, new { id = "password", @class = "form-control", placeholder = "Password *" })    
  58.                                              <span id="result"></span>    
  59.                                              @Html.ValidationMessageFor(e => e.Password)    
  60.                                         </div>    
  61.                                         <div class="form-group">    
  62.                                             @Html.PasswordFor(e => e.Confirmpwd, new { @class = "form-control", placeholder = "Confirm Password *" })    
  63.                                             @Html.ValidationMessageFor(e => e.Confirmpwd)    
  64.                                         </div>    
  65.                                         <div class="form-group">    
  66.                                             <div class="maxl">    
  67.                                               @Html.RadioButtonFor(e => e.Gender, "Male"new { @class = "radio inline" })<span> Male </span>     
  68.                                               @Html.RadioButtonFor(e => e.Gender, "Female"new { @class = "radio inline" })<span>Female </span>     
  69.                                             </div>    
  70.                                         </div>    
  71.                                     </div>    
  72.                                     <div class="col-md-6">    
  73.                                         <div class="form-group">    
  74.                                             @Html.TextBoxFor(e => e.Email, new { @class = "form-control", placeholder = "Your Email *" })    
  75.                                             @Html.ValidationMessageFor(e => e.Email)    
  76.                                         </div>    
  77.                                         <div class="form-group">    
  78.                                            @Html.TextBoxFor(e => e.PhoneNumber, new { @class = "form-control", placeholder = "Your Phone *" })    
  79.                                            @Html.ValidationMessageFor(e => e.PhoneNumber)    
  80.                                          
  81.                                         </div>    
  82.                                         <div class="form-group">    
  83.                                             <select class="form-control">    
  84.                                                 <option class="hidden"  selected disabled>Please select your Sequrity Question</option>    
  85.                                                 <option>What is your Birthdate?</option>    
  86.                                                 <option>What is Your old Phone Number</option>    
  87.                                                 <option>What is your Pet Name?</option>    
  88.                                             </select>    
  89.                                         </div>    
  90.                                         <div class="form-group">    
  91.                                             @Html.TextBoxFor(e => e.SecurityAnwser, new { @class = "form-control",placeholder="`Answer *"})    
  92.                                             @Html.ValidationMessageFor(e => e.SecurityAnwser)    
  93.                                          
  94.                                         </div>    
  95.                                         <input type="submit" class="btnRegister"  value="Register"/>    
  96.                                     </div>    
  97.                                 </div>    
  98.                             </div>    
  99.                          </div>    
  100.                     </div>    
  101.                 </div>    
  102.                    
  103.          <script type="text/javascript">    
  104.          $(function () {    
  105.             var msg = '@ViewData["result"]';    
  106.             if (msg == '1')    
  107.             {    
  108.                 alert("User Details Inserted Successfully");    
  109.                 window.location.href = "@Url.Action("Index", "Enrollment")";    
  110.              }    
  111.             });    
  112.          </script>    
  113.          }    
  114.       </div>    
  115.       }    
  116.    </body>    
  117. </html>    
Now build your project and run it. In Localhost run the page as http://localhost:51320/Enrollment/Index, as you can see in the below screenshot.
 
Now, add the record into the form, data is saved in a database in the table below.
 
 
STEP-4
 
Now create a controller named as UserLogin. You can write Controller Action() Method in the same EmployeeController or you can write it separately. I have written it separately.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using MvcApplication.Models;  
  7. using System.Data.SqlClient;  
  8. using System.Configuration;  
  9. using System.Data;  
  10. using System.Web.Security;  
  11.   
  12. namespace MvcApplication.Controllers  
  13. {  
  14.     public class UserLoginController : Controller  
  15.     {   
  16.         // GET: /UserLogin/  
  17.         public string status;  
  18.           
  19.         public ActionResult Index()  
  20.         {  
  21.             return View();  
  22.         }  
  23.         [HttpPost]  
  24.         public ActionResult Index(Enroll e)  
  25.         {  
  26.             String SqlCon = ConfigurationManager.ConnectionStrings["ConnDB"].ConnectionString;  
  27.             SqlConnection con = new SqlConnection(SqlCon);  
  28.             string SqlQuery = "select Email,Password from Enrollment where Email=@Email and Password=@Password";  
  29.               con.Open();  
  30.             SqlCommand cmd = new SqlCommand(SqlQuery, con); ;  
  31.             cmd.Parameters.AddWithValue("@Email", e.Email);  
  32.             cmd.Parameters.AddWithValue("@Password", e.Password);  
  33.             SqlDataReader sdr = cmd.ExecuteReader();  
  34.             if (sdr.Read())  
  35.             {  
  36.                 Session["Email"] = e.Email.ToString();  
  37.                 return RedirectToAction("Welcome");  
  38.             }  
  39.             else  
  40.             {  
  41.                 ViewData["Message"] = "User Login Details Failed!!";  
  42.             }  
  43.             if (e.Email.ToString() != null)  
  44.             {  
  45.                 Session["Email"] = e.Email.ToString();  
  46.                 status = "1";  
  47.             }  
  48.             else  
  49.             {  
  50.                 status = "3";  
  51.             }  
  52.   
  53.             con.Close();  
  54.             return View();  
  55.             //return new JsonResult { Data = new { status = status } };  
  56.         }  
  57.   
  58.         [HttpGet]  
  59.         public ActionResult Welcome(Enroll e)  
  60.         {  
  61.             Enroll user = new Enroll();  
  62.             DataSet ds = new DataSet();  
  63.   
  64.             using (SqlConnection con = new SqlConnection("Data Source=PRIYANKA\\SQLEXPRESS;Integrated Security=true;Initial Catalog=Sample"))  
  65.             {  
  66.                 using (SqlCommand cmd = new SqlCommand("sp_GetEnrollmentDetails", con))  
  67.                 {   
  68.                      cmd.CommandType = CommandType.StoredProcedure;  
  69.                      cmd.Parameters.Add("@Email", SqlDbType.VarChar, 30).Value =Session["Email"].ToString();  
  70.                      con.Open();  
  71.                      SqlDataAdapter sda = new SqlDataAdapter(cmd);  
  72.                      sda.Fill(ds);  
  73.                      List<Enroll> userlist = new List<Enroll>();  
  74.                      for (int i = 0; i < ds.Tables[0].Rows.Count; i++)  
  75.                      {  
  76.                         Enroll uobj = new Enroll();  
  77.                         uobj.ID = Convert.ToInt32(ds.Tables[0].Rows[i]["ID"].ToString());  
  78.                         uobj.FirstName = ds.Tables[0].Rows[i]["FirstName"].ToString();  
  79.                         uobj.LastName = ds.Tables[0].Rows[i]["LastName"].ToString();  
  80.                         uobj.Password = ds.Tables[0].Rows[i]["Password"].ToString();  
  81.                         uobj.Email = ds.Tables[0].Rows[i]["Email"].ToString();  
  82.                         uobj.PhoneNumber = ds.Tables[0].Rows[i]["Phone"].ToString();  
  83.                         uobj.SecurityAnwser = ds.Tables[0].Rows[i]["SecurityAnwser"].ToString();  
  84.                         uobj.Gender = ds.Tables[0].Rows[i]["Gender"].ToString();  
  85.   
  86.                         userlist.Add(uobj);  
  87.   
  88.                     }  
  89.                     user.Enrollsinfo = userlist;  
  90.                 }  
  91.                 con.Close();  
  92.   
  93.             }  
  94.             return View(user);  
  95.         }  
  96.         public ActionResult Logout()  
  97.         {  
  98.             FormsAuthentication.SignOut();  
  99.             Session.Abandon();  
  100.             return RedirectToAction("Index""UserLogin");  
  101.         }  
  102.   
  103.     }  
Now add a view on the Index Action method of UserLogin Controller as
  1. @model PRIYANKAPROJECT.Models.Enroll    
  2.     
  3. @{    
  4.     ViewBag.Title = "Index";    
  5. }    
  6. <!DOCTYPE html>    
  7. <html>    
  8. <head>    
  9. <meta name="viewport" content="width=device-width" />    
  10. <title>ENROLLMENT</title>    
  11. <link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"/>    
  12. <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>    
  13. <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
  14. <link href="../../Content/StyleSheet.css" rel="stylesheet" type="text/css" />    
  15. <script type="text/javascript">    
  16.     
  17.     $(document).ready(function () {    
  18.         $.ajax({    
  19.     
  20.             type: 'POST',    
  21.             URL: '/UserLogin/UserLogin',    
  22.             data: data,    
  23.             dataType: 'JSON',    
  24.             success: function (data) {    
  25.                 datadata = data.status    
  26.                 if (status == "1") {    
  27.                     window.location.href = '@Url.Action("Index","UserLogin")';    
  28.                 }    
  29.             }    
  30.         });    
  31.     });    
  32. </script>    
  33. </head>    
  34.     
  35. <body>    
  36. <!------ Include the above in your HEAD tag ---------->    
  37. @using (Html.BeginForm("Index""UserLogin", FormMethod.Post))    
  38. {    
  39. @Html.AntiForgeryToken()      
  40. <div class="container register">    
  41.                 <div class="row">    
  42.                     <div class="col-md-3 register-left">    
  43.                         <img src="https://image.ibb.co/n7oTvU/logo_white.png" alt=""/>    
  44.                         <h3>Welcome</h3>    
  45.                         <p>This Example is for learning MVC Basic Login and Registration Using ADO.NET.</p>    
  46.                     </div>    
  47.                     <div class="col-md-9 register-right">    
  48.                         <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">    
  49.                             <li class="nav-item">    
  50.                                 <a class="nav-link active" id="home-tab" data-toggle="tab" href="../Enrollment/Index" role="tab" aria-controls="home" aria-selected="true">Register</a>    
  51.                             </li>    
  52.                             <li class="nav-item">    
  53.                                 <a class="nav-link" id="profile-tab" data-toggle="tab" href="../UserLogin/Index" role="tab" aria-controls="profile" aria-selected="false">Login</a>    
  54.                             </li>    
  55.                         </ul>    
  56.                         <div class="tab-content" id="myTabContent">    
  57.                             <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">    
  58.                                 <h3 class="register-heading">Login as a Employee</h3>    
  59.                                 <div class="row register-form">    
  60.                                     <div class="col-md-6">    
  61.                                        <div class="form-group">    
  62.                                             @Html.TextBoxFor(e => e.Email, new { @class = "form-control", placeholder = "Your Email *" })    
  63.                                             @Html.ValidationMessageFor(e => e.Email)    
  64.                                         </div>    
  65.                                         <div class="form-group">    
  66.                                            @Html.PasswordFor(e => e.Password, new { id = "password", @class = "form-control", placeholder = "Password *" })    
  67.                                              <span id="result"></span>    
  68.                                              @Html.ValidationMessageFor(e => e.Password)    
  69.                                         </div>    
  70.                                     <div class="col-md-6">    
  71.                                          <input type="submit" class="btnLogin"  value="Login"/>    
  72.                                     </div>    
  73.                                             
  74.                                     </div>    
  75.                                         
  76.                                 </div>    
  77.                             </div>    
  78.                          </div>    
  79.                     </div>    
  80.                 </div>    
  81.                    
  82.                <script type="text/javascript">    
  83.                $(function () {    
  84.                      var msg = '@ViewData["result"]';    
  85.                      if (msg == '1')    
  86.                      {    
  87.                          alert("User Details Inserted Successfully");    
  88.                          window.location.href = "@Url.Action("Index", "UserLogin")";    
  89.                       }    
  90.                   });    
  91.                </script>    
  92.                }    
  93.             </div>    
  94.          }    
  95.    </body>    
  96. </html>    
Now, Open this URL http://localhost:49629/UserLogin/Index for the login page or using the Login tab in the form.
After successful login, the dashboard is generated.  I have already added Welcome() Action Method in UserLogin Controller.
  1. @model PRIYANKAPROJECT.Models.Enroll    
  2.     
  3. @{    
  4.     ViewBag.Title = "Welcome";    
  5. }    
  6.     
  7. <!DOCTYPE html>    
  8. <html xmlns="http://www.w3.org/1999/xhtml">    
  9. <head>    
  10.     <meta charset="utf-8" />    
  11.     <meta name="viewport" content="width=device-width, initial-scale=1" />    
  12.     <meta name="description" content="" />    
  13.     <meta name="author" content="" />    
  14.     <!--[if IE]>    
  15.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    
  16.         <![endif]-->    
  17.     <title>FREE RESPONSIVE HORIZONTAL ADMIN</title>    
  18.     <!-- BOOTSTRAP CORE STYLE  -->    
  19.     <link href="../../Content/assets/css/bootstrap.css" rel="stylesheet" />    
  20.     <!-- FONT AWESOME STYLE  -->    
  21.     <link href="../../Content/assets/css/font-awesome.css" rel="stylesheet" />    
  22.     <!-- CUSTOM STYLE  -->    
  23.     <link href="../../Content/assets/css/style.css" rel="stylesheet" />    
  24.     <!-- GOOGLE FONT -->    
  25.     <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />    
  26.     
  27. </head>    
  28. <body>    
  29.     <div class="navbar navbar-inverse set-radius-zero" >    
  30.         <div class="container">    
  31.             <div class="navbar-header">    
  32.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">    
  33.                     <span class="icon-bar"></span>    
  34.                     <span class="icon-bar"></span>    
  35.                     <span class="icon-bar"></span>    
  36.                 </button>    
  37.                 <a class="navbar-brand" href="Welcome">    
  38.                     <img src="../../Content/assets/img/logo.png" />    
  39.                 </a>    
  40.             </div>    
  41.             <div class="right-div">    
  42.                 @Html.ActionLink("LOG ME OUT","Logout","UserLogin",new { @class = "btn btn-danger pull-right" })    
  43.             </div>    
  44.         </div>    
  45.     </div>    
  46.     <!-- LOGO HEADER END-->    
  47.     <section class="menu-section">    
  48.         <div class="container">    
  49.             <div class="row ">    
  50.                 <div class="col-md-12">    
  51.                     <div class="navbar-collapse collapse ">    
  52.                         <ul id="menu-top" class="nav navbar-nav navbar-right">    
  53.                             <li><a href="welcome" class="menu-top-active">DASHBOARD</a></li>    
  54.     
  55.                             @if(Session["Email"]!=null)    
  56.                             {    
  57.                                 <li><a href="welcome" class="menu-top-active">Welcome @Session["Email"].ToString()</a></li>    
  58.                             }    
  59.     
  60.                          </ul>    
  61.                     </div>    
  62.                 </div>    
  63.     
  64.             </div>    
  65.         </div>    
  66.     </section>    
  67.      <!-- MENU SECTION END-->    
  68.     <div class="content-wrapper">    
  69.          <div class="container">    
  70.         <div class="row pad-botm">    
  71.             <div class="col-md-12">    
  72.                 <h4 class="header-line">ADMIN DASHBOARD</h4>    
  73.                     
  74.                             </div>    
  75.     
  76.         </div>    
  77.                  
  78.                                
  79.              <div class="row">    
  80.                  <div class="col-md-12 col-sm-12 col-xs-12">    
  81.                     <div id="carousel-example" class="carousel slide slide-bdr" data-ride="carousel" >    
  82.                        
  83.                     <div class="carousel-inner">    
  84.                         <div class="item active">    
  85.     
  86.                             <img src="../../Content/assets/img/1.jpg" alt="" />    
  87.                                
  88.                         </div>    
  89.                         <div class="item">    
  90.                             <img src="../../Content/assets/img/2.jpg" alt="" />    
  91.                               
  92.                         </div>    
  93.                         <div class="item">    
  94.                             <img src="../../Content/assets/img/3.jpg" alt="" />    
  95.                                
  96.                         </div>    
  97.                     </div>    
  98.                     <!--INDICATORS-->    
  99.                      <ol class="carousel-indicators">    
  100.                         <li data-target="#carousel-example" data-slide-to="0" class="active"></li>    
  101.                         <li data-target="#carousel-example" data-slide-to="1"></li>    
  102.                         <li data-target="#carousel-example" data-slide-to="2"></li>    
  103.                     </ol>    
  104.                     <!--PREVIUS-NEXT BUTTONS-->    
  105.                      <a class="left carousel-control" href="#carousel-example" data-slide="prev">    
  106.     <span class="glyphicon glyphicon-chevron-left"></span>    
  107.   </a>    
  108.   <a class="right carousel-control" href="#carousel-example" data-slide="next">    
  109.     <span class="glyphicon glyphicon-chevron-right"></span>    
  110.   </a>    
  111.                 </div>    
  112.               </div>    
  113.               </div>    
  114.                 
  115.     
  116.              <div class="row">    
  117.                      
  118.                   <div class="col-md-12 col-sm-12 col-xs-12">    
  119.                       <div class="panel panel-success">    
  120.                         <div class="panel-heading">    
  121.                            Responsive Table Example    
  122.                         </div>    
  123.                         <div class="panel-body">    
  124.                             <div class="table-responsive">    
  125.                                     
  126.                                        
  127. @if (Model != null)    
  128. {    
  129.     if (Model.Enrollsinfo.Count > 0)    
  130.     {    
  131.    <table class="table table-striped table-bordered table-hover">    
  132.    <thead>         
  133.             <tr>    
  134.             <th>#</th>    
  135.             <th>ID</th>    
  136.             <th>FirstName</th>    
  137.             <th>LastName</th>    
  138.             <th>Password</th>    
  139.             <th>Email</th>    
  140.             <th>Phone</th>    
  141.             <th>SecurityAnwser</th>    
  142.             <th>Gender</th>    
  143.             </tr>    
  144.             @foreach (var item in Model.Enrollsinfo)    
  145.             {    
  146.                     <tr>    
  147.                         <td></td>    
  148.                         <td>@Html.DisplayFor(modelitem => item.ID) </td>    
  149.                         <td>@Html.DisplayFor(modelitem => item.FirstName)</td>    
  150.                         <td>@Html.DisplayFor(modelitem => item.LastName)</td>    
  151.                         <td>@Html.DisplayFor(modelitem => item.Password)</td>    
  152.                         <td>@Html.DisplayFor(modelitem => item.Email) </td>    
  153.                         <td>@Html.DisplayFor(modelitem => item.PhoneNumber)</td>    
  154.                         <td>@Html.DisplayFor(modelitem => item.SecurityAnwser)</td>    
  155.                         <td>@Html.DisplayFor(modelitem => item.Gender)</td>    
  156.                    </tr>    
  157.             }    
  158.          
  159.  </thead>    
  160. </table>    
  161.     }    
  162.     else    
  163.     {    
  164.         <b>No Details Found.</b>    
  165.     }    
  166. }  </div>    
  167.                         </div>    
  168.                     </div>    
  169.              </div>    
  170.                  
  171.              </div>   </div>    
  172.     </div>    
  173.      <!-- CONTENT-WRAPPER SECTION END-->    
  174.     <section class="footer-section">    
  175.         <div class="container">    
  176.             <div class="row">    
  177.                 <div class="col-md-12">    
  178.                    © 2021 https://www.c-sharpcorner.com/members/priyanka-singh51 |<a href="https://www.c-sharpcorner.com/members/priyanka-singh51" target="_blank"  > Designed by : Priyanka Singh</a>     
  179.                 </div>    
  180.     
  181.             </div>    
  182.         </div>    
  183.     </section>    
  184.       <!-- FOOTER SECTION END-->    
  185.     <!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME  -->    
  186.     <!-- CORE JQUERY  -->    
  187.     <script src="../../Content/assets/js/jquery-1.10.2.js"></script>    
  188.     <!-- BOOTSTRAP SCRIPTS  -->    
  189.     <script src="../../Content/assets/js/bootstrap.js"></script>    
  190.       <!-- CUSTOM SCRIPTS  -->    
  191.     <script src="../../Content/assets/js/custom.js"></script>    
  192. </body>    
  193. </html>    
Now, you can see the dashboard or Admin Panel as below with Logout functionality.
 
 
I hope you definitely learned from this project. If you have any queries regarding this project feel free to ask and I have already attached the Source Code of the Project file. I will definitely share if I added some more functionality in it in further blogs.
 
Take care of yourself and keep learning.
 
Thank you.

Similar Articles