Thumb

SMS-25: Student Course Mark multiple data save using jquery with Stored Procedure & Angular js in ASP.NET MVC

Part-04: Bootstrap Admin Dashboard Template setup in School Management Software Part 5: How to use AngularJS in ASP.NET MVC Part-6: CRUD Operation Insert Data using AngularJS in ASP.NET MVC Part-7: CRUD Operation & Load Data using AngularJS in ASP.NET MVC Part-08: CRUD Operation Edit, Delete Data using Angularjs in ASP.NET MVC Part-3: Create Database and Table in sql server for school management system Part-09: Insert Section data using ASP.NET MVC AngularJs Part-10: Edit Update and Delete Section data using Angular js | ASP.NET MVC | Jquery Part-11: Cascading Dropdownlist Section Batch selection in asp.net MVC JQUERY AngularJS Part-12: Insert & Delete course information for school management software using ASP.NET MVC Javascript Angularjs Part-13: Create Update course info in ASP.NET MVC AngularJs JQUERY Javascript Part-14: Insert data and Page design bootstrap using ASP.NET MVC JQUERY AngularJS Part-15: Insert & Get data using store procedure in SQL Server ASP.NET MVC AngularJS JQUERY Part-16: Load student list,bootstrap and Inactive using ASP.NET MVC AngularJS Jquery Part-17: User authentication using Store procedure Javascript AngularJS JQUERY ASP.NET MVC Part-18: User authentication, authorization and login using ASP.NET MVC AngularJS Javascript JQUERY Part-19: User Registration & Insert semester Info using AngularJS in ASP.NET MVC Part-20: Load semester info & Student course offer page design using ASP.NET MVC JQUERY Angularjs Part-21: Course Offer Entry Using Jquery Multiple Data Save (Part-1) using ASP.NET MVC AngularJS SMS-22: Student Course Offer Entry happens Using Jquery Multiple Data Save List view dropdownlist Load using Angular js in ASP.NET MVC SMS-23: Student course offer list semester search using ASP.NET MVC AngularJS JQUERY SMS-24: Student Marks Entry page in table column input marks entry using 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 SMS-26: Student Marks list show by search student name and trimester Jquery & Angular js in ASP.NET MVC 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

12/6/2021 11:10:00 AM

In this post, I will show Student Course Mark multiple data save using jquery with Stored Procedure & Angular js in ASP.NET MVC.

Step-1: In StudentMarksEntry Page with writing the below script for Save Data.

For save data we need a save() function with writing the below script

 function Save() {

      var jsonData = {};

        jsonData["FakeId"] = '1';

        //jsDt["TrimesterInfoId"] = $('#TrimesterInfoId').val();

        var jsonObjs = [];

        $('#dtTable tbody tr').each(function (id) {

            var theobj = {};

            id++;

            var CorsId = $("input[name='CourseList[" + id + "].hfCourseId']").val();

            var Mark = $("input[name='MarkList[" + id + "].txtMark']").val();

            var OutMark = $("input[name='OutMarkList[" + id + "].txtOutMark']").val();

            theobj["CourseId"] = CorsId;

            theobj["Marks"] = Mark;

            theobj["MarksOutOf"] = OutMark;

            theobj["StudentId"] = $('#StudentId').val();

            theobj["TrimesterInfoId"] = $('#TrimesterInfoId').val();

            jsonObjs.push(theobj);

        });

        jsonData["StudentMarksEntryDAOLists"] = jsonObjs;

        var urlPath = '@Url.Action("Save_Info", "StudentMark")';

        $.ajax({

            data: JSON.stringify(jsonData),

            url: urlPath,

            type: "POST",

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            success: function (result) {

                alert("Operation Successfully Done")

                var url = '@Url.Action("StudentMarksEntry", "StudentMark")'

                window.location.href = url;

            },

            error: function (data) {

                alert("Operation Faild!!");

            }

        })

    }

Step-2: In StudentMarkController for insert Student marks add Save_Info().

Go to Solution Explorer > Controllers Folder > create   StudentMarkController.css  controller with writing the below code.

        public ActionResult Save_Info(StudentMarksEntryDAO ADao)
        {
            string Mes = "";

            try

            {
                aDal.AddNewInfoDAL(ADao);

                Mes = "Operation Success!!";
            }
            catch (Exception ex)

            {
                Mes = "Error";
            }
            return Json(Mes, JsonRequestBehavior.AllowGet);
        }

Step-3: Create StudentMarksEntryDAO  & StudentMarksEntryDAOList  Data object.

Go to Solution Explorer > Controllers Folder >  StudentMarkController.css  controller with writing the below code.

public class StudentMarksEntryDAO

    {
        public int FakeId { get; set; }

        public List<StudentMarksEntryDAOList> StudentMarksEntryDAOLists { get; set; }

    }

    public class StudentMarksEntryDAOList

    {

        public int StudentMarksEntryId { get; set; }

        public int CourseId { get; set; }

        public int TrimesterInfoId { get; set; }

        public int StudentId { get; set; }

        public decimal Marks { get; set; }

        public decimal MarksOutOf { get; set; }

    }

Step-4: Create StudentMarksEntryDAL for add AddNewInfoDAL().

Go to Solution Explorer > DAL Folder > create   StudentMarksEntryDAL.css  with writing the below code.

public void AddNewInfoDAL(StudentMarksEntryDAO aDao)

        {

            foreach(var item in aDao.StudentMarksEntryDAOLists)

            {

                SqlCommand com = new SqlCommand("sp_Insert_StudentMarksEntry_Info", conn);

                com.CommandType = CommandType.StoredProcedure;

                com.Parameters.AddWithValue("@StudentId", item.StudentId);

                com.Parameters.AddWithValue("@TrimesterInfoId", item.TrimesterInfoId);

                com.Parameters.AddWithValue("@CourseId", item.CourseId);

                com.Parameters.AddWithValue("@Marks", item.Marks);

                com.Parameters.AddWithValue("@MarksOutOf", item.MarksOutOf);

                conn.Open();

                com.ExecuteNonQuery();

                conn.Close();

            }

        }

Step-5: Create store Procedure for Save Student M arks Entry.
Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_StudentCourseOfferListLoadByParm  with writing the below code.

create PROCEDURE [dbo].[sp_Insert_StudentMarksEntry_Info]

       -- Add the parameters for the stored procedure here

        @CourseId int=null ,

        @TrimesterInfoId int=null ,

        @StudentId int=null ,

        @Marks decimal=null ,

        @MarksOutOf decimal=null

AS

BEGIN

INSERT INTO [dbo].[tblStudentMarksEntry]

           ([CourseId]

           ,[TrimesterInfoId]

           ,[StudentId]

           ,[Marks]

           ,[MarksOutOf])

     VALUES

           (@CourseId

           ,@TrimesterInfoId

           ,@StudentId

           ,@Marks

           ,@MarksOutOf)

END

Step-4: Run Application.

About Teacher

Reza Karim

Software Engineer

More about him