Insert and Delete is very important part of any CRUD operation. This will cover Insert and Delete using ASP.NET MVC Angularjs Javascript Jquery. In this part I will insert and delete the course information for school management software.

Steps:

Step-1:

• Add Save_Info() JsonResult type in CourseController.cs Controller.
• Go to Solution Explorer > Controllers Folder> CourseController.cs> in this controller with writing the below code.

        public JsonResult Save_Info(CourseDAO aDao)
        {
            string Mes = "";
            try
            {
                aDal.AddNewInfoDAL(aDao);
                Mes = "Operation Successful!!";
            }
            catch (Exception e)
            {
                Mes = "Operation Faild!!";
            }
            return Json(Mes, JsonRequestBehavior.AllowGet);
        }

Step-2:

• Add AddNewInfoDAL() in    CourseDAL.cs class.
• Go to Solution Explorer > DAL Folder> CourseDAL.cs> in this controller with writing the below code.

     public void AddNewInfoDAL(CourseDAO aDao)
        {
            SqlCommand com = new SqlCommand("sp_Insert_Course", conn);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@CourseName", aDao.CourseName);
            com.Parameters.AddWithValue("@BatchId", aDao.BatchId);
            com.Parameters.AddWithValue("@SectionId", aDao.SectionId);
            conn.Open();
            com.ExecuteNonQuery();
            conn.Close();
        }

Step-3:

• Create store Procedure for  Insert Course Information.
• Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_Insert_Course with writing the below code.

create PROCEDURE [dbo].[sp_Insert_Course]
	-- Add the parameters for the stored procedure here
	 @CourseName nvarchar(500)=null ,
	 @BatchId int=null ,
	 @SectionId int=null 
AS
BEGIN
	-- SET NOCOUNT ON added to prevent extra result sets from
	INSERT INTO [dbo].[tblCourse]
           (CourseName,BatchId,SectionId)
     VALUES
            (@CourseName,@BatchId,@SectionId)
END

Step-4:

• Create SectionControllerJS.js file.
• Go to Solution Explorer > Scripts Folder.> AngularController Folder> Create   ‘CourseControllerJS.js’> for insert Course with writing the below Highlight code.

$scope.SaveData = function () {
        if ($scope.btnSaveTextCo == "Save") {
            $scope.btnSaveTextCo = "Saving.....";
            $http({
                method: 'POST',
                url: '/Course/Save_Info',
                data: $scope.CourseDAO
            }).success(function (a) {
                $scope.btnSaveTextCo = "Save";
                $scope.CourseDAO = null;
                alert(a);
            }).error(function () {
                alert("Faild");
            });
        } else {
            $scope.btnSaveTextCo = "Updating.....";
            $http({
                method: 'POST',
                url: '/Course/Update_Info',
                data: $scope.CourseDAO
            }).success(function (a) {
                $scope.btnSaveTextCo = "Save";
                $scope.CourseDAO = null;
                alert(a);
            }).error(function () {
                alert("Faild");
            });
        }
    };

• Load Course List Information

Step-5:

• Modify   CourseListView.cshtml   Page.
• CourseListView.cshtml page with writing the below code.

<div ng-app="ABCApp" ng-controller="CourseController">
    <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">Course List</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../Course/CourseEntry">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>Course Name</td>
                                <td>Batch Name</td>
                                <td>Section Name</td>
                                <td>Edit</td>
                                <td>Delete</td>
                            </tr>
                            <tr ng-repeat="e in Course" ng-class-even="'even'" ng-class-odd="'odd'">
                                <td>{{e.SL}}</td>
                                <td>{{e.CourseName}}</td>
                                <td>{{e.BatchName}}</td>
                                <td>{{e.SectionName}}</td>
                                <td>
                                    <a href="/Course/CourseEntry?MasterId={{e.CourseId}}" class="btn btn-warning">Edit</a>

                                </td>
                                <td><a ng-click="DeleteMAsterData(e.CourseId)" 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/CourseControllerJS.js"></script>

Step-6:

• Add LoadData() JsonResult in CourseController.cs Controller  .

• Go to Solution Explorer > Controllers Folder> CourseController.cs> in this controller with writing the below code.

        public JsonResult LoadData()
        {
            DataSet ds = aDal.LoadAllDataDAL();
            List<CourseDAO> lists = new List<CourseDAO>();
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                lists.Add(new CourseDAO
                {
                    CourseId = Convert.ToInt32(dr["CourseId"]),
                    SL = (dr["SL"].ToString()),
                    CourseName = (dr["CourseName"].ToString()),
                    SectionName = (dr["SectionName"].ToString()),
                    BatchName = (dr["BatchName"].ToString())
                });
            }
            return Json(lists, JsonRequestBehavior.AllowGet);
        }

Step-7:

• Add LoadAllDataDAL() in    CourseDAL.cs class.
• Go to Solution Explorer > DAL Folder> CourseDAL.cs> in this controller with writing the below code.

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

Step-8:

• Create store Procedure for Load Course Information.
• Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_LoadAllData_Course with writing the below code.

create proc [dbo].[sp_LoadAllData_Course]
as 
begin
select ROW_NUMBER() over (order by  co.CourseId) as SL, ba.BatchName, sec.SectionName, co.CourseName, * from tblCourse as co

left join tblBatch ba on ba.BatchId=co.BatchId
left join tblSection sec on sec.SectionId=co.SectionId
end

Step-9:

• Add  CourseControllerJS.js file.
• Go to Solution Explorer > Scripts Folder.> AngularController Folder>     ‘CourseControllerJS.js’> for   Course information Load    with writing the below code.

    $http.get("/Course/LoadData").then(function (d) {
        $scope.Course = d.data;
    }, function (error) {
        alert("Faild");
    });

Step-10:

• In CourseController.cs class add ReomveDataByMAsterId() JsonResult for Remove Course Information.
• Go to Solution Explorer > Controllers Folder > CourseController.cs  in this controller with writing the below code.

        public JsonResult ReomveDataByMAsterId(int CourseId)
        {
            string result = string.Empty;
            try
            {
                aDal.DeleteInfoDAL(CourseId);
                result = "Operation Deleted";
            }
            catch (Exception)
            {
                result = "Operation Faild";
                //throw;
            }
            return Json(result, JsonRequestBehavior.AllowGet);
        }

Step-11:

• Add DeleteInfoDAL() in CourseDAL.cs  class.
• Go to Solution Explorer > DAL Folder > CourseDAL.cs  Class with writing the below code.

        public void DeleteInfoDAL(int CourseId)
        {
            SqlCommand com = new SqlCommand("Delete_CourseByMasterId", conn);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@CourseId", CourseId);
            conn.Open();
            com.ExecuteNonQuery();
            conn.Close();
        }

Step-12:

• Create store Procedure for Delete Course Information.
• Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create Delete_CourseByMasterId with writing the below code.

create proc [dbo].[Delete_CourseByMasterId]
@CourseId int 
as 
begin
delete from  tblCourse   where CourseId=@CourseId
end

Step-13: Run Application.