我想知道当单击保存更改或提交按钮而不是仅尝试刷新页面时是否可以重新加载表。我似乎无法获得如何刷新它的方法。可能是因为表是在页面加载时呈现的，并且没有给定函数名？
这是html和脚本：
@model mvcpractive1.Models.PersonDb
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>GetDetails</title>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div style=" width:550px; padding:40px; margin-top:5%; margin-bottom:5%; border:1px solid black;" class="container center-div">
<form>
<div class="form-group">
<label for="PersonName">Person Id</label>
<input type="text" class="form-control" id="PersonId" name="PersonId" placeholder="Id" disabled>
</div>
<div class="form-group">
<label for="PersonName">Person Name</label>
<input type="text" class="form-control" id="PersonName" name="PersonName" placeholder="Name">
</div>
<div class="form-group">
<label for="PersonName">Person Age</label>
<input type="text" class="form-control" id="PersonAge" name="PersonAge" placeholder="Age">
</div>
<button id="snddet" style="position: absolute; margin-top:40px; margin-left: 190px" class="btn btn-primary">Submit</button>
<select style="margin-top:10px" class="mdb-select md-form" id="PersonCountry" name="PersonCountry">
<option value="" disabled selected>Choose your Country</option>
@foreach (var item in (List<String>)ViewBag.list)
{
<option value='@item'>@item</option>
}
</select>
<select class="mdb-select md-form" id="PersonCity" name="PersonCity" style=" display: none">
</select>
</form>
<button id="show" style="margin-top: 50px; margin-left:20px" class="btn btn-primary">Get Table</button>
<button id="upd" style="margin-top: 50px; margin-left: 20px; display: none" class="btn btn-primary">Save Changes</button>
<table id="mytable" class="table table-dark" border='1' style="display:none; margin-top:20px ">
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Country</th>
<th>City</th>
<th>Options</th>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
$('#snddet').click(function() {
var name = document.getElementById("PersonName").value;
var age = document.getElementById("PersonAge").value;
var country = document.getElementById("PersonCountry").value;
var city = document.getElementById("PersonCity").value;
$.ajax({
type: "get",
url: "/Person/SendDetails",
dataType: "json",
data: {
name: name,
age: age,
country: country,
city: city
},
contentType: "application/json; charset=utf-8",
success: function(data) {
alert(data);
},
failure: function(errMsg) {
alert(errMsg);
}
});
});
$('#upd').click(function() {
var Id = document.getElementById("PersonId").value;
var name = document.getElementById("PersonName").value;
var age = document.getElementById("PersonAge").value;
var country = document.getElementById("PersonCountry").value;
var city = document.getElementById("PersonCity").value;
$.ajax({
type: "get",
url: "/Person/editData",
dataType: "json",
data: {
Id: Id,
name: name,
age: age,
country: country,
city: city
},
contentType: "application/json; charset=utf-8",
success: function(data) {
alert(data);
},
failure: function(errMsg) {
alert(errMsg);
}
});
$("#upd").hide();
});
$('#PersonCountry').change(function() {
var a = document.getElementById("PersonCountry").value;
if ($(this).val() == "Pakistan") {
$("#PersonCity").show();
} else if ($(this).val() == "Canada") {
$("#PersonCity").show();
} else
$("#PersonCity").hide();
$.ajax({
type: "get",
url: "/Person/getCountry",
dataType: "json",
data: {
PersonCountry: a
},
contentType: "application/json; charset=utf-8",
success: function(data) {
alert(data);
var len = data.length;
var s = '<option value="-1">Please Select a City</option>';
for (var i = 0; i < data.length; i++) {
s += '<option value="' + data[i] + '">' + data[i] + '</option>';
}
$("#PersonCity").html(s);
},
failure: function(errMsg) {
alert(errMsg);
}
});
});
$(function() {
$.ajax({
type: "get",
url: "/Person/getTable",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function(data) {
debugger
var i = 1;
var j = 1;
$(data).each(
function() {
$('#mytable').append('<tr><td>' + this.Id + '</td><td id="name-' + this.name + '">' + this.name + '</td><td id="age-' + this.age + '">' + this.age + '</td><td>' + this.country + '</td><td>' + this.city + '</td><td> <button class="delbtn" id= "' + this.Id + '"> Delete </button> <button class="editbtn" id= "' + this.Id + '"> Edit </button> </td></tr>')
if (i == data.length) {
$(".delbtn").click(function() {
var del = $(this).attr('id');
$.ajax({
type: "get",
url: "/Person/delRow",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: {
del: del
},
success: function(data) {
alert(data);
$('#mytable').ajaxStart();
},
failure: function(errMsg) {
alert("failure")
}
})
});
$(".editbtn").click(function() {
var edit = $(this).attr('id');
$('#PersonId').val($(this).parent().siblings()[0].innerText);
$('#PersonName').val($(this).parent().siblings()[1].innerText);
$('#PersonAge').val($(this).parent().siblings()[2].innerText);
$("#upd").show();
$("#mytable").toggle();
});
}
i = i + 1;
})
}
})
});
$("#show").click(function() {
$("#mytable").toggle();
});
});
</script>
</body>
</html>