单击“保存"按钮时，Jquery 对话框部分视图服务器端验证 [英] Jquery dialog partial view server side validation on Save button click
本文介绍了单击“保存"按钮时，Jquery 对话框部分视图服务器端验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个显示数据的表格.表格的每一行都有编辑按钮.单击编辑按钮时，会出现一个带有表单的 jquery 对话框，用于编辑用户信息以及保存和取消按钮.表单只不过是一个局部视图按钮是局部视图的一部分.
单击编辑按钮时，我会得到具有正确值的对话框.当没有验证错误(服务器端验证)时，保存按钮工作正常，但一旦出现验证错误，部分页面将在新页面中打开.取消工作正常.我的部分观点
@using (Ajax.BeginForm("EditAdmin", "AdminSearchResult", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "editPanel" })){<div class="editPanel">//这是我的 html 控件所在的位置<button name="button" value="save" class="button" id="SubmitButton">保存</button> <button name="button" value="cancel" class="button">Cancel</button>}
我的控制器 actionResult 是
[HttpPost]public ActionResult EditAdmin(int id, Administration admin, string button, bool isEdit = false){如果(按钮==保存"){var 错误 = admin.Validate(new ValidationContext(admin, null, null));如果(错误.计数()== 0){return RedirectToAction("AdminSearchResult", "AdminSearchResult");}别的{foreach(错误中的var错误)foreach (var memberName in error.MemberNames)ModelState.AddModelError(memberName, error.ErrorMessage);返回 PartialView("EditAdmin", admin);}}如果(按钮==取消"){return RedirectToAction("AdminSearchResult", "AdminSearchResult");}返回视图()；}我认为对话框中的任何按钮单击方法都应该是 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 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();变量管理员 = {身份证:身份证，姓氏: lName,中间名:mName，名字: fName,用户名:uName，电子邮件地址:电子邮件，IsActive:活跃，用户角色:uRole}$.ajax({url: '@Url.Action("EditAdmin", "AdminSearchResult")',类型:'POST'，数据类型:'html'，contentType: "application/json; charset=utf-8",数据:'JSON.stringify(管理员)'，成功:功能(结果){警报(结果)；如果(结果.成功){警报(成功")；} 别的 {警报(失败")；$('#editPanel').html(result);}}});返回假；});});</脚本问题是在 $("#SubmitButton").click(function () 上添加 $.ajax 调用后，按钮在单击时会执行任何操作.我希望它在没有服务器和客户端验证错误时保存发生，如果有错误消息应显示在对话框中.
也在我的网络配置中，我有正确的验证设置
<add key="ClientValidationEnabled" value="true"/><add key="UnobtrusiveJavaScriptEnabled" value="true"/></appSettings> 谢谢
解决方案
您应该尝试不引人注目的客户端验证示例
JQuery
$('#BTN').click(function () {var $formContainer = $('#formContainer');var url = $formContainer.attr('data-url');$formContainer.load(url, function () {var $form = $('#myForm');$.validator.unobtrusive.parse($form);$form.submit(function () {var $form = $(this);如果 ($form.valid()) {$.ajax({网址:网址，异步:真，类型:'POST'，数据:JSON.stringify("你的对象或参数"),beforeSend: 函数 (xhr, opts) {},contentType: '应用程序/json;字符集=utf-8',完成:函数(){}，成功:功能(数据){$form.html(数据);$form.removeData('验证器');$form.removeData('unobtrusiveValidation');$.validator.unobtrusive.parse($form);}});}返回假；});});返回假；});查看
<div id="formContainer" data-url="@Url.Action("ActionName", "ControllerName",new { area = "区域名称" })"></div><input id="BTN" type="button" value="Button"/>模型
公共类 SampleModule{[必需的]公共字符串我的名字 { 获取；放;}}部分视图
@using (Html.BeginForm("Action Name", "Controller Name", FormMethod.Post,新 { id = "myForm" })){@Html.LabelFor(i => i.MyName)@Html.TextBoxFor(i => i.MyName)@Html.ValidationMessageFor(i => i.MyName)<p id="getDateTimeString"></p><input type="button" value="Button"/>}参考资料
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script><script src="/Scripts/jquery.validate.js" type="text/javascript"></script><script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript">I have a table that displays data. Each row of table has Edit button. When edit button is clicked a jquery dialog appears with Form for editing the user info and save and cancel button . The form is nothing but a partial view buttons are part of partial view.
<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');
}
});
on clicking edit button I get dialog with proper values. When there is no validation error(Server side validation) the save button works fine but once there is a validation error the partial page opens in a new page. the Cancel works fine. My partial view
@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>
}
my controller actionResult is
[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();
}
I figured that any button click method in dialog should be a ajax-ified and json-ized. So i tried doing the following
<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
The issue is the after adding the $.ajax call on $("#SubmitButton").click(function () the button just does do anything when clicked. I want it to save when no server and client side validation error occurs and if there is the error messages should be displayed in the dialog.
Also in my web config I have proper setting for validation
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
Thanks
解决方案
You should try unobstrusive Client side Validation Example
JQuery
$('#BTN').click(function () {
var $formContainer = $('#formContainer');
var url = $formContainer.attr('data-url');
$formContainer.load(url, function () {
var $form = $('#myForm');
$.validator.unobtrusive.parse($form);
$form.submit(function () {
var $form = $(this);
if ($form.valid()) {
$.ajax({
url: url,
async: true,
type: 'POST',
data: JSON.stringify("Your Object or parameter"),
beforeSend: function (xhr, opts) {
},
contentType: 'application/json; charset=utf-8',
complete: function () { },
success: function (data) {
$form.html(data);
$form.removeData('validator');
$form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse($form);
}
});
}
return false;
});
});
return false;
});
View
<div id="formContainer" data-url="@Url.Action("ActionName", "ControllerName",
new { area = "Area Name" })"></div>
<input id="BTN" type="button" value="Button" />
Model
public class SampleModule
{
[Required]
public String MyName { get; set; }
}
Partial View
@using (Html.BeginForm("Action Name", "Controller Name", FormMethod.Post,
new { id = "myForm" }))
{
@Html.LabelFor(i => i.MyName)
@Html.TextBoxFor(i => i.MyName)
@Html.ValidationMessageFor(i => i.MyName)
<p id="getDateTimeString"></p>
<input type="button" value="Button" />
}
References
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript">
</script>
这篇关于单击“保存"按钮时，Jquery 对话框部分视图服务器端验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
