Part-17: User authentication using Store procedure Javascript AngularJS JQUERY ASP.NET MVC

Part-04: Bootstrap Admin Dashboard Template setup in School Management Software Part 5: How to use AngularJS in ASP.NET MVC Part-6: CRUD Operation Insert Data using AngularJS in ASP.NET MVC Part-7: CRUD Operation & Load Data using AngularJS in ASP.NET MVC Part-08: CRUD Operation Edit, Delete Data using Angularjs in ASP.NET MVC Part-3: Create Database and Table in sql server for school management system Part-09: Insert Section data using ASP.NET MVC AngularJs Part-10: Edit Update and Delete Section data using Angular js | ASP.NET MVC | Jquery Part-11: Cascading Dropdownlist Section Batch selection in MVC JQUERY AngularJS Part-12: Insert & Delete course information for school management software using ASP.NET MVC Javascript Angularjs Part-13: Create Update course info in ASP.NET MVC AngularJs JQUERY Javascript Part-14: Insert data and Page design bootstrap using ASP.NET MVC JQUERY AngularJS Part-15: Insert & Get data using store procedure in SQL Server ASP.NET MVC AngularJS JQUERY Part-16: Load student list,bootstrap and Inactive using ASP.NET MVC AngularJS Jquery Part-17: User authentication using Store procedure Javascript AngularJS JQUERY ASP.NET MVC Part-18: User authentication, authorization and login using ASP.NET MVC AngularJS Javascript JQUERY Part-19: User Registration & Insert semester Info using AngularJS in ASP.NET MVC Part-20: Load semester info & Student course offer page design using ASP.NET MVC JQUERY Angularjs Part-21: Course Offer Entry Using Jquery Multiple Data Save (Part-1) using ASP.NET MVC AngularJS SMS-22: Student Course Offer Entry happens Using Jquery Multiple Data Save List view dropdownlist Load using Angular js in ASP.NET MVC SMS-23: Student course offer list semester search using ASP.NET MVC AngularJS JQUERY SMS-24: Student Marks Entry page in table column input marks entry using Jquery & Angular js in ASP.NET MVC SMS-25: Student Course Mark multiple data save using jquery with Stored Procedure & Angular js in ASP.NET MVC SMS-26: Student Marks list show by search student name and trimester Jquery & Angular js in ASP.NET MVC SMS-27: Student profile create and browse profile using Store procedure AngularJS Jquery ASP.NET SMS-28: Student Result show by search trimester and myasp server registration and login using Jquery & Angular js in ASP.NET MVC

11/8/2021 11:27:41 AM

In this post, You will learn User authentication & authorization using  SQL SERVER Store procedure Jquery AngualrJS ASP.NET MVC. Here you will learn how to create store procedure and update store procedure then making login page to enter username and password.



  • Modify  store Procedure for Insert Student as user.
  • Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_Insert_Student with writing the below highlight code.

