ASP.NET

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

Introduction

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.

-- Syntax:
CREATE DATABASE database name;

CREATE DATABASE Sample; -- My DB name is Sample

Now, execute the below code to create a  table in the database.

SET ANSI_NULLS ON;
GO

SET QUOTED_IDENTIFIER ON;
GO

SET ANSI_PADDING ON;
GO

CREATE TABLE [dbo].[Enrollment](
    [ID] [int] IDENTITY(1,1) NOT NULL,
    [FirstName] [varchar](50) NULL,
    [LastName] [varchar](50) NULL,
    [Password] [nvarchar](30) NULL,
    [Email] [nvarchar](50) NULL,
    [Phone] [varchar](15) NULL,
    [SecurityAnwser] [nvarchar](50) NULL,
    [Gender] [varchar](15) NULL,
    PRIMARY KEY CLUSTERED
    (
        [ID] 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

Step 2. Now write a stored procedure named SP_EnrollDetail as below.

SET ANSI_NULLS ON;
GO

SET QUOTED_IDENTIFIER ON;
GO

CREATE PROCEDURE [dbo].[SP_EnrollDetail]
(
    @FirstName varchar(50) = NULL,
    @LastName varchar(50) = NULL,
    @Password varchar(50) = NULL,
    @Gender varchar(10) = NULL,
    @Email nvarchar(50) = NULL,
    @Phone varchar(15) = NULL,
    @SecurityAnwser nvarchar(50) = NULL,
    @status varchar(15)
)
AS
BEGIN
    IF @status = 'Insert'
    BEGIN
        INSERT INTO Enrollment (FirstName, LastName, Password, Gender, Email, Phone, SecurityAnwser)
        VALUES (@FirstName, @LastName, @Password, @Gender, @Email, @Phone, @SecurityAnwser)
    END
END

 Now, create another procedure named as sp_GetEnrollmentDetails to get the details in the Admin Panel.

SET ANSI_NULLS ON;
GO

SET QUOTED_IDENTIFIER ON;
GO

CREATE PROCEDURE [dbo].[sp_GetEnrollmentDetails]
(
    @Email nvarchar(50)
)
AS
BEGIN
    SELECT * FROM Enrollment WHERE Email = @Email
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.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace PRIYANKAPROJECT.Models
{
    public class Enroll
    {
        [Display(Name = "ID")]
        public int ID { get; set; }

        [Required(ErrorMessage = "Please enter FirstName")]
        [Display(Name = "FirstName")]
        public string FirstName { get; set; }

        [Required(ErrorMessage = "Please enter LastName")]
        [Display(Name = "LastName")]
        public string LastName { get; set; }

        [Required(ErrorMessage = "Please enter password")]
        [DataType(DataType.Password)]
        [StringLength(100, ErrorMessage = "Password \"{0}\" must have {2} characters", MinimumLength = 8)]
        [RegularExpression(@"^([a-zA-Z0-9@*#]{8,15})$", ErrorMessage = "Password must contain: Minimum 8 characters, at least 1 UpperCase Alphabet, 1 LowerCase Alphabet, 1 Number, and 1 Special Character")]
        public string Password { get; set; }

        [Display(Name = "Confirm password")]
        [Required(ErrorMessage = "Please enter confirm password")]
        [Compare("Password", ErrorMessage = "Confirm password doesn't match, Type again!")]
        [DataType(DataType.Password)]
        public string Confirmpwd { get; set; }

        public Nullable<bool> Is_Deleted { get; set; }

        [Display(Name = "Gender")]
        [Required(ErrorMessage = "Please Select the gender")]
        public string Gender { get; set; }

        [Required]
        [RegularExpression("^[a-zA-Z0-9_\\.-]+@([a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,6}$", ErrorMessage = "E-mail id is not valid")]
        public string Email { get; set; }

        [DataType(DataType.PhoneNumber)]
        [Display(Name = "Phone Number")]
        [Required(ErrorMessage = "Phone Number Required!")]
        [RegularExpression(@"^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})", ErrorMessage = "Entered phone format is not valid.")]
        public string PhoneNumber { get; set; }

        [Required(ErrorMessage = "Please enter Security Answer")]
        [Display(Name = "Security Answer")]
        public string SecurityAnwser { get; set; }

        public List<Enroll> Enrollsinfo { get; set; }
    }
}

Step 2. Right-click on Controller Class. Add a Controller named EnrollmentController.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PRIYANKAPROJECT.Models;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

namespace PRIYANKAPROJECT.Controllers
{
    public class EnrollmentController : Controller
    {
        public string value = "";

        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(Enroll e)
        {
            if (Request.HttpMethod == "POST")
            {
                Enroll er = new Enroll();
                using (SqlConnection con = new SqlConnection("Data Source=PRIYANKA\\SQLEXPRESS;Integrated Security=true;Initial Catalog=Sample"))
                {
                    using (SqlCommand cmd = new SqlCommand("SP_EnrollDetail", con))
                    {
                        cmd.CommandType = CommandType.StoredProcedure;
                        cmd.Parameters.AddWithValue("@FirstName", e.FirstName);
                        cmd.Parameters.AddWithValue("@LastName", e.LastName);
                        cmd.Parameters.AddWithValue("@Password", e.Password);
                        cmd.Parameters.AddWithValue("@Gender", e.Gender);
                        cmd.Parameters.AddWithValue("@Email", e.Email);
                        cmd.Parameters.AddWithValue("@Phone", e.PhoneNumber);
                        cmd.Parameters.AddWithValue("@SecurityAnwser", e.SecurityAnwser);
                        cmd.Parameters.AddWithValue("@status", "INSERT");
                        con.Open();
                        ViewData["result"] = cmd.ExecuteNonQuery();
                        con.Close();
                    }
                }
            }
            return View();
        }
    }
}

 Step 3. Right-click on Index() Action Method and add a view.

@model PRIYANKAPROJECT.Models.Enroll

@{
    ViewBag.Title = "Index";
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ENROLLMENT</title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" />
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="../../Content/StyleSheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script type="text/javascript" src="~/Scripts/passwordscheck.js"></script>
    <link href="~/Scripts/passwordscheck.css" rel="stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<!------ Include the above in your HEAD tag ---------->

@using (Html.BeginForm("Index", "Enrollment", FormMethod.Post))
{
    <p class="container register">
        <p class="row">
            <p class="col-md-3 register-left">
                <img src="https://image.ibb.co/n7oTvU/logo_white.png" alt="" />
                <h3>Welcome</h3>
                <p>
                    This Example is for learning Basic Login and Registration Using ADO.NET in MVC.
                    <br />Hope this will boost your Knowledge.
                </p>
            </p>
            <p class="col-md-9 register-right">
                <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="../Enrollment/Index" role="tab" aria-controls="home" aria-selected="true">Register</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="../UserLogin/Index" role="tab" aria-controls="profile" aria-selected="false">Login</a>
                    </li>
                </ul>
                <p class="tab-content" id="myTabContent">
                    <p class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <h3 class="register-heading">Apply as a Employee</h3>
                        <p class="row register-form">
                            <p class="col-md-6">
                                <p class="form-group">
                                    @Html.TextBoxFor(e => e.FirstName, new { @class = "form-control", placeholder = "First Name *" })
                                    @Html.ValidationMessageFor(e => e.FirstName)
                                </p>
                                <p class="form-group">
                                    @Html.TextBoxFor(e => e.LastName, new { @class = "form-control", placeholder = "Last Name *" })
                                    @Html.ValidationMessageFor(e => e.LastName)
                                </p>
                                <p class="form-group">
                                    @Html.PasswordFor(e => e.Password, new { id = "password", @class = "form-control", placeholder = "Password *" })
                                    <span id="result"></span>
                                    @Html.ValidationMessageFor(e => e.Password)
                                </p>
                                <p class="form-group">
                                    @Html.PasswordFor(e => e.Confirmpwd, new { @class = "form-control", placeholder = "Confirm Password *" })
                                    @Html.ValidationMessageFor(e => e.Confirmpwd)
                                </p>
                                <p class="form-group">
                                    <p class="maxl">
                                        @Html.RadioButtonFor(e => e.Gender, "Male", new { @class = "radio inline" })<span> Male </span>
                                        @Html.RadioButtonFor(e => e.Gender, "Female", new { @class = "radio inline" })<span>Female</span>
                                    </p>
                                </p>
                            </p>
                            <p class="col-md-6">
                                <p class="form-group">
                                    @Html.TextBoxFor(e => e.Email, new { @class = "form-control", placeholder = "Your Email *" })
                                    @Html.ValidationMessageFor(e => e.Email)
                                </p>
                                <p class="form-group">
                                    @Html.TextBoxFor(e => e.PhoneNumber, new { @class = "form-control", placeholder = "Your Phone *" })
                                    @Html.ValidationMessageFor(e => e.PhoneNumber)
                                </p>
                                <p class="form-group">
                                    <select class="form-control">
                                        <option class="hidden" selected disabled>Please select your Sequrity Question</option>
                                        <option>What is your Birthdate?</option>
                                        <option>What is Your old Phone Number</option>
                                        <option>What is your Pet Name?</option>
                                    </select>
                                </p>
                                <p class="form-group">
                                    @Html.TextBoxFor(e => e.SecurityAnwser, new { @class = "form-control", placeholder = "Answer *" })
                                    @Html.ValidationMessageFor(e => e.SecurityAnwser)
                                </p>
                                <input type="submit" class="btnRegister" value="Register" />
                            </p>
                        </p>
                    </p>
                </p>
            </p>
        </p>
    </p>
    <script type="text/javascript">
        $(function () {
            var msg = '@ViewData["result"]';
            if (msg == '1') {
                alert("User Details Inserted Successfully");
                window.location.href = '@Url.Action("Index", "Enrollment")';
            }
        });
    </script>
}
</body>
</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.

IndexPage

Now, add the record to the form. Data is saved in a database in the table below.

TableData

Step 4. Now create a controller named UserLogin. You can write the Controller Action() Method in the same EmployeeController, or you can write it separately. I have written it separately.

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
using MvcApplication.Models;  
using System.Data.SqlClient;  
using System.Configuration;  
using System.Data;  
using System.Web.Security;  
  
namespace MvcApplication.Controllers  
{  
    public class UserLoginController : Controller  
    {   
        // GET: /UserLogin/  
        public string status;  
          
        public ActionResult Index()  
        {  
            return View();  
        }  
        [HttpPost]  
        public ActionResult Index(Enroll e)  
        {  
            String SqlCon = ConfigurationManager.ConnectionStrings["ConnDB"].ConnectionString;  
            SqlConnection con = new SqlConnection(SqlCon);  
            string SqlQuery = "select Email,Password from Enrollment where Email=@Email and Password=@Password";  
              con.Open();  
            SqlCommand cmd = new SqlCommand(SqlQuery, con); ;  
            cmd.Parameters.AddWithValue("@Email", e.Email);  
            cmd.Parameters.AddWithValue("@Password", e.Password);  
            SqlDataReader sdr = cmd.ExecuteReader();  
            if (sdr.Read())  
            {  
                Session["Email"] = e.Email.ToString();  
                return RedirectToAction("Welcome");  
            }  
            else  
            {  
                ViewData["Message"] = "User Login Details Failed!!";  
            }  
            if (e.Email.ToString() != null)  
            {  
                Session["Email"] = e.Email.ToString();  
                status = "1";  
            }  
            else  
            {  
                status = "3";  
            }  
  
            con.Close();  
            return View();  
            //return new JsonResult { Data = new { status = status } };  
        }  
  
        [HttpGet]  
        public ActionResult Welcome(Enroll e)  
        {  
            Enroll user = new Enroll();  
            DataSet ds = new DataSet();  
  
            using (SqlConnection con = new SqlConnection("Data Source=PRIYANKA\\SQLEXPRESS;Integrated Security=true;Initial Catalog=Sample"))  
            {  
                using (SqlCommand cmd = new SqlCommand("sp_GetEnrollmentDetails", con))  
                {   
                     cmd.CommandType = CommandType.StoredProcedure;  
                     cmd.Parameters.Add("@Email", SqlDbType.VarChar, 30).Value =Session["Email"].ToString();  
                     con.Open();  
                     SqlDataAdapter sda = new SqlDataAdapter(cmd);  
                     sda.Fill(ds);  
                     List<Enroll> userlist = new List<Enroll>();  
                     for (int i = 0; i < ds.Tables[0].Rows.Count; i++)  
                     {  
                        Enroll uobj = new Enroll();  
                        uobj.ID = Convert.ToInt32(ds.Tables[0].Rows[i]["ID"].ToString());  
                        uobj.FirstName = ds.Tables[0].Rows[i]["FirstName"].ToString();  
                        uobj.LastName = ds.Tables[0].Rows[i]["LastName"].ToString();  
                        uobj.Password = ds.Tables[0].Rows[i]["Password"].ToString();  
                        uobj.Email = ds.Tables[0].Rows[i]["Email"].ToString();  
                        uobj.PhoneNumber = ds.Tables[0].Rows[i]["Phone"].ToString();  
                        uobj.SecurityAnwser = ds.Tables[0].Rows[i]["SecurityAnwser"].ToString();  
                        uobj.Gender = ds.Tables[0].Rows[i]["Gender"].ToString();  
  
                        userlist.Add(uobj);  
  
                    }  
                    user.Enrollsinfo = userlist;  
                }  
                con.Close();  
  
            }  
            return View(user);  
        }  
        public ActionResult Logout()  
        {  
            FormsAuthentication.SignOut();  
            Session.Abandon();  
            return RedirectToAction("Index", "UserLogin");  
        }  
  
    }  
} 

Now add a view on the Index Action method of UserLogin Controller as.

@model PRIYANKAPROJECT.Models.Enroll    
    
@{    
    ViewBag.Title = "Index";    
}    
<!DOCTYPE html>    
<html>    
<head>    
<meta name="viewport" content="width=device-width" />    
<title>ENROLLMENT</title>    
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"/>    
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>    
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
<link href="../../Content/StyleSheet.css" rel="stylesheet" type="text/css" />    
<script type="text/javascript">    
    
    $(document).ready(function () {    
        $.ajax({    
    
            type: 'POST',    
            URL: '/UserLogin/UserLogin',    
            data: data,    
            dataType: 'JSON',    
            success: function (data) {    
                datadata = data.status    
                if (status == "1") {    
                    window.location.href = '@Url.Action("Index","UserLogin")';    
                }    
            }    
        });    
    });    
</script>    
</head>    
    
<body>    
<!------ Include the above in your HEAD tag ---------->    
@using (Html.BeginForm("Index", "UserLogin", FormMethod.Post))    
{    
@Html.AntiForgeryToken()      
<p class="container register">    
                <p class="row">    
                    <p class="col-md-3 register-left">    
                        <img src="https://image.ibb.co/n7oTvU/logo_white.png" alt=""/>    
                        <h3>Welcome</h3>    
                        <p>This Example is for learning MVC Basic Login and Registration Using ADO.NET.</p>    
                    </p>    
                    <p class="col-md-9 register-right">    
                        <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">    
                            <li class="nav-item">    
                                <a class="nav-link active" id="home-tab" data-toggle="tab" href="../Enrollment/Index" role="tab" aria-controls="home" aria-selected="true">Register</a>    
                            </li>    
                            <li class="nav-item">    
                                <a class="nav-link" id="profile-tab" data-toggle="tab" href="../UserLogin/Index" role="tab" aria-controls="profile" aria-selected="false">Login</a>    
                            </li>    
                        </ul>    
                        <p class="tab-content" id="myTabContent">    
                            <p class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">    
                                <h3 class="register-heading">Login as a Employee</h3>    
                                <p class="row register-form">    
                                    <p class="col-md-6">    
                                       <p class="form-group">    
                                            @Html.TextBoxFor(e => e.Email, new { @class = "form-control", placeholder = "Your Email *" })    
                                            @Html.ValidationMessageFor(e => e.Email)    
                                        </p>    
                                        <p class="form-group">    
                                           @Html.PasswordFor(e => e.Password, new { id = "password", @class = "form-control", placeholder = "Password *" })    
                                             <span id="result"></span>    
                                             @Html.ValidationMessageFor(e => e.Password)    
                                        </p>    
                                    <p class="col-md-6">    
                                         <input type="submit" class="btnLogin"  value="Login"/>    
                                    </p>    
                                            
                                    </p>    
                                        
                                </p>    
                            </p>    
                         </p>    
                    </p>    
                </p>    
                   
               <script type="text/javascript">    
               $(function () {    
                     var msg = '@ViewData["result"]';    
                     if (msg == '1')    
                     {    
                         alert("User Details Inserted Successfully");    
                         window.location.href = "@Url.Action("Index", "UserLogin")";    
                      }    
                  });    
               </script>    
               }    
            </p>    
         }    
   </body>    
</html>    

Now, Open this URL http://localhost:49629/UserLogin/Index for the login page or use the Login tab in the form.

LoginForm

After a successful login, the dashboard is generated.  I have already added the Welcome() Action Method in the UserLogin Controller.

@model PRIYANKAPROJECT.Models.Enroll    
    
@{    
    ViewBag.Title = "Welcome";    
}    
    
<!DOCTYPE html>    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
    <meta charset="utf-8" />    
    <meta name="viewport" content="width=device-width, initial-scale=1" />    
    <meta name="description" content="" />    
    <meta name="author" content="" />    
    <!--[if IE]>    
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    
        <![endif]-->    
    <title>FREE RESPONSIVE HORIZONTAL ADMIN</title>    
    <!-- BOOTSTRAP CORE STYLE  -->    
    <link href="../../Content/assets/css/bootstrap.css" rel="stylesheet" />    
    <!-- FONT AWESOME STYLE  -->    
    <link href="../../Content/assets/css/font-awesome.css" rel="stylesheet" />    
    <!-- CUSTOM STYLE  -->    
    <link href="../../Content/assets/css/style.css" rel="stylesheet" />    
    <!-- GOOGLE FONT -->    
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />    
    
</head>    
<body>    
    <p class="navbar navbar-inverse set-radius-zero" >    
        <p class="container">    
            <p class="navbar-header">    
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">    
                    <span class="icon-bar"></span>    
                    <span class="icon-bar"></span>    
                    <span class="icon-bar"></span>    
                </button>    
                <a class="navbar-brand" href="Welcome">    
                    <img src="../../Content/assets/img/logo.png" />    
                </a>    
            </p>    
            <p class="right-p">    
                @Html.ActionLink("LOG ME OUT","Logout","UserLogin",new { @class = "btn btn-danger pull-right" })    
            </p>    
        </p>    
    </p>    
    <!-- LOGO HEADER END-->    
    <section class="menu-section">    
        <p class="container">    
            <p class="row ">    
                <p class="col-md-12">    
                    <p class="navbar-collapse collapse ">    
                        <ul id="menu-top" class="nav navbar-nav navbar-right">    
                            <li><a href="welcome" class="menu-top-active">DASHBOARD</a></li>    
    
                            @if(Session["Email"]!=null)    
                            {    
                                <li><a href="welcome" class="menu-top-active">Welcome @Session["Email"].ToString()</a></li>    
                            }    
    
                         </ul>    
                    </p>    
                </p>    
    
            </p>    
        </p>    
    </section>    
     <!-- MENU SECTION END-->    
    <p class="content-wrapper">    
         <p class="container">    
        <p class="row pad-botm">    
            <p class="col-md-12">    
                <h4 class="header-line">ADMIN DASHBOARD</h4>    
                    
                            </p>    
    
        </p>    
                 
                               
             <p class="row">    
                 <p class="col-md-12 col-sm-12 col-xs-12">    
                    <p id="carousel-example" class="carousel slide slide-bdr" data-ride="carousel" >    
                       
                    <p class="carousel-inner">    
                        <p class="item active">    
    
                            <img src="../../Content/assets/img/1.jpg" alt="" />    
                               
                        </p>    
                        <p class="item">    
                            <img src="../../Content/assets/img/2.jpg" alt="" />    
                              
                        </p>    
                        <p class="item">    
                            <img src="../../Content/assets/img/3.jpg" alt="" />    
                               
                        </p>    
                    </p>    
                    <!--INDICATORS-->    
                     <ol class="carousel-indicators">    
                        <li data-target="#carousel-example" data-slide-to="0" class="active"></li>    
                        <li data-target="#carousel-example" data-slide-to="1"></li>    
                        <li data-target="#carousel-example" data-slide-to="2"></li>    
                    </ol>    
                    <!--PREVIUS-NEXT BUTTONS-->    
                     <a class="left carousel-control" href="#carousel-example" data-slide="prev">    
    <span class="glyphicon glyphicon-chevron-left"></span>    
  </a>    
  <a class="right carousel-control" href="#carousel-example" data-slide="next">    
    <span class="glyphicon glyphicon-chevron-right"></span>    
  </a>    
                </p>    
              </p>    
              </p>    
                
    
             <p class="row">    
                     
                  <p class="col-md-12 col-sm-12 col-xs-12">    
                      <p class="panel panel-success">    
                        <p class="panel-heading">    
                           Responsive Table Example    
                        </p>    
                        <p class="panel-body">    
                            <p class="table-responsive">    
                                    
                                       
@if (Model != null)    
{    
    if (Model.Enrollsinfo.Count > 0)    
    {    
   <table class="table table-striped table-bordered table-hover">    
   <thead>         
            <tr>    
            <th>#</th>    
            <th>ID</th>    
            <th>FirstName</th>    
            <th>LastName</th>    
            <th>Password</th>    
            <th>Email</th>    
            <th>Phone</th>    
            <th>SecurityAnwser</th>    
            <th>Gender</th>    
            </tr>    
            @foreach (var item in Model.Enrollsinfo)    
            {    
                    <tr>    
                        <td></td>    
                        <td>@Html.DisplayFor(modelitem => item.ID) </td>    
                        <td>@Html.DisplayFor(modelitem => item.FirstName)</td>    
                        <td>@Html.DisplayFor(modelitem => item.LastName)</td>    
                        <td>@Html.DisplayFor(modelitem => item.Password)</td>    
                        <td>@Html.DisplayFor(modelitem => item.Email) </td>    
                        <td>@Html.DisplayFor(modelitem => item.PhoneNumber)</td>    
                        <td>@Html.DisplayFor(modelitem => item.SecurityAnwser)</td>    
                        <td>@Html.DisplayFor(modelitem => item.Gender)</td>    
                   </tr>    
            }    
         
 </thead>    
</table>    
    }    
    else    
    {    
        <b>No Details Found.</b>    
    }    
}  </p>    
                        </p>    
                    </p>    
             </p>    
                 
             </p>   </p>    
    </p>    
     <!-- CONTENT-WRAPPER SECTION END-->    
    <section class="footer-section">    
        <p class="container">    
            <p class="row">    
                <p class="col-md-12">    
                   © 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>     
                </p>    
    
            </p>    
        </p>    
    </section>    
      <!-- FOOTER SECTION END-->    
    <!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME  -->    
    <!-- CORE JQUERY  -->    
    <script src="../../Content/assets/js/jquery-1.10.2.js"></script>    
    <!-- BOOTSTRAP SCRIPTS  -->    
    <script src="../../Content/assets/js/bootstrap.js"></script>    
      <!-- CUSTOM SCRIPTS  -->    
    <script src="../../Content/assets/js/custom.js"></script>    
</body>    
</html> 

Now, you can see the dashboard or Admin Panel as below with Logout functionality.

Output

I hope you definitely learned from this project. If you have any queries regarding this project, feel free to ask I have already attached the Source Code of the Project file. I will definitely share if I add some more functionality to it in further blogs.

Take care of yourself, and keep learning.

Thank you.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found