C# 使用jquery ajax添加的部分视图中的验证问题
我读了很多帖子,但无法解决我的问题 我有一个视图,它在点击时有一个添加按钮。我显示的是部分视图,该部分视图有一个用于添加记录的表单,该表单不验证客户端。我正在使用jquery验证,并且在打开部分视图的主视图中添加了js文件C# 使用jquery ajax添加的部分视图中的验证问题,c#,jquery,asp.net-mvc-4,C#,Jquery,Asp.net Mvc 4,我读了很多帖子,但无法解决我的问题 我有一个视图,它在点击时有一个添加按钮。我显示的是部分视图,该部分视图有一个用于添加记录的表单,该表单不验证客户端。我正在使用jquery验证,并且在打开部分视图的主视图中添加了js文件 <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content(
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
水平视图:
<div id="Div1">
<a id="lnkAdd">
<div>Add</div>
</a>
</div>
$("#lnkAdd").click(function () {
$.ajax({
url: '@Url.Action("MethodName", "ControllerName")',
type: "POST",
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
}).done(function () {
}).success(function (dv) {
$("#Div1").html(dv);
})
});
[Authorize]
public PartialViewResult MethodName()
{
return PartialView("_PartialViewName");
}
<div id="UsersDiv">
<div class="grid-background" style="border: 1px solid #8dc2f5;">
@using (Html.BeginForm("AddRecord", "ControllerName"))
{
<div class="form-bg" style="border: 0px; margin-top: 0px; width: 966px;">
<div class="form-field-bg">
@Html.LabelFor(m => m.FirstName)
@Html.TextBoxFor(m => m.FirstName, new { @class = "label-class" })
@Html.ValidationMessageFor(m => m.FirstName, "", new { @class = "validation-class" })
</div>
<input type="submit" value="Save" id="btnSaveUsers" name="AddRecord" class="signup-button" />
}
@使用(Html.BeginForm(“AddRecord”、“ControllerName”))
{
@LabelFor(m=>m.FirstName)
@TextBoxFor(m=>m.FirstName,新的{@class=“label class”})
@Html.ValidationMessageFor(m=>m.FirstName,“,new{@class=“validation class”})
}
只有在触发document.ready事件时才会连接验证程序,对于动态内容,您必须手动触发它们 将成功处理程序更改为:
.success(function (dv) {
$("#Div1").html(dv);
$("form").data("validator", null);
$.validator.unobtrusive.parse($("form"));
})
您可以在服务器端验证模型,并在客户端附加错误
public PartialViewResult _CreateSupplier()
{
return PartialView(new Supplier());
}
[HttpPost]
public JsonResult _CreateSupplier(Supplier model)
{
//Validation
return Json(new
{
status = transactionStatus,
modelState = ModelState.GetModelErorrs()
}, JsonRequestBehavior.AllowGet);
}
FormPostjQuery方法
$('#create-supplier').submit(function (e) {
e.preventDefault();
var $form = $(this);
if (!ModelIsValid($form))
return;
AjaxPost($form.serialize(), '@Url.Action("_CreateSupplier")', function (result) {
if (result.status == 0) {
$form[0].reset();
//Success
var grid = $("#gridSupplier").data("kendoGrid");
grid.dataSource.read();
} else if (result.status == 1)
AddFormErrors($form, result);
else if (result.status == 2)
//error;
});
});
检查模型方法是否有效,如果无效,则向表单中添加错误
function ModelIsValid(form) {
var validator = $(form).validate(); // obtain validator
var anyError = false;
form.find("input").each(function () {
if (!validator.element(this)) { // validate every input element inside this step
anyError = true;
}
});
if (anyError)
return false; // exit if any error found
return true;
}
function AddFormErrors(form, errors) {
for (var i = 0; i < errors.modelState.length; i++) {
for (var j = 0; j < errors.modelState[i].errors.length; j++) {
var val = $(form).find("[data-valmsg-for='" + errors.modelState[i].key + "']");
if (val.html().length > 0) {
$(form).find("[for='" + errors.modelState[i].key + "']").html(errors.modelState[i].errors[j]);
} else {
val.html('<span for="' + errors.modelState[i].key + '" generated="true" class="" style="">' + errors.modelState[i].errors[j] + '</span>');
}
}
}
}
最后一个检查返回模型状态错误的c#扩展方法
public static IEnumerable<object> GetModelErorrs(this ModelStateDictionary modelState)
{
return modelState.Keys.Where(x => modelState[x].Errors.Count > 0)
.Select(x => new {
key = x,
errors = modelState[x].Errors.Select(y => y.ErrorMessage).ToArray()
});
}
公共静态IEnumerable GetModelErrors(此ModelStateDictionary modelState)
{
返回modelState.Keys.Where(x=>modelState[x].Errors.Count>0)
.选择(x=>new{
键=x,
errors=modelState[x].errors.Select(y=>y.ErrorMessage).ToArray()
});
}
是否包含jQuery文件
<script src="@Url.Content("~/Scripts/jquery-2.0.0.min.js")" type="text/javascript"></script>
我修复了在渲染部分内容后添加以下代码的问题
@Scripts.Render("~/bundles/jqueryval")
我不知道你是否能写既成功又成功!!!它给我错误UncaughtTypeError:无法读取chrome中未定义的属性“unobtrusive”。
@Scripts.Render("~/bundles/jqueryval")