SMS-22: Student Course Offer Entry happens Using Jquery Multiple Data Save List view dropdownlist Load using 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/5/2021 10:41:21 AM


In this post, I will show How Student Course Offer Entry happens Using Jquery Multiple Data Save List view dropdownlist Load using Angular js in ASP.NET MVC.


Step-1: In StudentCourseOfferDAL.cs Class Add AddNewInfoDAL().

Go to Solution Explorer > DAL Folder >  StudentCourseOfferDAL.css  with writing the below code.

  public void AddNewInfoDAL(StudentCourseOfferDAO aDao)




            int[] ids = aDao.CourseId.Split(',').Select(int.Parse).ToArray();




            for(int i =0; i< ids.Length; i++)



                int aId = ids[i];


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

                com.CommandType = CommandType.StoredProcedure;

                com.Parameters.AddWithValue("@StudentId", aDao.StudentId);

                com.Parameters.AddWithValue("@TrimesterInfoId", aDao.TrimesterInfoId);

                com.Parameters.AddWithValue("@CourseOfferDate", aDao.CourseOfferDate);

                com.Parameters.AddWithValue("@CourseId",  aId);










Step-2: Create store Procedure for Save Student Course Offer.
Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_Insert_StudentCourseOffer_Info

 with writing the below code.

create PROCEDURE [dbo].[sp_Insert_StudentCourseOffer_Info]

       -- Add the parameters for the stored procedure here

        @CourseId int=null ,

        @TrimesterInfoId int=null ,

        @StudentId int=null ,

        @CourseOfferDate datetime=null




        INSERT INTO [dbo].[tblStudentCourseOffer]
















Step-3: StudentCourseOfferList page with writing the below code.




<div ng-app="ABCApp" ng-controller="StudentCourseOfferController">

    <div class="content-wrapper">

        <!-- Content Header (Page header) -->

        <div class="content-header">

            <div class="container-fluid">

                <div class="row mb-2">

                    <div class="col-sm-6">

                        <h1 class="m-0 text-dark">Student Course Offer List</h1>

                    </div><!-- /.col -->

                    <div class="col-sm-6">

                        <ol class="breadcrumb float-sm-right">

                            <li class="breadcrumb-item"><a href="../StudentCourseOffer/StudentCourseOfferEntry">Add New Info</a></li>



                    </div><!-- /.col -->

                </div><!-- /.row -->

            </div><!-- /.container-fluid -->


        <!-- /.content-header -->

        <!-- Main content -->

        <section class="content">

            <div class="container-fluid">


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





                <div class="row">


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


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





                                    <td>Course Name</td>





                            <tbody id="dtTableBody">

















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

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

Step-4: search button click to  get Student Course Offer List by select Student ID and Trimester Name  StudentCourseOfferList page with writing the below code.



    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("GetStudentCourseOfferList", "StudentCourseOffer")';


            url: urlPath,

            dataType: 'json',

            data: { prm: prm},

            type: "Get",

            async: true,

            success: function (data) {


                var result = JSON.parse(data);


                var row = "";


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


                    row +="<tr>";


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

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


                    row += "</tr>";






            error: function (data) {


                alert("Operation Faild!!");






Step-5: Run Application.

About Teacher

Reza Karim

Software Engineer

More about him