我有一个显示数据的表格。每行表格都有编辑按钮。单击编辑按钮时，会出现一个带有表单的 jquery 对话框，用于编辑用户信息并保存和取消按钮。表单只不过是部分视图按钮是部分视图的一部分。
<button name="button" class="button" id="editCurrentRow" onclick="EditCurrentRow(@item.ID); return false;">
$("#editResult").dialog({
title: 'Edit Admin',
autoOpen: false,
resizable: false,
height: 500,
width: 600,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(this).load('@Url.Action("EditAdmin", "AdminSearchResult")', { id: 1 , isEdit : true }); // pass par from function EditCurrentRow(par) in pacle of 1
},
close: function (event, ui) {
$(this).dialog('close');
}
});
单击编辑按钮时，我会得到具有正确值的对话框。当没有验证错误（服务器端验证）时，保存按钮工作正常，但一旦出现验证错误，部分页面将在新页面中打开。取消工作正常。我的部分看法
@using (Ajax.BeginForm("EditAdmin", "AdminSearchResult", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "editPanel" }))
{
<div class="editPanel">
// this is where my html control is
<button name="button" value="save" class="button" id="SubmitButton">Save</button>
<button name="button" value="cancel" class="button">Cancel</button>
</div>
}
我的控制器 actionResult 是
[HttpPost]
public ActionResult EditAdmin(int id, Administration admin, string button, bool isEdit = false)
{
if (button == "save")
{
var errors = admin.Validate(new ValidationContext(admin, null, null));
if (errors.Count() == 0)
{
return RedirectToAction("AdminSearchResult", "AdminSearchResult");
}
else
{
foreach (var error in errors)
foreach (var memberName in error.MemberNames)
ModelState.AddModelError(memberName, error.ErrorMessage);
return PartialView("EditAdmin", admin);
}
}
if (button == "cancel")
{
return RedirectToAction("AdminSearchResult", "AdminSearchResult");
}
return View();
}
我认为对话框中的任何按钮单击方法都应该是 ajax 化和 json 化的。所以我尝试执行以下操作
<script src="../../Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#SubmitButton").click(function () {
var id = $('#txtID').val();
var lName = $('#txtLastName').val();
var mName = $('#txtMiddleName').val();
var fName = $('#txtFirstName').val();
var uName = $('#txtUserName').val();
var email = $('#txtEmail').val();
var uRole = $('#ddlUserRoleName').val();
var active = $('#chkActive').val();
var admin = {
ID: id,
LastName: lName,
MiddleName: mName,
FirstName: fName,
userName: uName,
emailAddress: email,
IsActive: active,
UserRole: uRole
}
$.ajax({
url: '@Url.Action("EditAdmin", "AdminSearchResult")',
type: 'POST',
dataType: 'html',
contentType: "application/json; charset=utf-8",
data: 'JSON.stringify(admin)',
success: function (result) {
alert(result);
if (result.success) {
alert("Success");
} else {
alert("Fail");
$('#editPanel').html(result);
}
}
});
return false;
});
});
</script
问题是在 $("#SubmitButton").click(function () 上添加 $.ajax 调用后，该按钮在单击时会执行任何操作。我希望它在没有发生服务器和客户端验证错误时保存，如果有错误消息应该显示在对话框中。
同样在我的网络配置中，我有适当的验证设置
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
谢谢
