In this post, Will show you Trimester List Information & Student Course Offer Entry Page Design using Angular js in ASP.NET MVC and jquery. Here you will learn about bootstrap design, Insert data using angularjs jquery, json data load in page as list and load data using storeprocedure

Steps:

Step-1:

• TrimesterList.cshtml Page for Show Trimester Information.
• Go to Solution Explorer > VIEWS Folder>   TrimesterInfo Folder>    in this page with writing the below code.

<div ng-app="ABCApp" ng-controller="TrimesterInfoController">
    <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">Trimester Info</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../TrimesterInfo/TrimesterEntry">Add New Info</a></li>

                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">


                <div class="row">

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

                        <table class="table table-responsive">
                            <tr>
                                <td>SL#</td>
                                <td>Trimester  Name</td>
                                @*<td>Edit</td>*@
                                @*<td>Delete</td>*@
                            </tr>
                            <tr ng-repeat="e in Trimester" ng-class-even="'even'" ng-class-odd="'odd'">
                                <td>{{e.SL}}</td>
                                <td>{{e.TrimesterInfoName}}</td>
                                @*<td>
                                    <a href="/Batch/AddNewInfo?MasterId={{e.BatchId}}" class="btn btn-warning">Edit</a>

                                </td>
                                <td><a ng-click="DeleteMAsterData(e.BatchId)" class="btn btn-danger">Delete</a> </td>*@
                            </tr>
                        </table>


                    </div>
                </div>





            </div>
        </section>
    </div>
</div>
<script src="~/Scripts/angular.min.js"></script> 
<script src="~/Scripts/AngularController/TrimesterInfoControllerJS.js"></script>

Step-2:

• Add LoadData() JsonResult TrimesterInfoController.cs Controller.
• Go to Solution Explorer > Controllers Folder >  TrimesterInfoController.css  with writing the below code.

        public JsonResult LoadData()
        {
            DataSet ds = aDal.LoadAllDataDAL();
            List<TrimesterDAO> lists = new List<TrimesterDAO>();
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                lists.Add(new  TrimesterDAO
                {
                    TrimesterInfoId = Convert.ToInt32(dr["TrimesterInfoId"]),
                    SL = (dr["SL"].ToString()),
                    TrimesterInfoName = (dr["TrimesterInfoName"].ToString())


                });
            }
            return Json(lists, JsonRequestBehavior.AllowGet);
        }

Step-3:

• Add LoadDataByMasterIDDAL() in TrimesterInfoDAL.css  class.
• Go to Solution Explorer > DAL Folder > TrimesterInfoDAL.css  Class with writing the below code.

        public DataSet LoadAllDataDAL()
        {
            SqlCommand com = new SqlCommand("sp_LoadAllData_Trimester", conn);
            com.CommandType = CommandType.StoredProcedure;
            SqlDataAdapter da = new SqlDataAdapter(com);
            DataSet dss= new DataSet();
            da.Fill(dss);
            return dss;
        }

Step-4:

• Create store Procedure for Course Get One Record.
• Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_LoadAllData_Trimester with writing the below code.

create proc [dbo].[sp_LoadAllData_Trimester]
as 
begin
select ROW_NUMBER() over (order by TrimesterInfoId) as SL, * from tblTrimesterInfo

end

Step-5:

• For Show data TrimesterInfoControllerJS Add Some codes.
• Go to Solution Explorer > Scripts Folder.> AngularController Folder> ‘TrimesterInfoControllerJS.js’>  in this JS file    with writing the below code.

    $http.get("/TrimesterInfo/LoadData").then(function(d) {

        $scope.Trimester = d.data;
    }, function(error) {
        alert("Faild");
    });

# Student Course Offer Information

Step-6:

• Add Controller  StudentCourseOfferController.cs.
• Go to Solution Explorer > Controllers Folder> Add > Controller> Select MVC 5 Controller-Empty> Click ‘Add’ button> Give Controller Name ’ StudentCourseOfferController’ >  in this controller with writing the below code.

       public ActionResult StudentCourseOfferList()
        {
            return View();
        }

