不能让jquery验证与动态mvc Html助手一起工作

本文关键字：Html 一起 工作 mvc 动态 jquery 验证 不能 | 更新日期: 2023-09-27 18:05:25

我从数据库生成一个表单，我想使用mvc htmlhelpers来帮助我。令人惊讶的是，这很有效。

@model Models.MyViewModelWithACollectionOfFormElements
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @foreach (var item in Model.FormItems)
    {
        @Html.Editor(item.Name, item.EditorTemplate, item.HtmlAttributes)
        // "validate_" gets prefixed before the 'id' and 'name' attributes.
        @Html.ValidationMessage(item.Name, item.GetHtmlAttributes("validate_"))
    }
}

(剥离了有条件地输出下拉列表的代码，但您已经明白了)。

生成的html如下所示: 
<input class="text-box single-line" id="MyName" name="MyName" type="number" value="" />            
<span class="field-validation-valid text-danger" data-valmsg-for="MyName" data-valmsg-replace="true" id="validate_MyName" name="validate_MyName"></span>

所有这些都被很好地绑定并在我点击提交时发布到我的控制器。但是，我也想让jquery验证工作，正如你可能已经注意到的，html。编辑器帮助器不输出…

data-val="true" data-val-number="The field MyName must be a number." data-val-required="The MyName field is required."

…属性在输入元素中。这就是为什么不显眼的jquery验证脚本会忽略它的原因。那么我的问题是:如何在动态生成的表单中从helper获取这些属性?

不能让jquery验证与动态mvc Html助手一起工作

我相信这会起作用的。将编辑器和验证消息放在它自己的局部视图中(我在这里称之为_FormItem)

@foreach (var item in Model.FormItems)
{
    @Html.RenderPartial("_FormItem", item)
}

在部分视图_FormItem中这样做:

@model Models.FormItem
@Html.Editor(Model.Name, Model.EditorTemplate, Model.HtmlAttributes)
@Html.ValidationMessageFor(model => model.Name, null, Model.GetHtmlAttributes("validate_"))

在我的应用程序中也有类似的功能。你需要做的是创建一个子模型类来存储"FormItems"的元素，然后将[Required]添加到每个需要的元素中。

在你的主模型中，你应该有这样的内容:

IList<FormItemModel> FormItems { get; set; }
在FormItemModel 中
public class FormItemModel
{
    [Required]
    public string? Name
}

然后在view循环中通过FormItems(我在循环中硬编码了10个元素，但是您可以在初始化主Model类时创建尽可能多的元素)

@for (int i = 0; i < 10; i++) {
     @Html.EditorFor(model => model.FormItems[i].Name)
}
相关文章：