SMS-27: Student profile create and browse profile using Store procedure AngularJS Jquery ASP.NET

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

12/10/2021 12:40:25 AM

In this post, will show you Student Profile Create and Browse profile after login using store procedure, Jquery & AngularJS in ASP.NET MVC.

Step-1:  Create StudentProfileController Controller.

Go to Solution Explorer > Controllers Folder > StudentProfileController > Create Marks() ActionResult with writing the below code.

        public ActionResult Marks()
            return View();

Select Marks and create the Page.

Step-2: In this page add these below Links.

<!-- Font Awesome -->
    <link rel="stylesheet" href="~/Content/plugins/fontawesome-free/css/all.min.css">

    <!-- Ionicons -->

    <link rel="stylesheet" href="">

    <!-- Tempusdominus Bbootstrap 4 -->

    <link rel="stylesheet" href="~/Content/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">

    <!-- iCheck -->

    <link rel="stylesheet" href="~/Content/plugins/icheck-bootstrap/icheck-bootstrap.min.css">

    <!-- JQVMap -->

    <link rel="stylesheet" href="~/Content/plugins/jqvmap/jqvmap.min.css">

    <!-- Theme style -->

    <link rel="stylesheet" href="~/Content/dist/css/adminlte.min.css">

    <!-- overlayScrollbars -->

    <link rel="stylesheet" href="~/Content/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">

    <!-- Daterange picker -->

    <link rel="stylesheet" href="~/Content/plugins/daterangepicker/daterangepicker.css">

    <!-- summernote -->

    <link rel="stylesheet" href="~/Content/plugins/summernote/summernote-bs4.css">

    <!-- Google Font: Source Sans Pro -->

    <link href=",400,400i,700" rel="stylesheet">

    <!-- Select2 -->

    <link rel="stylesheet" href="~/Content/plugins/select2/css/select2.min.css">

    <link rel="stylesheet" href="~/Content/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">

    <script src=""></script>

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

    <!-- ChartJS -->

    <script src="../Content/plugins/chart.js/Chart.min.js"></script>

    <!-- Sparkline -->

    <script src="../Content/plugins/sparklines/sparkline.js"></script>

    <!-- JQVMap -->

    <script src="../Content/plugins/jqvmap/jquery.vmap.min.js"></script>

    <script src="../Content/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>

    <!-- jQuery Knob Chart -->

    <script src="../Content/plugins/jquery-knob/jquery.knob.min.js"></script>

    <!-- daterangepicker -->

    <script src="../Content/plugins/moment/moment.min.js"></script>

    <script src="../Content/plugins/daterangepicker/daterangepicker.js"></script>

    <!-- Tempusdominus Bootstrap 4 -->

    <script src="../Content/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>

    <!-- Summernote -->

    <script src="../Content/plugins/summernote/summernote-bs4.min.js"></script>

    <!-- overlayScrollbars -->

    <script src="../Content/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>

    <!-- AdminLTE App -->

Step-3: Now we need login page when a student click login button then direct to Student Profile Page.

Go to Solution Explorer > Controller Folder > JsonResult GetLoginInfo() modify that’s are given below  

        public JsonResult GetLoginInfo(UserDAO dao)


            DataTable dt = aDal.LoadAllDataDAL(dao);

            string mes = "";

            if (dt.Rows.Count > 0)


                if(dt.Rows[0]["usertype"].ToString()== "Admin")


                    Session["LoginName"] = dao.LoginName;

                    mes = "Admin";

                    //RedirectToAction("Index", "Home");




                    Session["StuId"] =  dt.Rows[0]["StudentId"].ToString();

                    Session["LoginName"] = dao.LoginName;

                    mes = "Student";

                    //RedirectToAction("Marks", "StudentProfile");


              //  mes = "Login Successfully";




                mes = "Login Faild";


            return Json(mes, JsonRequestBehavior.AllowGet);


Step-4: HomeControllerJS.js Modify scripts.

Go to Solution Explorer > Scripts Folder >  AngularController Folder > HomeControllerJS.js with writing the Highlight 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) {

            if (a == 'Admin') {

                window.location.href = "Index";


            if (a == 'Student') {

                window.location.href = "../StudentProfile/Marks";


          /*  window.location.href = "Index"*/

        }).error(function () {

            $scope.btnLogin = "Sign In";

            $scope.UserDAO = null;

            alert("Faild to Login");




Step-5: add  codes in Marks Page.

Go to Solution Explorer > Views Folder > StudentProfile Folder > Marks Page with writing the below code.

<div ng-app="ABCApp" ng-controller="StudentCourseOfferController">
        <section class="content">
            <!-- Default box -->

            <div class="card">

                <div class="card-body row">

                    <div class="col-5 text-center d-flex align-items-center justify-content-center">

                        <div class="">

                            <h1>Student Info</h1>

                            <hr />

                            <h2> Student ID: <label id="StudentIdNo"></label></h2>

                            <h2>Student Name:  <label id="StudentName"></label></h2>

                            <a href="../Home/LoginPage" >Log Out</a>

Step-6:  In StudentProfileController Controller add GetStudentInfo().


Go to Solution Explorer > Controllers Folder > StudentProfileController with writing the below code.

        public ActionResult GetStudentInfo()
            string prm = Session["StuId"].ToString();

            DataTable dr = aDal.GetStudentInfoDAL(prm);

            string jJSONresult;

            jJSONresult = JsonConvert.SerializeObject(dr);

            return Json(jJSONresult, JsonRequestBehavior.AllowGet);


Step-7:  Create StudentProfileDAL class.


Go to Solution Explorer > DAL Folder > Create StudentProfileDAL class> and writing the below code.

SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConStr"].ConnectionString);

        public DataTable GetStudentInfoDAL(string prm)
            SqlCommand com = new SqlCommand("sp_GET_StudentInfoByStuId", conn);

            com.CommandType = CommandType.StoredProcedure;

            com.Parameters.AddWithValue("@prm", prm);

            SqlDataAdapter da = new SqlDataAdapter(com);

            DataTable dss = new DataTable();


            return dss;


Step-8: Create store Procedure for Load Student Profile Info.


Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_GET_StudentInfoByStuId with writing the below code.

create proc [dbo].[sp_GET_StudentInfoByStuId]

@prm nvarchar(max)



Declare @Query nvarchar(max)

 set @Query ='select b.BatchName+  StudentIdNO as StudentIdNO, s.StudentName from tblStudent s

left join tblBatch b on b.BatchId=s.BatchId

where s.StudentId='+@prm



Step-9: In this Marks page add function GetList() writing the below code.

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

  function GetList() {
          var urlPath = '@Url.Action("GetStudentInfo", "StudentProfile")';

            url: urlPath,

            dataType: 'json',

            type: "Get",

            async: true,

            success: function (data) {

                var result = JSON.parse(data);



            error: function (data) {

                alert("Operation Faild!!");

Step-10: Run Application.

About Teacher

Reza Karim

Software Engineer

More about him