Question

我在我的应用程序中启用了不引人注意的客户端验证，并且我有（类似的）此模型：

public class MyModel
{
    [Required]
    public string Name { get; set; }

    [Range(0, 100)]
    public int? Age { get; set; }
}

我有以下/主页/索引视图：

@model MyModel

@using (Html.BeginForm("Test", "Home"))
{
    <div id="my-form"> 
        @Html.Partial("Model")
    </div>
    <input type="submit" value="Go" />
}

使用部分“模型”：

@model MyModel

<div>
    @Html.LabelFor(x => x.Name)
    @Html.TextBoxFor(x => x.Name)
    @Html.ValidationMessageFor(x => x.Name)
</div>
<div>
    @Html.LabelFor(x => x.Age)
    @Html.TextBoxFor(x => x.Age)
    @Html.ValidationMessageFor(x => x.Age)
</div>

一切都很荣幸，我得到了很好的验证错误消息。

现在我想动态加载表单/部分“模型”，即远程@ Html.Partial并添加以下内容：

<a href="#" id="load-form">Load the form</a>

<script type="text/javascript">
    $(function () {
        $("#load-form").click(function () {
            $.post(
                "/Home/Test",
                null,
                function (result) {
                    $("#my-form").html(result);
                    $.validator.unobtrusive.parse($("#my-form"));
                },
                "html");
        });
    });
</script>

其中/ Home / Test就像return Partial("Model", new MyModel());

一样简单

但现在客户端验证不再有效，如果我查看返回的DOM和HTML，数据属性不呈现，即：

在/ Home / Index

中使用Html.Partial（）

<div>    
    <label for="Name">Name</label>    
    <input data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />    
    <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>    
</div>    
<div>    
    <label for="Age">Age</label>    
    <input data-val="true" data-val-number="The field Age must be a number." data-val-range="The field Age must be between 0 and 100." data-val-range-max="100" data-val-range-min="0" id="Age" name="Age" type="text" value="" />    
    <span class="field-validation-valid" data-valmsg-for="Age" data-valmsg-replace="true"></span>    
</div>

XHR回复

<div>
    <label for="Name">Name</label>
    <input id="Name" name="Name" type="text" value="" />        
</div>
<div>
    <label for="Age">Age</label>
    <input id="Age" name="Age" type="text" value="" />    
</div>

即使我在部分视图中明确添加Html.EnableClientValidation();和Html.EnableUnobtrusiveJavaScript();，也不会呈现验证内容。

如何让我的AJAX部分呈现验证属性和消息？或者我还能做些什么呢？

Answer 1

啊......简单:)）

@Html.BeginForm()必须在同一部分（我认为这是公平的，因为我们在表单上进行验证），所以：

/主页/索引视图变为：

@model MyModel

<div id="my-form"> 
    @Html.Partial("Model")
</div>

使用部分“模型”：

@model MyModel

@using (Html.BeginForm("Test", "Home"))
{
    <div>
        @Html.LabelFor(x => x.Name)
        @Html.TextBoxFor(x => x.Name)
        @Html.ValidationMessageFor(x => x.Name)
    </div>
    <div>
        @Html.LabelFor(x => x.Age)
        @Html.TextBoxFor(x => x.Age)
        @Html.ValidationMessageFor(x => x.Age)
    </div>

    <input type="submit" value="Go" />
}

Answer 2

你不需要你的部分形式（有时保留它的优势，例如ajax形式，而不必在每次加载时重新绑定到新形式）。

在你的部分中添加

{ ViewContext.FormContext = new FormContext()}

并且将写出属性。

ASP.NET MVC 3使用动态内容进行不显眼的客户端验证

2 个答案: