Проверка на стороне клиента ASP.NET Core +: атрибуты data-val- * не создаются, если ViewBag и Model имеют одно и то же имя свойства

Question

Я понял в ASP.NET Core 2.2, что атрибуты data-val- * не генерируются, если ViewBag и Model имеют одно и то же имя свойства (в моем случае речь идет о собственно «Заголовке»). Из-за отсутствия атрибутов data-val- * проверка на стороне клиента не работает.

Это моя модель:

public class ActivityModel
{
    public int Id { get; set; }

    [Required]
    public string Title { get; set; }
}

Это мой взгляд:

@model ActivityModel

@{ ViewBag.Title = "This is my title"; }  

@using (Html.BeginForm("Create", "Activities"))
{
    @Html.EditorFor(model => model.Title)

    <input type="submit" value="Create" class="btn btn-default" />
}

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

Свойство ViewBag.Title используется в _layout.cshtml для отображения имени текущего заголовка.

Если я изменю имя свойства ViewBag или Model на другое, генерируются атрибуты data-val- *, и проверка на стороне клиента работает.

С технической точки зрения, что вызывает такое поведение?

Answer 1

Хотя я не мог понять точную причину этого, я могу предложить вам несколько обходных путей. Очевидным является назначение ViewBag значений после рендеринга входных данных

@using (Html.BeginForm("Create", "Activities"))
{
    @Html.EditorFor(model => model.Title)
    <input type="submit" value="Create" class="btn btn-default" />
} 

@{ ViewBag.Title = "This is my title"; }  

Или вы можете использовать input тег-помощник , поскольку он не страдает от этой проблемы

 <input asp-for="Title" />
 <input type="submit" value="Create" class="btn btn-default" />

Может быть интересно

Вы можете отключить добавление атрибутов проверки клиента, установив ViewContext.ClientValidationEnabled в false в окне бритвы (это довольно очевидно)

@{
    ViewContext.ClientValidationEnabled = false;
}

Если по какой-либо причине вам нужно отрендерить более 1 input для того же свойства с проверкой, следующий код

@Html.EditorFor(model => model.Title)
@Html.EditorFor(model => model.Title)

не будет проверять в течение секунды input

<input class="text-box single-line" data-val="true" data-val-required="The Title field is required." id="Title" name="Title" type="text" value="Activity">
<input class="text-box single-line" id="Title" name="Title" type="text" value="Activity">

Это происходит потому, что средство визуализации отслеживает отображаемые свойства и предотвращает добавление проверки более одного раза для одного и того же свойства. Свойства отслеживаются ViewContext.FormContext, поэтому можно контролировать это поведение. Перед добавлением атрибутов проверки средство визуализации проверяет, было ли свойство отображено, вызывая ViewContext.FormContext.RenderedField(propertyName) и если оно отображает свойство, оно вызывает ViewContext.FormContext.RenderedField(propertyName, true), чтобы пометить свойство как предоставленное. Но вы можете вызвать этот метод с false, как это

@Html.EditorFor(model => model.Title)
@{
    ViewContext.FormContext.RenderedField("Title", false);
}
@Html.EditorFor(model => model.Title)

, который дает следующий результат

<input class="text-box single-line" data-val="true" data-val-required="The Title field is required." id="Title" name="Title" type="text" value="Activity">
<input class="text-box single-line" data-val="true" data-val-required="The Title field is required." id="Title" name="Title" type="text" value="Activity">