Part-14: Insert data and Page design bootstrap using ASP.NET MVC JQUERY AngularJS

11/8/2021 10:15:20 AM

You will learn here about Insert data to database using ASP.NET MVC JQUERY AngularJS. Create page design will also teach this article also you will learn how to pass javascript value to controller then database.

Steps:

Step-1: StudentEntry.cshtml page with writing the below code.

<div ng-app="ABCApp" ng-controller="StudentController" >
    <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 Entry </h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../Student/StudentList">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-4">



                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Student Name</label>
                                        <input type="text" ng-model="StudentDAO.StudentName" class="form-control" />
                                    </div>
                                </div>
                            </div>
                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Batch Name</label>
                                        <select class="form-control" ng-model="StudentDAO.BatchId" ng-change="LoadSectionByBatchID(StudentDAO.BatchId)">
                                            <option ng-repeat="e in Batch" value="{{e.BatchId}}">{{e.BatchName}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>



                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Section Name</label>
                                        <select class="form-control" ng-model="StudentDAO.SectionId">
                                            <option ng-repeat="e in Section" value="{{e.SectionId}}">{{e.SectionName}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>DOB</label>
                                        <input type="date" ng-model="StudentDAO.DOB" class="form-control" />
                                    </div>
                                </div>
                            </div>

                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Gender</label>
                                        <select class="form-control" ng-model="StudentDAO.Gender">
                                            <option value="Male">Male </option>
                                            <option value="Female">Female </option>
                                            <option value="Other">Other </option>
                                        </select>
                                    </div>
                                </div>
                            </div>

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

                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Religion</label>
                                        <select class="form-control" ng-model="StudentDAO.Religion">
                                            <option value="Islam">Islam </option>
                                            <option value="Christianity">Christianity </option>
                                            <option value="Buddhism">Buddhism </option>
                                            <option value="Hinduism">Hinduism </option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Father Name</label>
                                        <input type="text" ng-model="StudentDAO.FatherName" class="form-control" />
                                    </div>
                                </div>
                            </div>


                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Mother Name</label>
                                        <input type="text" ng-model="StudentDAO.MotherName" class="form-control" />
                                    </div>
                                </div>
                            </div>


                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Present Addrees</label>
                                        <input type="text" ng-model="StudentDAO.PresentAddrees" class="form-control" />
                                    </div>
                                </div>
                            </div>



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

                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Permanent Address</label>
                                        <input type="text" ng-model="StudentDAO.PermanentAddress" class="form-control" />
                                    </div>
                                </div>
                            </div>


                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Addmitted Date</label>
                                        <input type="date" ng-model="StudentDAO.AddmittedDate" class="form-control" />
                                    </div>
                                </div>
                            </div>

                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Active Status</label>
                                        <select class="form-control" ng-model="StudentDAO.Status">
                                            <option value="true">Active </option>
                                            <option value="false">Inactive </option>

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

                        <div class="col-md-3">
                            <input type="button" ng-click="SaveData()" class="btn btn-primary" value="{{btnSaveText}}" />
                        </div>
                    </div>
                </div>
</section>
    </div>
</div>
<script src="~/Scripts/angular.min.js"></script> 

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

Step-2:

Create StudentControllerJS.js file.
Go to Solution Explorer > Scripts Folder.> AngularController Folder> Create ‘StudentControllerJS.js> for Batch Name Load with writing the below code.

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

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

    $scope.btnSaveText = "Save";


    $http.get("/Student/ddlLoadBatch").then(function (d) {

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

Step-3:

In StudentController.cs class add ddlLoadBatch() JsonResult for Load Batch Name.
Go to Solution Explorer > Controllers Folder > StudentController.cs in this controller with writing the below code.

        public JsonResult ddlLoadBatch()
        {
            DataSet ds = aDal.BatchDDLLoadDAL();
            List<BatchDAO> lists = new List<BatchDAO>();
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                lists.Add(new BatchDAO
                {
                    BatchId = Convert.ToInt32(dr["BatchId"]),

                    BatchName = (dr["BatchName"].ToString())
                });
            }
            return Json(lists, JsonRequestBehavior.AllowGet);
         }

Step-4:

Create StudentDAL.cs class.
Go to Solution Explorer > DAL Folder > StudentDAL.cs Class with writing the below code.

SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConStr"].ConnectionString);
        public DataSet BatchDDLLoadDAL()
        {
            SqlCommand com = new SqlCommand("sp_BatchDDLLoad", conn);
            com.CommandType = CommandType.StoredProcedure;
            SqlDataAdapter da = new SqlDataAdapter(com);
            DataSet dss = new DataSet();
            da.Fill(dss);
            return dss;
        }

#when select Batch Name dropdownlist then Section name will be loaded from the database against Batch Name

Step-5:

Add ddlLoadSectonbyBatchID() JsonResult for section Name in StudentController.cs.
Go to Solution Explorer > Controllers Folder> StudentController > in this controller with writing the below code.

        public JsonResult ddlLoadSectonbyBatchID(int BatchId)
        {
            DataSet ds = aDal.SectionByBathIdDDLLoadDAL(BatchId);
            List<SectionDAO> lists = new List<SectionDAO>();
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                lists.Add(new SectionDAO
                {
                    SectionId = Convert.ToInt32(dr["SectionId"]),

                    SectionName = (dr["SectionName"].ToString())
                });
            }
            return Json(lists, JsonRequestBehavior.AllowGet);
        }

Step-6:

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

        public DataSet SectionByBathIdDDLLoadDAL(int BatchId)
        {
            SqlCommand com = new SqlCommand("sp_SectionByBatchIdDDLLoad", conn);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@BatchId", BatchId);
            SqlDataAdapter da = new SqlDataAdapter(com);
            DataSet dss = new DataSet();
            da.Fill(dss);
            return dss;
        }

Step-7:

Create StudentControllerJS.js file.
Go to Solution Explorer > Scripts Folder> AngularController Folder> ‘StudentControllerJS.js> for Save Information with writing the below code.

$scope.SaveData = function () {

        if ($scope.btnSaveText == "Save") {
            $scope.btnSaveText = "Saving.....";
            $http({
                method: 'POST',
                url: '/Student/Save_Info',
                data: $scope.StudentDAO
            }).success(function (a) {
                $scope.btnSaveText = "Save";
                $scope.StudentDAO = null;
                alert("Operation Successful!! Student ID: 013");
            }).error(function () {
                alert("Faild");
            });
        } else {
            //$scope.btnSaveText = "Updating.....";
            //$http({
            //    method: 'POST',
            //    url: '/Course/Update_Info',
            //    data: $scope.CourseDAO
            //}).success(function (a) {
            //    $scope.btnSaveText = "Save";
            //    $scope.CourseDAO = null;
            //    alert(a);
            //}).error(function () {
            //    alert("Faild");
            //});
        }
    };

Step-8:

Add Save_Info() JsonResult for Save Information in StudentController.cs.
Go to Solution Explorer > Controllers Folder> StudentController > in this controller with writing the below code.

        public JsonResult Save_Info(StudentDAO aDao)
        {
            string Mes = "";
            try
            {
                aDal.AddNewInfoDAL(aDao);
                string IdNo = "";
                DataSet ds = aDal.GetStudentIdNODAL();
                List<StudentDAO> lists = new List<StudentDAO>();
                foreach (DataRow dr in ds.Tables[0].Rows)
                {
                    IdNo = (dr["StudentIdNO"].ToString());
                }

                Mes = "Operation Successful!! Student ID NO: " + IdNo;
            }
            catch (Exception e)
            {
                Mes = "Operation Faild!!";
            }
            return Json(Mes, JsonRequestBehavior.AllowGet);
        }

Step-9:

Create StudentDAO.cs class.
Go to Solution Explorer > DAO Folder > StudentDAO.cs Class with writing the below code.

public class StudentDAO
    {
        public int StudentId { get; set; }
        public string SL { get; set; }
        public string SectionName { get; set; }
        public string BatchName { get; set; }
        public string StudentName { get; set; }

        public string StudentIdNO { get; set; }
        public int BatchId { get; set; }
        public int SectionId { get; set; }
        public DateTime DOB { get; set; }
        public string Gender { get; set; }
        public string Religion { get; set; }
        public string FatherName { get; set; }
        public string MotherName { get; set; }
        public string PresentAddrees { get; set; }
        public string PermanentAddress { get; set; }
        public DateTime AddmittedDate { get; set; }
        public bool Status { get; set; }
    
    }

Step-10:

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

        public void AddNewInfoDAL(StudentDAO aDao)
        {
            SqlCommand com = new SqlCommand("sp_Insert_Student", conn);
            com.CommandType = CommandType.StoredProcedure;

            com.Parameters.AddWithValue("@StudentName", aDao.StudentName);
            com.Parameters.AddWithValue("@BatchId", aDao.BatchId);
            com.Parameters.AddWithValue("@SectionId", aDao.SectionId);
            com.Parameters.AddWithValue("@DOB", aDao.DOB);
            com.Parameters.AddWithValue("@Gender", aDao.Gender);
            com.Parameters.AddWithValue("@Religion", aDao.Religion);
            com.Parameters.AddWithValue("@FatherName", aDao.FatherName);
            com.Parameters.AddWithValue("@MotherName", aDao.MotherName);
            com.Parameters.AddWithValue("@PresentAddrees", aDao.PresentAddrees);

            com.Parameters.AddWithValue("@PermanentAddress", aDao.PermanentAddress);
            com.Parameters.AddWithValue("@AddmittedDate", aDao.AddmittedDate);
            com.Parameters.AddWithValue("@Status", aDao.Status);
             
            conn.Open();
            com.ExecuteNonQuery();
            conn.Close();
        }

Step-11: Run Application.

About Teacher

Reza Karim

Software Engineer

More about him

Comments

Save Reset

{{data.CreatedOn}} {{data.ProfileName}}

reply

{{item.CreatedOn}} {{item.ProfileName}}

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

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

0 Comments

AngularJS

27 Articles