Ненавязчивая проверка на стороне клиента ASP.NET MVC 3 с динамическим контентом - PullRequest
Новая
       12

Ненавязчивая проверка на стороне клиента ASP.NET MVC 3 с динамическим контентом

2 голосов
/ 25 мая 2011

Я включил ненавязчивую проверку на стороне клиента в своем приложении, и у меня есть (что-то похожее) на эту модель: 

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

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

У меня есть следующее / Home / Index view: 

@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>

Где / Домой / Тест так же просто, как return Partial("Model", new MyModel());

Но теперь проверка на стороне клиента больше не работает, и если я посмотрю на возвращенный DOM и HTML, атрибуты данных будут не визуализированы, т.е.

С Html.Partial () в / Home / Index 

<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 частично отображал атрибуты проверки и сообщения? Или что еще я могу делать не так?

Ответы [ 2 ]

1 голос
/ 29 сентября 2013

Вам не нужна форма в вашей части (иногда преимущество заключается в том, чтобы не допускать ее, например, для форм ajax и отсутствия необходимости повторной привязки к новой форме при каждой загрузке).

В вашей части просто добавьте 

{ ViewContext.FormContext = new FormContext()}

, и атрибуты будут записаны.

1 голос
/ 25 мая 2011

Ааа ... просто:)

@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" />
}
...