SMS-26: Student Marks list show by search student name and trimester Jquery & Angular js in 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

12/6/2021 11:30:56 AM

In this post, I would like to Part  26 Student Marks list show by search student name and trimester Jquery & Angular js in ASP.NET MVC.

Step-1: In StudentMarksList Page with writing the below  code.

Go to Solution Explorer > Views Folder > StudentMark Folder > open StudentMarksList Page.

                <div class="row">

                    <div class="col-md-4">

                        <div class="form-group">

                            <label>Student ID & Name</label>

                            <select class="form-control" ng-model="StudentCourseOfferDAO.StudentId" id="StudentId">

                                <option ng-repeat="e in StudentIDNO" value="{{e.StudentId}}">{{e.StudentIdNO}}</option>




                    <div class="col-md-4">

                        <div class="form-group">

                            <label>Trimester Name</label>

                            <select class="form-control" ng-model="StudentCourseOfferDAO.TrimesterInfoId" id="TrimesterInfoId">

                                <option ng-repeat="e in Trimester" value="{{e.TrimesterInfoId}}">{{e.TrimesterInfoName}}</option>




                    <div class="col-md-4">

                        <div class="form-group">

                            <br />

                            <button type="button" class="btn btn-success" onclick="GetList()">Search</button>




Step-2: Search Button click to load Student Marks List in table like as below.

<div class="row">
                    <div class="col-md-12">

                        <table class="table table-responsive" id="dtTable">




                                    <td>Course Name</td>


                                    <td>Out of Marks</td>



                            <tbody id="dtTableBody">





Step-3: Search Button click to load Student Marks List for below scripts GetList() function.

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

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


  function GetList() {

        var prm = "";

        if ($('#StudentId').val() != "") {

            prm = prm + " and StudentId ='" + $('#StudentId').val() + "'";


        if ($('#TrimesterInfoId').val() != "") {

            prm = prm + " and TrimesterInfoId ='" + $('#TrimesterInfoId').val() + "'";


          var urlPath = '@Url.Action("GetStudentMarksList", "StudentMark")';


            url: urlPath,

            dataType: 'json',

            data: { prm: prm},

            type: "Get",

            async: true,

            success: function (data) {

                var result = JSON.parse(data);

                var row = "";

                var tMark = 0;

                var tMarksOutOf = 0;


                for (var i = 0; i < result.length;i++) {

                    row +="<tr>";

                    row += "<td>" + (i + 1) + "</td>";

                    row += '<td> ' + result[i].CourseName+ '</td>';

                    row += "<td> " + result[i].Marks + "</td>";

                    row += "<td>" + result[i].MarksOutOf + "</td>";

                    tMark = parseFloat(tMark) + parseFloat(result[i].Marks);

                    tMarksOutOf = parseFloat(tMarksOutOf) + parseFloat(result[i].MarksOutOf);

                    row += "</tr>";


                row += "<tr>";

                row += '<td> ' + '</td>';

                row += '<td> Total:' +  '</td>';

                row += "<td  > " + tMark + "</td>";

                row += "<td > " + tMarksOutOf + "</td>";

                row += "</tr>";



            error: function (data) {

                alert("Operation Faild!!");


Step-4: StudentMarkController  Add GetStudentMarksList() ActionResult for Load Data. Go to Solution Explorer > Controllers Folder >  StudentMarkController.css  controller with writing the below code.

        public ActionResult GetStudentMarksList(string prm)

            DataTable dr = aDal.GetStudentMarksListDAL(prm);

            string jJSONresult;

            jJSONresult = JsonConvert.SerializeObject(dr);

            return Json(jJSONresult, JsonRequestBehavior.AllowGet);

Step-5: in  StudentMarksEntryDAL   add GetStudentMarksListDAL() for Load Data. Go to Solution Explorer > DAL Folder > create   StudentMarksEntryDAL.css  with writing the below code.

        public DataTable GetStudentMarksListDAL(string prm)

            SqlCommand com = new SqlCommand("sp_StudentMarksListLoadByParm", conn);

            com.CommandType = CommandType.StoredProcedure;

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

            SqlDataAdapter da = new SqlDataAdapter(com);

            DataTable dss = new DataTable();


            return dss;


Step-6: Create store Procedure for Load Student Marks List.
Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_StudentCourseOfferListLoadByParm

 with writing the below code.

create proc [dbo].[sp_StudentMarksListLoadByParm]

@prm nvarchar(max)



Declare @Query nvarchar(max)

 set @Query ='select co.CourseName, * from  tblStudentMarksEntry

left join tblCourse co on tblStudentMarksEntry.CourseId=co.CourseId

   where StudentMarksEntryId is not null  '+@prm



Step-7: Run Application.

About Teacher

Reza Karim

Software Engineer

More about him