CRUD JsTemplate

    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
        }

        .modal-content {
            position: relative;
            background-color: #fefefe;
            margin: auto;
            padding: 0;
            border: 1px solid #888;
            width: 40%;
            -webkit-animation-name: animatetop;
            -webkit-animation-duration: 0.5s;
        }

        @-webkit-keyframes animatetop {
            from {
                top: -300px;
                opacity: 0
            }

            to {
                top: 0;
                opacity: 1
            }
        }

        @keyframes animatetop {
            from {
                top: -300px;
                opacity: 0
            }

            to {
                top: 0;
                opacity: 1
            }
        }

        .close {
            color: white;
            float: right;
            font-size: 20px;
            font-weight: bold;
        }

            .close:hover, .close:focus {
                color: #000;
                text-decoration: none;
                cursor: pointer;
            }

        .modal-header {
            padding: 2px 16px;
            background-color: #5cb85c;
            color: white;
        }

        .modal-body {
            padding: 2px 16px;
        }

        .modal-footer {
            padding: 2px 16px;
            background-color: #5cb85c;
            color: white;
        }

        #myBtn {
            background-color: rgba(0,0,0,0.4);
            padding: 15px 20px;
            border-radius: 25px;
        }
         #myBtn:hover {
            background-color: #ccf1;
            cursor:pointer;
        }
    <style>
<div class="container">
        <h1>Student form</h1>
        <button id="myBtn" onclick="getModel()">Open Modal</button>
        <div id="myModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                        close
                </div>
                <div class="modal-body">
                    <form id="form2" runat="server">

                        <input type="hidden" id="lblId" />
                        <table style="font-size: 18px" id="tblStudentForm">
                            <tr>
                                <td colspan="2">
                                    <h1>Ragistration Form</h1>
                                </td>
                            </tr>
                            <tr>
                                <td>Name</td>
                                <td>
                                    <input type="text" id="txtName" /></td>
                            </tr>
                            <tr>
                                <td>Subject:</td>
                                <td>
                                    <select name="subject" id="ddlSub"></select>
                                </td>
                            </tr>
                            <tr>
                                <td>Email:</td>
                                <td>
                                    <input type="email" id="txtEmail" /></td>
                            </tr>
                            <tr>
                                <td>Gender:</td>
                                <td>
                                    <label>
                                        Male                   
                                    <input type="radio" id="rbtnmale" name="gender" value="male" />
                                    </label>
                                     
                                        <label>
                                            FeMale
                                        <input type="radio" id="rbtnfemale" name="gender" value="female" />
                                        </label>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                   <button type="button" onclick="addData()" class="btn btn-success">Save</button>
                                    <button type="button" onclick="clearAllTextBoxes('tblStudentForm')">Clear</button>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <h3>Modal Footer</h3>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h2>Registration Data</h2>
        <div>
            <table class="table" id="tblStudents">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col">Actions</th>
                        <th scope="col">Id</th>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Gender</th>
                        <th scope="col">Subject</th>
                    </tr>
                </thead>
                <tbody id="tabledata">
                </tbody>
            </table>
        </div>
    </div>
</pre>
                    

$(document).ready(function () {
    getAllStudent("");
});

function getAllStudent(id) {
    if (id == "") 
        callServiceMethod("StudentForm3.aspx", "getStudents", "{'id':'" + id + "'}", scs_getAllStudent);
    else
        getModel()
        callServiceMethod("StudentForm3.aspx", "getStudents", "{'id':'" + id + "'}", scs_getEditStudent);
}

function scs_getEditStudent(data) {
    var datas = JSON.parse(data.d);
    $('#lblId').val(datas[0].id);
    $('#txtName').val(datas[0].name);
    $('#txtEmail').val(datas[0].email);
    if (datas[0].gender == "male") {
        $('#rbtnmale').prop("checked", true)
    } if (datas[0].gender == "female") {
        $('#rbtnfemale').prop("checked", true)
    }
    $('#ddlSub option[value=' + datas[0].subjectid + ']').attr("selected", "");
}

