在保存按钮点击jQuery的对话框局部视图服务器端验证 [英] Jquery dialog partial view server side validation on Save button click
问题描述
我有一个显示数据的表。表的每一行都有Edit按钮。当点击编辑按钮会出现一个jQuery对话框，表格编辑用户信息保存和取消按钮。形式不过是一个局部视图按钮是局部视图的一部分。
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>
}
我的控制器的ActionResult是
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();
}
我想，在对话框中的任意按钮点击的方法应该是Ajax的指明分数和JSON-美化版。所以我试着做以下
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.
在我的web配置我也有验证正确的设置。
Also in my web config I have proper setting for validation
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
感谢
推荐答案
您应该尝试unobstrusive客户端验证示例
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;
});
查看
<div id="formContainer" data-url="@Url.Action("ActionName", "ControllerName",
new { area = "Area Name" })"></div>
<input id="BTN" type="button" value="Button" />
型号
public class SampleModule
{
[Required]
public String MyName { get; set; }
}
管窥
@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" />
}
参考
<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屋！
