如果我有一个在 jQuery UI 对话框中运行的表单,我该如何处理服务器端验证错误?
-
10-07-2019 - |
题
用户发布表单后,我的控制器中有以下代码,但如果验证失败(_applicationValidator.Validate),我通常会重新加载“编辑”视图,但在这种情况下,我想保持对话框打开并仅在内部显示这些错误对话框。
控制器代码:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Update(ApplicationUpdater applicationUpdater_)
{
if (_applicationValidator.Validate(applicationUpdater_, ModelState, ValueProvider))
{
_repo.UpdateApplication(applicationUpdater_);
ApplicationsViewModel vm = new ApplicationsViewModel();
vm.Applications = _repo.GetApplications();
return View("Index", vm);
}
else
{
ApplicationViewModel vm = GetApplicationVM();
return View("Edit", vm);
}
}
查看代码(jQuery)
$(".showEditPopup").click(function() {
$.post("Applications/ShowEdit",
{ recnum: $(this).parents('tr:first').attr("recnum") },
function(htmlResult) {
$("#EditUserControlDiv").remove();
$("#container").append(htmlResult);
$("#container select[multiple]").asmSelect();
$("#EditUserControlDiv").dialog(
{
height: 675,
width: 650,
modal: true
}
);
}
);
});
解决方案
正如所说
但在这种情况下 我想让 dialop 保持打开状态 并简单地在对话框中显示这些错误
好的。
打开对话框后,您必须
- 隐藏之前的错误消息
...
open: function(event, ui) {
$(".error").css("display", "none");
}
单击对话框按钮后,您必须
- 禁用 JQuery 用户界面
- 显示“正在加载...”图像
- 发送表格
...
$("#loading").css("display", "block");
panel.dialog("disable");
panel.dialog("option", "disabled", true);
加载响应后(您可以使用 JSON 作为响应),您必须
- 检查是否有错误。
...
// var response plays the role of JSON response
var response = {
"errors":[
{
"property-name":"name",
"error":"Name is required"
},
{
"property-name":"age",
"error":""
}
]
};
var hasErrors = false;
for(var i = 0; i < response.errors.length; i++) {
if(response.errors[i].error != "") {
hasErrors = true;
$("#" + response.errors[i]["property-name"] + "-error")
.text(response.errors[i]["error"])
.css("display", "block");
}
}
if(!hasErrors) {
panel.dialog("close");
alert("success form!");
} else {
panel.dialog("enable");
panel.dialog("option", "disabled", false);
}
这里 你可以在行动中看到
请注意,您有默认行为。所以你可以把它放在外部函数中
其他提示
最方便:
- 禁用所有输入元素
- 向
Update
功能 - 在您的 UI 中处理服务器响应。例如。关闭 jQuery UI 表单,或显示验证错误。
改变你的 Update
函数返回一些包装对象,例如:
return new { Succeeded = false, ValidationMessages = new [] { "Incorrect username" } };
$.post(/* postdata */, function(resp) {
if(resp.Succeeded) //close jQuery UI dialog
else {
for(var i = 0; i < resp.ValidationMessages; i++) alert(resp.ValidationMessages[i]));
}
});
您可以通过查询所有输入/文本区域等来构建您的帖子数据。元素,并将它们保存到数组中,类似于(未经测试):
var data = [];
$('input').each(function() {
data.push([ $(this).id, $(this).val() ]);
});
您可以使用 jQuery表单插件来创建编辑表单的Ajax版本:
$(".showEditPopup").click(function() {
function popDialog(htmlResult) {
$("#EditUserControlDiv").remove();
$("#container").append(htmlResult);
$("#container form").ajaxForm(function(result) {
// There may be an easier way (like testing for a
// certain string in the result)
// to detect the need to "repop"
if ($(result).find('form').length) {
popDialog(result);
} else {
$("#EditUserControlDiv").dialog('close'); // or remove
}
});
$("#container select[multiple]").asmSelect();
$("#EditUserControlDiv").dialog(
{
height: 675,
width: 650,
modal: true
}
);
}
$.post("Applications/ShowEdit",
{ recnum: $(this).parents('tr:first').attr("recnum") },
function(result) { popDialog(result); }
);
});
不隶属于 StackOverflow