function scs_getAllStudent(data) {
    var datas = JSON.parse(data.d);
    $('#tabledata').empty();
    for (var i = 0; i < datas.length; i++) {
        $('#tabledata').append('<tr id="trStudent_' + datas[i].Id + '">
            <td>' + '<a href="#" onclick="getAllStudent(' + datas[i].Id +',this)">edit</>
          | <a href="#"  onclick="deleteStudent(' + datas[i].Id + ')">delete</>' + '</td>' +
            '<td id>' + datas[i].Id + '</td>' +
            '<td name>' + datas[i].Name + '</td>' +
            '<td email>' + datas[i].Email + '</td>' +
            '<td gen>' + datas[i].Gender + '</td>' +
            '<td sub>' + datas[i].SubjectId + '</td></tr>');
    }
}

function showSubjects() {
    callServiceMethod("StudentForm4.aspx", "showSubjects", "", scs_showSubjects);
}
function scs_showSubjects(data) {
    var datas = JSON.parse(data.d);
    var subjects = "<option value=''>select subjects </option>";
    for (var i = 0; i < datas.length; i++) {
        subjects += "<option value='" + datas[i].Id + "'>" + datas[i].Sub_Name + "</option>";
    }
    $('#ddlSub').html(subjects);
}
function deleteStudent(id) {
    if (confirm("Do you want to delete?")) {
        callServiceMethod("StudentForm2.aspx", "Delete", "{'id':" + id + "}", function () {
            scs_deleteStudent(id);
        });
    }
}

function scs_deleteStudent(id) {
        $("#trStudent_" + id).remove();
        alert("Row Deleted Successfully");
}

function addData() {
    var data = "{'id':'" + $('#lblId').val() + "','name':'" + $('#txtName').val()
                + "','email':'" + $('#txtEmail').val() + "','gender':'" + 
                $('[name="gender"]:checked').attr("value") + "','subject':'" + 
                $('#ddlSub').val() +"'}"
    callServiceMethod("StudentForm2.aspx", "saveStudent", data , scs_method)
}

function scs_method() {
    alert("Student Saved Successfully");
}

function clearAllTextBoxes(containerId) {
    $("#" + containerId + " input[type='text']").val("");
    $("#" + containerId + " select").val("");
    $("#" + containerId + " input[type='radio']").prop("checked", false);
}

function callServiceMethod(urlPath, CollingMethod, data, scsMethod) {
    $.ajax({
        type: "POST",
        url: urlPath + "/" + CollingMethod,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: data,
        success: function (response) {
            if (scsMethod != "") {
                scsMethod(response)
            }
        },
        error: function (err) {
            console.log(err.statusText);
        }
    });
}
                                    
function getModel() {

    var modal = document.getElementById('myModal');
    var btn = document.getElementById("myBtn");
    var span = document.getElementsByClassName("close")[0];
    btn.onclick = function () {
        modal.style.display = "block";
    }
    span.onclick = function () {
        modal.style.display = "none";
    }
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
}

[WebMethod]
 public static string getStudents(string id)
 {
   sqlHelper sqlhel = new sqlHelper();
   if (string.IsNullOrEmpty(id))
        return JsonConvert.SerializeObject(sqlhel.getDataTable(@"select * from tblStudents"));
   else
       {
          return JsonConvert.SerializeObject(sqlhel.getDataTable(@" select s.id,s.name,
            s.email,s.gender,m.Sub_Name from tblStudents s
            left outer join MasterSubjects m on s.Id = m.Id    
            where s.Id=" + id)); 
        }
   }

[WebMethod]
public static string Delete(int id)
{
    sqlHelper sqlhel = new sqlHelper();
     var query = @"delete from tblStudents where id=" + id;
      return JsonConvert.SerializeObject(sqlhel.getDataRow(query));
}

[WebMethod]
public static string InsertOrUpdate(string id, string name, string email, string gender, string subject )
{
    sqlHelper sqlhel = new sqlHelper();
    string[] cols = { "Name", "email", "gender", "subjectId" };
    object[] vals = { name, email, gender, subject  };
    if (string.IsNullOrEmpty(id))
     {
        sqlhel.insertValIntoTable("tblStudents", cols, vals);
     }
    else
     {
         sqlhel.updateValIntoTable("tblStudents", cols, vals, "id", id);
     }
      return "";
} 

[WebMethod]
public static string showSubjects()
{
     sqlHelper sqlhel = new sqlHelper();
      return JsonConvert.SerializeObject(sqlhel.getDataTable(@"select * from MasterSubjects"));
}