使用局部视图时未显示表单验证消息答案

【问题标题】：Form validation message not showing while using partial view使用局部视图时未显示表单验证消息
【发布时间】：2018-05-07 10:39:14
【问题描述】：

我正在开发一个 ASP.NET core 2.0 应用程序，我在其中创建了一个表单来输入数据。在检查验证是否有效时，我注意到没有为我的视图模型的必需属性显示验证消息。

当所需输入为空并且我按保存时无法继续，因此需要输入但没有消息可看到。

我的表单视图的视图模型有一个视图模型列表作为属性，因为必须动态更改部分表单。

这是我的主视图模型：

public class SettingsViewModel
{
    public List<KeyValueViewModel> KeyValuePairs { get; set; }
    public string Description { get; set; }
}

这里是 KeyValueViewModel

public class KeyValueViewModel
{
    public int Id { get; set; }
    [Display(Name = "Key")]
    [Required(ErrorMessage = "Key is required")]
    public string Key { get; set; }
    [Display(Name = "Value")]
    [Required(ErrorMessage = "Value is required")]
    public string Value { get; set; }

    public Guid SettingFileId { get; set; }
    public Dictionary<Guid, string> SettingFileDropdownOptions { get; set; }
}

这是主视图：

@model SettingsViewModel
<form asp-action="Create" id="SettingsForm">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="row">
        <div class="col-md-12">
            <label asp-for="@Model.KeyValuePairs[0].Key" class="control-label col-md-3 no-left-padding"></label>
            <label asp-for="@Model.KeyValuePairs[0].Value" class="control-label col-md-offset-1 no-left-padding"></label>
        </div>
    </div>
    @for (var i = 0; i < Model.KeyValuePairs.Count; i++)
    {
        var keyValuePair = Model.KeyValuePairs[i];
        keyValuePair.Id = i;
        <div id="KeyValuePairsContainer">
            @Html.Partial("_settingKeyValue", keyValuePair)
        </div>
    }
    <div class="form-group col-md-12 no-left-padding">
        <label asp-for="Description" class="control-label"></label>
        <textarea asp-for="Description" class="form-control" ></textarea>
        <span asp-validation-for="Description" class="text-danger"></span>
    </div>
    <div class="form-group col-md-12 no-left-padding">
        <input type="submit" value="Opslaan" class="btn btn-primary" id="Submit" />
        <a href="@Url.Action("Index", "Home")" class="btn btn-default" id="Cancel">Annuleren</a>
    </div>
</form>

这里是渲染的局部视图：

@model KeyValueViewModel
<div class="form-group col-md-4 no-left-padding">
    <input asp-for="@Model.Key" class="form-control  col-md-3" id="KeyValuePair_Key_@Model.Id" name="KeyValuePairs[@Model.Id].Key" required="required"/>
    <span asp-validation-for="@Model.Key" class="text-danger"></span>
</div>
<div class="form-group col-md-4 no-left-padding">
    <input asp-for="@Model.Value" class="form-control col-md-3" id="KeyValuePair_Value_@Model.Id" name="KeyValuePairs[@Model.Id].Value" required="required" />
    <span asp-validation-for="@Model.Value" class="text-danger"></span>
</div>

Key 和 Value 属性上的验证消息没有在应显示的时候显示。我们通过在消息中添加必需的标签来测试 SettingsViewModel 的 Description 属性，并且效果很好。

如何获取主视图中显示的 KeyValueViewModel 的验证消息？

编辑

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

在应该更新的时候没有更新到 class="field-validation-error"

【问题讨论】：

您是否尝试在局部视图中包含jquery.validate.js？
在我的主视图中，我有标准的@section Scripts { @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} } 代码，其中包含 jquery.valide.js 库
向局部视图添加相同的代码不起作用（我认为是因为它只是添加了两次相同的库）

标签： c# asp.net-core asp.net-core-tag-helpers

【解决方案1】：

asp-validation-for 接受属性名称

而不是

<span asp-validation-for="@Model.Value" class="text-danger"></span>

应该是

<span asp-validation-for="Value" class="text-danger"></span>

【讨论】：

刚试了下，可惜没解决问题
@Jeroen 您是否也将<input asp-for="@Model.Value".. 修改为<input asp-for="Value"？
是的，我做到了。键也一样
尝试从input元素中删除id="..."
我使用 ID 进行验收测试和 JavaScript 代码，但我看不出删除 ID 将如何解决问题。

【解决方案2】：

由于某种原因，如果输入具有name="..." 属性，asp-validation-for 不起作用。从输入中删除name 属性可能会解决问题。

这是因为 asp.net 验证本身使用 name 属性，它希望它与 asp-for 中的属性名称匹配（确切地说，包括第一个大写字母）。

【讨论】：