In this post, Will discuss Student Marks Entry page in table column input marks entry using Jquery & Angular js in ASP.NET MVC.

Step-1: Create StudentMarkController for insert Student marks.

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

        public ActionResult StudentMarksEntry()

        {
            return View();
        }

        public ActionResult StudentMarksList()

        {
            return View();

        }

And create above two pages for Student marks entry and list. 

Step-2: In StudentMarksEntry Page with writing the below code . Go to Solution Explorer > Views Folder > Student Mark>  StudentMarksEntry page  with writing the below code.

 <div class="row">

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

                        <div class="form-group">

                            <label>Student ID & Name</label>

                            <select class="form-control" ng-model="StudentCourseOfferDAO.StudentId" id="StudentId">

                                <option ng-repeat="e in StudentIDNO" value="{{e.StudentId}}">{{e.StudentIdNO}}</option>

                            </select>

                        </div>

                    </div>

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

                        <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 class="col-md-4">

                        <div class="form-group">

                            <br />

                            <button type="button" class="btn btn-success" onclick="GetList()">Search</button>

                        </div>

                    </div>

                </div>

When click the search button we will see student marks input field in table.

<div class="row">

                    <div class="col-md-12">

                        <table class="table table-responsive" id="dtTable">

                            <thead>

                                <tr>

                                    <td>SL#</td>

                                    <td>Course Name</td>

                                    <td>Marks</td>

                                    <td>Out of Marks</td>

                                </tr>

                            </thead>

                            <tbody id="dtTableBody">

                            </tbody>

                        </table>

                    </div>

                </div>

Step-3: In StudentMarksEntry Page with writing the below script for load table.

function GetList() {
        var prm = "";

        if ($('#StudentId').val() != "") {

            prm = prm + " and StudentId ='" + $('#StudentId').val() + "'";

        }

        if ($('#TrimesterInfoId').val() != "") {

            prm = prm + " and TrimesterInfoId ='" + $('#TrimesterInfoId').val() + "'";

        }

          var urlPath = '@Url.Action("GetStudentCourseOfferList", "StudentCourseOffer")';

        $.ajax({

            url: urlPath,

            dataType: 'json',

            data: { prm: prm},

            type: "Get",

            async: true,

            success: function (data) {

                var result = JSON.parse(data);

                var row = "";

                $('#dtTableBody').html("");

                for (var i = 0; i < result.length;i++) {

                    row +="<tr>";

                    row += "<td>" + (i + 1) + "</td>";

                    row += '<td> <input type="hidden" id="hCourseId" name="CourseList[' + result[i].CourseId + '].hfCourseId" value="' + result[i].CourseId + '"/>' + result[i].CourseName+ '</td>';

                    row += "<td> <input type='number' class='form-control' id='Mark' name='MarkList[" + result[i].CourseId +"].txtMark'" + "</td>";

                    row += "<td> <input type='number'  class='form-control'  id='OutMark' name='OutMarkList[" + result[i].CourseId + "].txtOutMark'" + "</td>";

                    row += "</tr>";

                }

                $('#dtTableBody').html(row);

                    },

            error: function (data) {

                alert("Operation Faild!!");

            }
        })
    }

For save we need a button like

  <div class="row">

                    <div class="col-md-3">

                        <input type="button" onclick="Save()" class="btn btn-primary" value="{{btnSaveTextBatch}}"/>

                    </div>

  </div>

For save data we need a save() function with writing the below highlight 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-4: Run Application.