您好我正在使用MVC 3(剃刀)为ajax向导做准备。我注意到的一个奇怪的现象是,当您将部分视图返回到UpdateTargetId时会插入视图,但不会添加/应用Unobtrusive JavaScript。如果我在ajax块之外加载局部视图,例如
@Html.Partial("Company")
它完美无缺,所以我没有错过任何标准库和 我的网络配置都很好。
所以此刻我有点难过。
我的观点如下:
@using(Ajax.BeginForm("Step", "Origination", new AjaxOptions { UpdateTargetId = "stepArea" })){
<div id="stepArea"></div>
<input id="btnSubmit" type="submit" value="submit" />
}
控制器:
public ActionResult Step(FormCollection formCollection)
{
if (this.Request.IsAjaxRequest())
{
switch ((TempData["step"] as string))
{
case "Company":
TempData["step"] = "Person";
return PartialView("Company");
case "Person":
TempData["step"] = "Pay";
return PartialView("Person");
case "Settlement":
return PartialView("Pay");
default:
TempData["step"] = "Company";
return PartialView("UserType");
}
}
return View();
}
我的问题是,部分视图的验证是否可以从部分刷新中实现/实现?
答案 0 :(得分:10)
阅读了几个论坛并做了一些实验。 最后一块拼图,在返回局部视图后导致验证工作。 jquery.validate.unobtrusive not working with dynamic injected elements
<script type="text/javascript">
function validateAjaxForm() {
$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
return $('#form').valid();
}
</script>
@{ Html.EnableClientValidation(true); }
@using (Ajax.BeginForm("Step", "Origination", new AjaxOptions { UpdateTargetId = "stepArea", OnBegin = "return validateAjaxForm();" }, new { id = "form" }))
{
<div id="stepArea"></div>
<input id="btnSubmit" type="submit" value="submit" />
}
完美无缺。
答案 1 :(得分:9)
如果在视图中为null,请尝试初始化FormContext。这应该为生成的控件添加不显眼的验证“data-val- *”属性
@{
if (Html.ViewContext.FormContext == null)
{
Html.ViewContext.FormContext = new FormContext();
}
}
答案 2 :(得分:0)
Nickz解决方案存在一个很大的问题,这让我拉出了我的头发,直到找到了不同的解决方法。
// forces creation of a new validator, which in turn causes
// an extra submit event handler to be attached!!!
$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
当您这样做时,每次调用$.validator.unobtrusive.parse()
时,新的事件处理程序将附加到表单的提交事件,同时保留旧的事件处理程序。这意味着当您多次运行上述代码时,在触发提交事件时,验证程序将不必要地多次运行。这给我带来了严重的性能问题。所以我最终编写了parse()
方法的自定义替代方法,我将其命名为updateParse
:
$.extend($.validator.unobtrusive, {
updateParse: function (selector) {
/// <summary>
/// Custom alternative for the built in method $.validator.unobtrusive.parse() which can updates an existing validator.
/// Use this only when a validator has not yet been initialized, i.e. when $.validator.unobtrusive.parse()
/// has not yet been called before.
/// This is intended for use after you dynamically add / remove / modify validatable elements to a form via AJAX.
/// Parses all the HTML elements in the specified selector. It looks for input elements decorated
/// with the [data-val=true] attribute value and enables validation according to the data-val-*
/// attribute values.
/// </summary>
/// <param name="selector" type="String">Any valid jQuery selector.</param>
var $forms = $(selector)
.parents("form")
.andSelf()
.add($(selector).find("form"))
.filter("form");
$(selector).find(":input[data-val=true]").each(function () {
$.validator.unobtrusive.parseElement(this, true);
});
$forms.each(function () {
var form = $(this);
var info = form.data("unobtrusiveValidation");
if (info) {
var validator = form.data("validator");
if (validator) {
validator.settings.rules = info.options.rules;
}
else {
throw "validator not yet initialized for this form yet -- use $.validator.unobtrusive.parse() instead";
}
}
});
}
这将更新现有验证程序对象的验证规则,而不是在添加额外的提交事件处理程序时强制创建新的验证程序。
在我的选项中,parse()
方法应该在验证器已经存在时才起作用。