• In the StudentCourseOfferList() Action Result Mouse right button Select Add View > Click Add Button> StudentCourseOfferList.cshtml  page has been created.
• Add Another Action result StudentCourseOfferEntry()with writing the below code.

    public ActionResult StudentCourseOfferEntry()
        {
            return View();
        }

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

Step-7:

• Design  StudentCourseOfferEntry.cshtml Page for Student Course Offer Insert.
• Go to Solution Explorer > VIEWS Folder>   StudentCourseOffer Folder>    in this page with writing the below code.

<div ng-app="ABCApp" ng-controller="StudentCourseOfferController">
    <!-- Content Header (Page header) -->
    <div class="content-wrapper">
        <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</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../Batch/ListView">List View</a></li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">

                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Student ID & Name</label>
                            <select class="form-control" ng-model="StudentCourseOfferDAO.StudentId">
                                <option ng-repeat="e in StudentIDNO" value="{{e.StudentId}}">{{e.StudentIdNO}}</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Trimester Name</label>
                            <select class="form-control" ng-model="StudentCourseOfferDAO.TrimesterInfoId">
                                <option ng-repeat="e in Trimester" value="{{e.TrimesterInfoId}}">{{e.TrimesterInfoName}}</option>
                            </select>
                        </div>
                    </div>
                </div>


                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Course Name</label>
                            <div ng-repeat="e in CourseInfo">
                                <input type="checkbox" ng-model="StudentCourseOfferDAO.CourseId" ng-click="select()" value="{{e.CourseId}}" />{{e.CourseName}}

                            </div>
                            

                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Course Offer Date</label>
                            <input type="date" ng-model="StudentCourseOfferDAO.CourseOfferDate" class="form-control" />
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-3">
                        <input type="button" ng-click="SaveData()" class="btn btn-primary" value="{{btnSaveTextBatch}}" />
                    </div>
                </div>



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

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

Step-8:

• Add ddlLoadStudentIdName() JsonResult for Load Student ID & Name in TrimesterInfoController.cs Controller.

        public JsonResult ddlLoadStudentIdName()
        {
            DataSet ds = aDal.BatchDDLLoadDAL();
            List<StudentDAO> lists = new List<StudentDAO>();
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                lists.Add(new StudentDAO
                {
                    StudentId = Convert.ToInt32(dr["StudentId"]),
                    StudentIdNO = (dr["StudentIdNO"].ToString())
                });
            }
            return Json(lists, JsonRequestBehavior.AllowGet);
        }

Step-9:

• Add BatchDDLLoadDAL() in StudentCourseOfferDAL.css  class.
• Go to Solution Explorer > DAL Folder > StudentCourseOfferDAL.css  Class with writing the below code.

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


        public DataSet BatchDDLLoadDAL()
        {
            SqlCommand com = new SqlCommand("sp_StudentIdWithNameDDLLoad", conn);
            com.CommandType = CommandType.StoredProcedure;
            SqlDataAdapter da = new SqlDataAdapter(com);
            DataSet dss = new DataSet();
            da.Fill(dss);
            return dss;
        }

Step-10:

• Create store Procedure for Course Get One Record.
• Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_StudentIdWithNameDDLLoad with writing the below code.

create proc [dbo].[sp_StudentIdWithNameDDLLoad]
as
begin

select StudentId,b.BatchName+  StudentIdNO +' : '+ s.StudentName as StudentIdNO from  tblStudent   s 
left join tblBatch b on b.BatchId=s.BatchId
end

Step-11:

• Add Load Student ID & Name Function in  StudentCourseOfferJS.js.
• Go to Solution Explorer > Scripts Folder.> AngularController Folder> Create ‘StudentCourseOfferJS.js’>  for Load Student ID & Name  with writing the below code.

var MyApp = angular.module("ABCApp", []);

MyApp.controller("StudentCourseOfferController", function ($scope, $http) {

$http.get("/StudentCourseOffer/ddlLoadStudentIdName").then(function (d) {

        $scope.StudentIDNO = d.data;
    }, function (error) {
        alert("Faild");
    });
});

Step-12: Run Application.