In this post, Will Student Course Offer Entry Using Jquery Multiple Data Save (Part-1) using Angular js in ASP.NET MVC. Here will learn jsonresult type method writing in asp.net mvc , insert & load data using store procedure in asp.net mvc push data using javascript to asp.net controller.

Steps:

Step-1:

• ‘StudentCourseOfferController’  Controller add ddlLoadTrimesterInfo JsonResult for Load Transfer.
• Go to Solution Explorer > Controllers Folder>   StudentCourseOfferController  Controller   with writing the below code.

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

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

Step-2:

• In StudentCourseOfferDAL.cs Class Add TrimesterDDLLoadDAL().
• Go to Solution Explorer > DAL Folder >  StudentCourseOfferDAL.css  with writing the below code.

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

Step-3:

• Create store Procedure for load Trimester.
• Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_TrimesterDDLLoad with writing the below code.

create proc [dbo].[sp_TrimesterDDLLoad]
as
begin

select * from  tblTrimesterInfo   s 
end

Step-4:

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

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

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

Step-5:

• StudentCourseOfferEntry page with writing the below code for load Trimester.

                <div class="row">

                    <div class="col-md-3">
                        <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>
                            </select>
                        </div>
                    </div>
                </div>

Step-6:

• ‘StudentCourseOfferController’  Controller add ddlLoadCourseInfo JsonResult.
• Go to Solution Explorer > Controllers Folder>   StudentCourseOfferController  Controller   with writing the below code.

        public JsonResult ddlLoadCourseInfo()
        {

            DataSet ds = aDal.CourseDDLLoadDAL();
            List<CourseDAO> lists = new List<CourseDAO>();
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                lists.Add(new CourseDAO
                {
                    CourseId = Convert.ToInt32(dr["CourseId"]),

                    CourseName = (dr["CourseName"].ToString())


                });

            }

            return Json(lists, JsonRequestBehavior.AllowGet);
        }

Step-7:

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

        public JsonResult ddlLoadCourseInfo()
        {
            DataSet ds = aDal.CourseDDLLoadDAL();
            List<CourseDAO> lists = new List<CourseDAO>();
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                lists.Add(new CourseDAO
                {
                    CourseId = Convert.ToInt32(dr["CourseId"]),

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

Step-8:

• In StudentCourseOfferDAL.cs Class Add CourseDDLLoadDAL().
• Go to Solution Explorer > DAL Folder >  StudentCourseOfferDAL.css  with writing the below code.

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

Step-9:

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

create proc [dbo].[sp_CourseDDLLoad]
as
begin

select * from  tblCourse   s 
end

Step-10:

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

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

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

Step-11:

• StudentCourseOfferEntry page with writing the below code for load Course.

                    <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Course Name</label>
                             
                            <select class="form-control" multiple ng-model="StudentCourseOfferDAO.CourseId" id="CourseId">
                                <option ng-repeat="e in CourseInfo" value="{{e.CourseId}}">{{e.CourseName}}</option>
                            </select>

                        </div>
                    </div>
                </div>

Step-12:

• StudentCourseOfferEntry page with writing the below code for Save Student  Course Offer.

<script>

    function Save() {


        var jsDt = {};
        var dv= $('#CourseId').val();

        var multiCousrId = dv.toString();

        jsDt["CourseId"] = multiCousrId;
        jsDt["StudentId"] = $('#StudentId').val();
        jsDt["TrimesterInfoId"] = $('#TrimesterInfoId').val();
        jsDt["CourseOfferDate"] = $('#CourseOfferDate').val();


        var urlPath = '@Url.Action("Save_Info", "StudentCourseOffer")';
        $.ajax({

            data: jsDt,
            url: urlPath,
            type: "POST",
            success: function (result) {

                alert("Operation Successfully Done")
                var url = '@Url.Action("StudentCourseOfferEntry", "StudentCourseOffer")'
                window.location.href = url;
            },
            error: function (data) {

                alert("Operation Faild!!");
            }
        })

    }
</script>

Step-13:

• Add  Save_Info()  JsonResult StudentCourseOfferController.cs Controller for Save Data.
• Go to Solution Explorer > Controllers Folder >  StudentCourseOfferController.css  with writing the below code.

        public JsonResult Save_Info(StudentCourseOfferDAO ADao)
        {
            string Mes = "";
            try
            {
                aDal.AddNewInfoDAL(ADao);
                Mes = "Operation Success!!";
            }
            catch(Exception ex)
            {
                Mes = "Error";
            }
            return Json(Mes, JsonRequestBehavior.AllowGet);
        }

Step-14:

• Add  StudentCourseOfferDAO.cs class in DAO folder.

    public class StudentCourseOfferDAO
    {
        public int StudentCourseOfferId { get; set; }
        public string CourseId { get; set; }
        public int TrimesterInfoId { get; set; }
        public int StudentId { get; set; }
        public DateTime CourseOfferDate { get; set; }
    }

Step-15:

• 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);
                conn.Open();
                com.ExecuteNonQuery();
                conn.Close();
            }
        }

Step-13: Run Application.