Download Project

Steps:

Step-1: Add some codes ListView.cshtml.

Go to Solution Explorer > Views Folder> Batch Folder > ListView.cshtml > in this page with writing the below highlight code.

       

<div ng-app="ABCApp" ng-controller="BatchController">
    <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">Batch</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../Batch/AddNewInfo">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>Batch Name</td>
                                <td>Edit</td>
                                <td>Delete</td>
                            </tr>
                            <tr ng-repeat="e in Batch" ng-class-even="'even'" ng-class-odd="'odd'">
                                <td>{{e.SL}}</td>
                                <td>{{e.BatchName}}</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>

Step-2: Add UpdateInfoDAL() Method in BatchDAL.cs Class.

Go to Solution Explorer > DAL Folder > BatchDAL.cs >in this Class with writing the below code.

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

Step-2: Create store Procedure for Load Batch.

Go to SQL Server 2014 > dbStudentMangeSystem database> New Query>Create sp_LoadAllData_Batch stored procedure with writing the below code.

create proc [dbo].[sp_LoadAllData_Batch]
as 
begin
select ROW_NUMBER() over (order by BatchId) as SL, * from tblBatch
end

Step-3: Add LoadData()JsonResult in BatchController.cs.

BatchController.cs class with writing the below code.

  public JsonResult LoadData()
        {

            DataSet ds = aDal.LoadAllDataDAL();
            List<BatchDAO> lists = new List<BatchDAO>();
            foreach ( DataRow dr in ds.Tables[0].Rows)
            {
                lists.Add(new BatchDAO
                {
                    BatchId = Convert.ToInt32(dr["BatchId"]),
                    SL = (dr["SL"].ToString()),
                    BatchName = (dr["BatchName"].ToString())
                    

                });
                
            }

            return Json(lists, JsonRequestBehavior.AllowGet);
        }

Step-4: Add a function in BatchControllerJS.js for Load Data .

Go to Solution Explorer > DAL Folder> Scripts Folder > AngularController Folder> BatchControllerJS.js with writing the below code.

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

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

Step-5: Add some codes ListView.cshtml.

Go to Solution Explorer > Views Folder> Batch Folder > ListView.cshtml > in this page with writing the below highlight code.

<div ng-app="ABCApp" ng-controller="BatchController">
    <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">Batch</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../Batch/AddNewInfo">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>Batch Name</td>
                                <td>Edit</td>
                                <td>Delete</td>
                            </tr>
                            <tr ng-repeat="e in Batch" ng-class-even="'even'" ng-class-odd="'odd'">
                                <td>{{e.SL}}</td>
                                <td>{{e.BatchName}}</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/BatchControllerJS.js"></script>

Step-6: Run Application.