时间戳

首页 > 解决方案 > jQuery Validate 正在使用 ASP.NET MVC 部分视图，但不适用于编辑器模板

asp.net-mvc - jQuery Validate 正在使用 ASP.NET MVC 部分视图，但不适用于编辑器模板

问题描述

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

但是，当我尝试将确切的视图创建为部分视图时，即在共享文件夹下具有确切的 PatientProfile 视图，然后使用调用它

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

然后验证工作。

调用以呈现 PatientProfile 视图的 Form.cshtml 视图

@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 一起使用，因为这些字段需要更新/编辑，我认为我不能使用部分视图，如果我错了，请纠正我。

标签： asp.net-mvcunobtrusive-validation

解决方案

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

在编辑器模板中，holding 属性设置为前缀，因此从内存中，它们看起来像

PatientProfile.FirstName.Value

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

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

这将从字段名称中删除 PatientProfile

推荐阅读