jQuery Validate 正在使用 ASP.NET MVC 局部视图，但不使用编辑器模板

Question

我有一个 EditorTemplate PatientProfile 视图，它在一个子模型中传递，其中有 2 个字段用于 2 个输入。然后我尝试使用 jQuery validate 来验证这 2 个输入字段，但它不起作用。

然而，当我尝试将那个确切的视图创建为局部视图时，即在共享文件夹下有确切的 PatientProfile 视图，然后使用

调用它

@Html.Partial("PatientProfile", Model.PatientProfile)

然后验证工作。

Form.cshtml 查看该调用以呈现 PatientProfile 视图

@model Test.Models.FormGroup1

@{
    ViewBag.Title = "FormGroup1";
    Layout = "~/Views/Shared/_ContainerLayout.cshtml";
}

@Html.Partial("PatientProfile", Model.PatientProfile)   @* Validation Works *@

@Html.EditorFor(m => m.PatientProfile)                  @* Renders but validation does not work *@

PatientProfile.chstml 查看

@model Test.Models.PatientProfile

<form id="PatientProfile" class="form-horizontal" action="@Url.Action("PatientProfile", "Form")" method="post" autocomplete="off">
    <div class="row">
        <div class="col-md-6">
            <div class="form-group row">
                <label class="col-md-2 col-sm-2 col-form-label control-label">Firstname</label>
                <div class="col-md-10 col-sm-10 validateInput">
                    @Html.TextBoxFor(model => model.Firstname.Value, new { @class = "form-control", placeholder = "", tabindex = "2" })
                    @Html.ValidationMessageFor(model => model.Firstname.Value, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group row">
                <label class="col-md-2 col-md-2 col-sm-2 col-form-label control-label">Lastname</label>
                <div class="col-md-10 col-sm-10 validateInput">
                    @Html.TextBoxFor(model => model.Lastname.Value, new { @class = "form-control", placeholder = "", tabindex = "3" })
                    @Html.ValidationMessageFor(model => model.Lastname.Value, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    $(document).ready(function () {
        $("#PatientProfile").validate({
            onfocusout: function (element) { 
                $(element).valid();
            },

            rules: {
                "Firstname.Value": { required: true },
                "Lastname.Value": { required: true },
            },
            errorElement: "em",
            errorPlacement: function (error, element) {
                error.addClass("help-block");

                if (element.prop("type") === "checkbox") {
                    error.insertAfter(element.parent("label"));
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function (element, errorClass, validClass) {
                $(element).parents(".validateInput").addClass("has-error").removeClass("has-success");
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).parents(".validateInput").removeClass("has-error");
            },
        });
    });
</script>

如何让验证与 EditorFor(m => m.PatientProfile) 一起工作？我需要它与 EditorFor 一起使用，因为字段需要 updated/edited，我认为我不能使用部分视图，如果我错了请纠正我。

Answer 1

如果您使用浏览器检查工具查看输入字段，您可能会发现它们的名称与您预期的不同。

在编辑器模板中，holding 属性被设置为前缀，因此根据记忆，它们看起来像

PatientProfile.FirstName.Value

如果你想改变它，你可以在你的编辑器模板中做

@model Test.Models.PatientProfile
@{
    ViewData.TemplateInfo.HtmlFieldPrefix = string.Empty;
}

这将从字段名称中删除 PatientProfile

jQuery Validate 正在使用 ASP.NET MVC 局部视图，但不使用编辑器模板

jQuery Validate is working with ASP.NET MVC Partial View but not Editor Templates

asp.net-mvc

unobtrusive-validation