ALTER PROCEDURE [dbo].[sp_Insert_Student]
	-- Add the parameters for the stored procedure here
	 @StudentName nvarchar(max)=null ,
	 @BatchId int=null ,
	 @SectionId int=null ,
	 @DOB datetime=null ,
	 @Gender nvarchar(max)=null ,
	 @Religion nvarchar(max)=null ,
	 @FatherName nvarchar(max)=null ,
	 @MotherName nvarchar(max)=null ,
	 @PresentAddrees nvarchar(max)=null ,

	 @PermanentAddress nvarchar(max)=null ,
	 @AddmittedDate datetime=null ,
	 @Status bit=null ,
	 @StudentIdNO nvarchar(max)=null 

	-- SET NOCOUNT ON added to prevent extra result sets from
	INSERT INTO [dbo].[tblStudent]
           ( StudentName, [BatchId]

			declare @MaxStudentId int 

	 select	@MaxStudentId= MAX(StudentId) from tblStudent 
	 	declare @Bat int 
	 select @Bat= BatchId from tblStudent  where StudentId=@MaxStudentId

	 	declare @BatName nvarchar(max) 
	 select @BatName= BatchName from tblBatch  where BatchId=@Bat
	   declare @StuIDNO nvarchar(max)
	   select @StuIDNO=   ISNULL(MAX(ISNULL(StudentIdNO,0)),0)+1   from tblStudent 
	   where StudentId=@MaxStudentId and BatchId=@Bat

	  insert into tblUser ([UserName]
		  @BatName+ @StuIDNO,
		  @BatName+ @StuIDNO,

	   update tblStudent set StudentIdNO=@StuIDNO where  StudentId=@MaxStudentId


  • Create HomeController.cs.
  • Go to Solution Explorer > Controllers Folder> Controller> create  HomeController >  in this controller with writing the below code.
        public ActionResult LoginPage()
            return View();

In the LoginPage() Action Result Mouse right button Select Add View > Click Add Button> LoginPage.cshtml  page has been created.


  • Modify   LoginPage.cshtml  page with writing the below code.
<!DOCTYPE html>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | Log in</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="~/Content/plugins/fontawesome-free/css/all.min.css" rel="stylesheet" />
    <!-- Ionicons -->
    <link rel="stylesheet" href="">
    <!-- icheck bootstrap -->
    <link rel="stylesheet" href="~/Content/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="~/Content/dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href=",400,400i,700" rel="stylesheet">
<body class="hold-transition login-page">

    <div ng-app="ABCApp" ng-controller="HomeController">
        <div class="login-box">
            <div class="login-logo">
                <a href="../../index2.html"><b>Admin</b>LTE</a>
            <!-- /.login-logo -->
            <div class="card">
                <div class="card-body login-card-body">
                    <p class="login-box-msg">Sign in to start your session</p>

                    <form action="../../index3.html" method="post">
                        <div class="input-group mb-3">
                            <input  ng-model="UserDAO.LoginName" class="form-control" placeholder="Email">
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-envelope"></span>
                        <div class="input-group mb-3">
                            <input type="password" ng-model="UserDAO.Password" class="form-control" placeholder="Password">
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-lock"></span>
                        <div class="row">
                            <div class="col-8">
                                <div class="icheck-primary">
                                    <input type="checkbox" id="remember">
                                    <label for="remember">
                                        Remember Me
                            <!-- /.col -->
                            <div class="col-4">
                                <input type="button" ng-click="LoginData()" class="btn btn-primary" value="{{btnLogin}}" />

                            <!-- /.col -->

                    <div class="social-auth-links text-center mb-3">
                        <p>- OR -</p>
                        <a href="#" class="btn btn-block btn-primary">
                            <i class="fab fa-facebook mr-2"></i> Sign in using Facebook
                        <a href="#" class="btn btn-block btn-danger">
                            <i class="fab fa-google-plus mr-2"></i> Sign in using Google+
                    <!-- /.social-auth-links -->

                    <p class="mb-1">
                        <a href="forgot-password.html">I forgot my password</a>
                    <p class="mb-0">
                        <a href="register.html" class="text-center">Register a new membership</a>
                <!-- /.login-card-body -->
    <!-- /.login-box -->
    <!-- jQuery --> 
    <!-- Bootstrap 4 -->
    <script src="~/Content/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="~/Content/dist/js/adminlte.min.js"></script>

    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/AngularController/HomeControllerJS.js"></script>


  • Create HomeControllerJS.js file.
  • Go to Solution Explorer > Scripts Folder.> AngularController Folder> Create   ‘HomeControllerJS.js > for   Login    with writing the below code.
var MyApp = angular.module("ABCApp", []);
MyApp.controller("HomeController", function ($scope, $http) {
    $scope.btnLogin = "Sign In";

    $scope.LoginData = function () {

        $scope.btnLogin = "Signing.....";
            method: 'POST',
            url: '/Home/GetLoginInfo',
            data: $scope.UserDAO
        }).success(function (a) {
            window.location.href = "Index"
        }).error(function () {

            $scope.btnLogin = "Sign In";
            $scope.UserDAO = null;
            alert("Faild to Login");


  • In   HomeController.cs class add GetLoginInfo() JsonResult for Login.
  • Go to Solution Explorer > Controllers Folder > HomeController.cs  in this controller with writing the below code.
        public JsonResult GetLoginInfo(UserDAO dao)
            DataTable dt = aDal.LoadAllDataDAL(dao);

            string mes = "";
            if (dt.Rows.Count > 0)
                Session["LoginName"] = dao.LoginName;
                mes = "Login Successfully";
                mes = "Login Faild";
            return Json(mes, JsonRequestBehavior.AllowGet);


  • Create  UserDAL.cs  class.
  • Go to Solution Explorer > DAL Folder > UserDAL.cs  Class with writing the below code.
        public DataTable LoadAllDataDAL(UserDAO dao)
            SqlCommand com = new SqlCommand("sp_LoginInfo", conn);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@LoginName", dao.LoginName);
            com.Parameters.AddWithValue("@Password", dao.Password);
            SqlDataAdapter da = new SqlDataAdapter(com);
            DataTable dss = new DataTable();
            return dss;


  • Create  UserDAO.cs  class.
  • Go to Solution Explorer > DAO Folder > UserDAO.cs  Class with writing the below code.
    public class UserDAO
        public string LoginName { get; set; }
        public string Password { get; set; }


  • Create store Procedure for Login.
  • Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_LoginInfo with writing the below code.
create proc [dbo].[sp_LoginInfo]
@LoginName nvarchar(max),
@Password nvarchar(max)


select  * from tblUser where LoginName=@LoginName and Password=@Password

Step-11: Run Application.

About Teacher

Reza Karim

Software Engineer

More about him