我有一个表格，显示数据。表格的每一行都有编辑按钮。当点击编辑按钮时，会出现一个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>
}
我的控制器Action结果是
[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
问题在于添加了 $.ajax 调用后，在 $("#SubmitButton").click(function () 中，当点击按钮时它根本不起作用。我希望它在没有服务器和客户端验证错误发生时保存，并且如果出现错误消息，应该在对话框中显示。
另外，在我的 web.config 文件中，我已经设置了适当的验证设置。
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
谢谢
