2

我在我的应用程序中启用了不显眼的客户端验证，并且我有（类似的）这个模型：

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

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

我有以下 /Home/Index 视图：

@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，则不会呈现 data- 属性，即：

在 /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 部分呈现验证属性和消息？或者我还能做错什么？

4

2 回答 2

1

您不需要部分表单（有时将其排除在外是一个优势，例如 ajax 表单，并且不必在每次加载时重新绑定到新表单）。

在你的部分简单地添加

{ ViewContext.FormContext = new FormContext()}

并且属性将被写出。

于 2013-09-29T06:22:45.437 回答
1

啊...简单:)

@Html.BeginForm()必须在同一个部分中（我想这很公平，因为我们正在对表单进行验证），所以：

/Home/索引视图变为：

@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" />
}
于 2011-05-25T13:20:05.680 回答