提问人：ahmed abdelaziz 提问时间：11/13/2023 最后编辑：ahmed abdelaziz 更新时间：11/13/2023 访问量：20
发出消息验证（员工存在之前）显示多次基于按钮点击提交？
Issue message validation (Employee Exist Before ) display multi time based on button click submit?
问：
我正在处理 asp.net mvc 应用程序 Ajax 请求调用，如果我单击按钮提交，我会多次面临问题消息甜蜜警报显示不止一次
如果我再次按下相同的按钮，则为相同的请求提交，它将显示（消息 Employee Exist Before）两次
如果我再次为相同的请求按下相同的按钮提交按钮，它将显示消息验证（消息员工存在之前）3 次
正确或预期的行为
当单击“提交”按钮和“员工存在之前”时，仅显示一次消息验证（消息“员工存在之前”）。
为什么会发生这种情况以及如何防止多次显示相同的消息
$("#ResignationApp").submit(function (e) {
e.preventDefault();
var formData = $(this).serialize();
console.log("data is" + formData)
$.ajax({
type: "POST",
dataType: 'json',
url: '@Url.Action("RequesterIndex", "Resignation")',
data: formData,
success: function (response) {
for (let item of response) {
if (item.Key === "success") {
success = item.Value;
}
if (item.Key === "message") {
message = item.Value;
}
}
if (success) {
Swal.fire({
icon: 'success',
title: 'Submition Request',
text: message
}).then((result) => {
if (result.isConfirmed) {
var url = '@Url.Action("IndexResignation", "Home")' + '?filenumber=' + empidval;
window.open(url, '_self');
}
});
} else {
Swal.fire({
icon: 'error',
title: 'Resignation Submission Form',
text: 'Employee Exist Before'
});
return false;
}
},
error: function (error) {
var url = '@Url.Action("UnauthorizedUser", "Home")' + '?filenumber=' + empidval;
window.open(url, '_self');
}
});
});
[HttpPost]
public JsonResult RequesterIndex(ResignationRequester resignationRequester)
{
dynamic responseData = new ExpandoObject();
responseData.success = false;
responseData.message = "";
var filenumber = resignationRequester.EmpID;
if (Session[SessionKeys.UserCode] != null)
{
JDEUtility jde = new JDEUtility();
if (ModelState.IsValid)
{
int checkEmployeeNoExist = jde.CheckEmployeeExistOrNot(resignationRequester.EmpID);
if (checkEmployeeNoExist >= 1)
{
responseData.success = false;
responseData.message = "Employee Exist Before";
return Json(responseData);
}
try
{
Workforce.InsertToReignation(resignationRequester, JoinedDate, (string)Session[SessionKeys.Username], (DateTime)Session[SessionKeys.LastWorkingDate], noticeperiod, (int)Session[SessionKeys.UserCode]);
}
catch (Exception ex)
{
responseData.success = false;
responseData.message = "Create Not Done Correctly";
return Json(responseData);
}
if (string.IsNullOrEmpty(ViewBag.errorMsg))
{
responseData.success = true;
responseData.message = "Resignation Submission form Created successfully";
return Json(responseData);
}
}
else
{
responseData.success = false;
var errors = ModelState.Select(x => x.Value.Errors)
.Where(y => y.Count > 0)
.ToList();
responseData.message = "Some Required Fields Not Added";
return Json(responseData);
}
}
else
{
responseData.success = false;
responseData.message = "No Data For This File No";
return Json(responseData);
}
return Json(responseData);
}
更新的帖子
我根据你的帖子回答尝试 但没有任何改变 按下相同按钮时，消息仍显示两个时间 多次 .
我尝试什么
const $submitBtn = $('#btnsubmit');
$("#ResignationApp").submit(function (e) {
e.preventDefault();
// Serialize the form data
$submitBtn.prop('disabled', true);
var formData = $(this).serialize();
console.log("data is" + formData)
$.ajax({
type: "POST",
dataType: 'json',
url: '@Url.Action("RequesterIndex", "Resignation")',
data: formData,
success: function (response) {
for (let item of response) {
if (item.Key === "success") {
success = item.Value;
}
if (item.Key === "message") {
message = item.Value;
}
}
if (success) {
Swal.fire({
icon: 'success',
title: 'Submition Request',
text: message
}).then((result) => {
if (result.isConfirmed) {
var url = '@Url.Action("IndexResignation", "Home")' + '?filenumber=' + empidval;
window.open(url, '_self');
}
});
} else {
if (message === "Employee Exist Before") {
Swal.fire({
icon: 'error',
//width: '850px',
//height: '150px',
//customClass: 'swal-wide',
title: 'Resignation Submission Form',
text: 'Employee Exist Before'
});
return false;
}
else {
Swal.fire({
icon: 'error',
title: 'Resignation Submission Form',
text: message
});
return false;
}
}
console.log("errorMsg is" + errorMsg);
},
error: function (error) {
var url = '@Url.Action("UnauthorizedUser", "Home")' + '?filenumber=' + empidval;
window.open(url, '_self');
}
}).always(() => {
// re-enable the submit button...
$submitBtn.prop('disabled', false);
});
});
答：
1赞
Rory McCrossan
11/13/2023
#1
从错误消息中可以看出，您的服务器端代码已经足够强大，可以处理具有相同内容的重复请求。因此，您只需要更新您的 UI 以防止用户能够成功单击提交按钮。
执行此操作的最简单方法是在 AJAX 请求运行时禁用该按钮，如下所示：
const $submitBtn = $('#yourSubmitButton');
$("#ResignationApp").on('submit', e => {
e.preventDefault();
// disable the button when the AJAX request is sent
$submitBtn.prop('disabled', true);
$.ajax({
// ajax setup...
}).done(response => {
// 'success' handler here...
}).fail(err => {
// 'error' handler here...
}).always(() => {
// re-enable the submit button...
$submitBtn.prop('disabled', false);
});
});
请注意，该按钮将在处理程序中重新启用。这样，无论 AJAX 请求是成功还是失败，该按钮始终会重新启用。always
另请注意，最好在按钮内部/旁边显示一个加载微调器，以显示活动仍在发生，并且该按钮是出于某种目的而不是错误而禁用的。
评论
0赞
ahmed abdelaziz
11/13/2023
你能检查更新的答案吗
评论