$('form').submit(function () {
value = true;
var schoolName = $('#addSchoolName').val();
if (schoolName.trim() == '') {
$('#addSchoolName').addClass('border border-danger');
value = false;
}
if (value) {
return true;
}
else { return false;}
});
$("form").bind('ajax:complete', function () {
window.location.reload();
});
$('#close').on('click', function () {
$('#addSchoolName').removeClass('border border-danger');
$('#addSchoolName').val('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="addSchool" tabindex="-1" role="dialog" aria-labelledby="addSchoolTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered cls" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title" id="addSchoolTitle">Add School Details</label>
</div>
<form asp-action="AddNewSchool" asp-controller="School" asp-antiforgery="true" method="post">
<div class="modal-body form-group row align-items-center">
<div class="col-md-4">
<label for="Name">School Name</label>
</div>
<div class="col-md-8">
<input class="form-control" name="Name" id="addSchoolName" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary " id="close" data-dismiss="modal">Close</button>
<button type="submit" id="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
我在模式内部使用表单并提交该表单。我想重新加载我的页面,以便在提交表单后,该模式后面的列表将更新。我不想使用Ajax进行表单提交。
<div class="modal fade" id="addSchool" tabindex="-1" role="dialog" aria-labelledby="addSchoolTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered cls" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title" id="addSchoolTitle">Add School Details</label>
</div>
<form asp-action="AddNewSchool" asp-controller="School" asp-antiforgery="true" method="post">
<div class="modal-body form-group row align-items-center">
<div class="col-md-4">
<label for="Name">School Name</label>
</div>
<div class="col-md-8">
<input class="form-control" name="Name" id="addSchoolName" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary " id="close" data-dismiss="modal">Close</button>
<button type="submit" id="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
现在写,我将在表单上应用此验证。
@section scripts{
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$('form').submit(function () {
value = true;
var schoolName = $('#addSchoolName').val();
if (schoolName.trim() == '') {
$('#addSchoolName').addClass('border border-danger');
value = false;
}
if (value) {
return true;
}
else { return false;}
});
$("form").bind('ajax:complete', function () {
window.location.reload();
});
$('#close').on('click', function () {
$('#addSchoolName').removeClass('border border-danger');
$('#addSchoolName').val('');
});
</script>
我不想使用ajax调用来提交表单,我想在模态内部提交表单后重新加载页面,以便该模态后面的列表将被更新。
答案 0 :(得分:0)
我有点困惑,因为默认情况下应该在Submit函数上重新加载它。这就是为什么我们在末尾使用event.preventDefault
的原因。但是如果您愿意,总会有location.reload