javascript - Asp.net 使用 Jquery 编辑和保存相同的按钮

Question

我有这样的东西，

当我点击编辑时，它会将那个学生的记录填充回文本框。我想使用相同的“保存”按钮来保存和编辑。我也通过同一个按钮保存学生。我希望当有人单击编辑按钮保存时，ajax 调用不会调用。我坚持这一点。当前，当我编辑记录时，也会插入相同的记录。如果有人想查看代码，我可以为此编辑问题。谢谢

function UpdateStudent(id, name, fname, roll, age, phone, address) {
debugger
$(document).ready(function () {
    $("#students").show();
    $("#txtName").val(name);
    $("#txtFatherName").val(fname);
    $("#txtRollNo").val(roll);
    $("#txtAge").val(age);
    $("#txtPhone").val(phone);
    $("#txtAddress").val(address);
    if (id) {
        $("#btnSave").click(function (e) {
            e.preventDefault();
            debugger
            var Name = $("#txtName").val();
            var FatherName = $("#txtFatherName").val();
            var RollNo = $("#txtRollNo").val();
            var Age = $("#txtAge").val();
            var Phone = $("#txtPhone").val();
            var Address = $("#txtAddress").val();
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "StudentManagement.aspx/UpdateStudent",
                data: "{'ID': '" + id + "','Name':'" + Name + "','FatherName':'" + FatherName + "','RollNo':'" + RollNo + "','Age':'" + Age + "','Phone':'" + Phone + "','Address':'" + Address + "'}",
                dataType: "json",
                success: function (data) {
                    debugger
                    $("#txtName").val("");
                    $("#txtFatherName").val("");
                    $("#txtRollNo").val("");
                    $("#txtAge").val("");
                    $("#txtPhone").val("");
                    $("#txtAddress").val("");
                    $("#students").hide();
                    var array = data.d;
                    $("#table").find("tr:gt(0)").remove();
                    for (var i = 0; i < array.length - 1; i++) {
                        var row = "<tr>"
                        + "<td>" + array[i].ID + "</td>"
                        + "<td>" + array[i].Name + "</td>"
                        + "<td>" + array[i].FatherName + "</td>"
                        + "<td>" + array[i].RollNo + "</td>"
                        + "<td>" + array[i].Age + "</td>"
                        + "<td>" + array[i].Phone + "</td>"
                        + "<td>" + array[i].Address + "</td>"
                        + "<td><a href='#' onclick='UpdateStudent(\"" + array[i].ID + "\",\"" + array[i].Name + "\",\"" + array[i].FatherName + "\",\"" + array[i].RollNo + "\",\"" + array[i].Age + "\",\"" + array[i].Phone + "\",\"" + array[i].Address + "\")'>Edit</a></td>"
                        + "<td><a href='#' onclick='DeleteStudent( " + array[i].ID + " )'>Delete</a></td>"
                        + "</tr>"
                        $("#table").append(row);
                    }
                },
                error: function (response) {
                    debugger
                    alert(response);
                }
            });
            return false;
        });
    }
})

并在下方插入学生代码

function InsetStudent() {
debugger
$(document).ready(function () {
    var Name = $("#txtName").val();
    var FatherName = $("#txtFatherName").val();
    var RollNo = $("#txtRollNo").val();
    var Age = $("#txtAge").val();
    var Phone = $("#txtPhone").val();
    var Address = $("#txtAddress").val();
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "StudentManagement.aspx/CreateStudent",
        data: "{'Name':'" + Name + "','FatherName':'" + FatherName + "','RollNo':'" + RollNo + "','Age':'" + Age + "','Phone':'" + Phone + "','Address':'" + Address + "'}",
        dataType: "json",
        success: function (data) {
            debugger
            $("#txtName").val("");
            $("#txtFatherName").val("");
            $("#txtRollNo").val("");
            $("#txtAge").val("");
            $("#txtPhone").val("");
            $("#txtAddress").val("");
            $("#students").hide();
            var array = data.d;
            $("#table").find("tr:gt(0)").remove();
            for (var i = 0; i < array.length; i++) {
                var row = "<tr>"
                + "<td>" + array[i].ID + "</td>"
                + "<td>" + array[i].Name + "</td>"
                + "<td>" + array[i].FatherName + "</td>"
                + "<td>" + array[i].RollNo + "</td>"
                + "<td>" + array[i].Age + "</td>"
                + "<td>" + array[i].Phone + "</td>"
                + "<td>" + array[i].Address + "</td>"
                + "<td><a href='#' onclick='UpdateStudent(\"" + array[i].ID + "\",\"" + array[i].Name + "\",\"" + array[i].FatherName + "\",\"" + array[i].RollNo + "\",\"" + array[i].Age + "\",\"" + array[i].Phone + "\",\"" + array[i].Address + "\")'>Edit</a></td>"
                + "<td><a href='#' onclick='DeleteStudent( " + array[i].ID + " )'>Delete</a></td>"
                + "</tr>"
                $("#table").append(row);
            }
        },
        error: function (response) {
            debugger
            alert(response);
        }
    });
    return false;
})

并且 insertStudent 调用 jquery 加载，例如

$("#btnSave").click(function (e) {
    e.preventDefault();
    InsetStudent();
})

Answer 1

你可以这样做:

第一步:

如果您的表单中有任何必填字段，请使用此

$("#btnSave").click(function (e) {
        e.preventDefault();
    if(Check value of required field not null or empty)
    {
       UpdateStudent(id, name, fname, roll, age, phone, address);
    }
    else
    {
          InsetStudent();
    }
});

第二步:

如果您没有在表单中使用任何必填字段，则使用隐藏字段。此隐藏字段的默认值为 false。当用户点击编辑时，首先将 true 分配给隐藏字段。

 $("#btnSave").click(function (e) {
        e.preventDefault();
    if(Check value of Hidden field true)
    {
       UpdateStudent(id, name, fname, roll, age, phone, address);
  //Here update hidden field value to false after completing the operation
    }
    else
    {
          InsetStudent();
    }
});

希望这个逻辑对你有帮助。