MVC 3 Razor @Html.ValidationMessageFor 无法通过 jquery.load() 部分加载

Question

我在这里整理了一个小例子只是为了重现这个问题。 我有一个强类型的部分视图 _Name.cshtml：

@model ValidationInPartial.ViewModels.MyViewModel

<h2>@ViewBag.Message</h2>

    <fieldset>
        <legend>Name</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.MyName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.MyName)
            @Html.ValidationMessageFor(model => model.MyName)
        </div>

        <a href="#" id="reload">Reload Name</a>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>

<script type="text/javascript">
    $(document).ready(function () {
        $("#reload").click(function () {
            $("#divName").load("Home/NameReload");
        });
    });
</script>

最初加载并显示在主 Index.cshtml 中

<div id="divForm">
    @using (Html.BeginForm()) {

        <div id="divName">
            @Html.Partial("_Name")
        </div>
    }
</div>

MyName 字段是必需的，并且通过 MyViewModel 中的 required 属性实现验证

namespace ValidationInPartial.ViewModels
{
    public class MyViewModel
    {
        [Required(ErrorMessage = "Please enter a Name.")]
        public string MyName { get; set; }
    }
}

第一次加载页面后，如果单击创建按钮，将该字段留空并显示验证消息“请输入名称”。显示在字段旁边，并且字段本身变成粉红色，这是预期的行为。 现在，通过单击“重新加载名称”链接，该链接将进行 ajax 调用 (jquery.load(...))，部分内容将重新加载，以下是控制器代码：

public PartialViewResult NameReload()
{
    MyViewModel myViewModel = new MyViewModel();
    ViewBag.Message = "Name Reloaded";
    return PartialView("_Name", myViewModel);
}

这次，如果您单击“创建”按钮，则将字段留空，验证尽管该字段变成粉红色，但该字段旁边未出现消息。 事实证明，当重新加载部分时， @Html.ValidationMessageFor 不会第一次呈现验证消息。

这是我使用的 jquery 文件

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

我想知道这是否是 Razor 引擎渲染 @Html.ValidationMessageFor 的方式中的错误，或者是 jquery 的问题？ 知道为什么会发生这种情况吗？

我还在某处读到，ajax 调用会丢失页面的所有脚本，事实上，我必须将任何 javascript 代码保留在部分中，以便可以再次渲染和使用它们。

与此同时，我找到了一种解决方法，即在部分中手动渲染应该由 @Html.ValidationMessageFor 渲染的内容，即：

<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="MyName"></span>

但是，此解决方法意味着如果我们更改验证类型或仅更改必需属性内的验证消息在ViewModel中，我们需要修改视图中这段硬编码的html。

Answer 1

@NickBork 这里有一个很好的答案。关键是ASP.NET的MVC渲染引擎如果认为不存在表单就不会输出验证脚本。给出的示例是黑客将其放入表单中，然后从中选择 HTML 的内部部分，然后返回，实质上丢弃了表单的外部包装。

还有另一种方法可以让您获得视图：

ViewContext.FormContext = new FormContext();

使用这种方法，实际上不会有 FORM 代码输出，但会有验证标记。

谢谢，
约翰

Answer 2

除非您的字段包含在 FORM 中，否则不会呈现验证标记（跨度标记、自定义字段属性等）。验证插件本身不适用于表单之外的元素。

当 ASP.NET 呈现部分视图时，控件不在表单内，因此不会呈现元素。

当您加载部分内容时，您需要使用 jQuery 选择器来解析 HTML。

在下面的示例中，我在包含行的父视图页面上有一个 TBODY。当我需要添加其他行时，我会调用一个包含表单、表、tbody 和行集合的视图。

$.ajax({
    type: "POST",
    url: "/controller/action",
    data: ({Your: 'dataHere'}),
    dataType: "html",
    success:
        function(response){
            $('tbody').append($('tbody',$(response)).html());

            //The validation plugin can't bind to the same form twice.
            //We need to remove existing validators
            $('form').removeData("validator");

            //Refresh the validators
            $.validator.unobtrusive.parse(document);
        },
    error:
        function(){
            alert('An error occured while attempting to add the new content');
        }
});

请注意，我使用 jQuery 选择器来选择使用 AJAX 加载的 View/PartialView 内部的行：

$('tbody',$(response)).html()

包装器的其余部分只是将 AJAX View/PartialView 中的行附加到调用父级 tbody：

$('tbody').append($('tbody',$(response)).html());

还有一些注意事项，在表单上运行验证器插件后，如果不重新添加它就无法再次调用它（请参阅jquery.validate.unobtrusive 不适用于动态注入元素）

为了解决这个问题，我首先调用以下方法来删除所有验证器：

$('form').removeData("validator");
$("form").removeData("unobtrusiveValidation");

然后使用以下命令刷新验证器：

$.validator.unobtrusive.parse(document);

Answer 3

我不记得在哪里找到了解决方案。原因是因为您正在将 PartialView 加载到已由 jquery.validator.unobtrusive 库解析的视图中。您需要重新解析不显眼的库

    function ReparseValidation(){
       jQuery.validator.unobtrusive.parse("#yourcontainer");
    }