asp.net-mvc-4 - 在 Kendo TabStrip 选项卡之间导航时的 ModelView 验证

Question

我正在尝试在提交到服务器之前修复模型 View 的验证问题

这是主视图模型

    public class AdmissionViewModel
    {
        public int OperatorID { get; set; }

/* some other members */

        public AdmissionFeeViewModel Fee { get; set; }

        public AdmissionFallDateViewModel FallAdmission { get; set; }

        public AdmissionDateViewModel SpringAdmission { get; set; }

        public AdmissionDateViewModel SummerAdmission { get; set; }


    }

下面是上述 ViewModel 成员的定义

public class AdmissionFeeViewModel
{
    public AdmissionFeeBaseModel Domestic { get; set; }
    public AdmissionFeeBaseModel International { get; set; }
}

--> 基础模型

 public class AdmissionFeeBaseModel
    {
        public int? AdmissionFeeID { get; set; }

    [Required(ErrorMessage = "Application Fee is required")]
    public decimal? ApplicationFee { get; set; }

    public string ApplicationFeeWaiver { get; set; }

    public string FeeWaiverNotes { get; set; }

    public string FeeDataUrl { get; set; }
}


public class AdmissionFallDateViewModel
{
    public AdmissionFallDateBaseModel Domestic { get; set; }
    public AdmissionFallDateBaseModel International { get; set; }
}

--> 基础模型

public class AdmissionFallDateBaseModel: AdmissionDateBaseModel
{
    [Display(Name = "Early Decision Offered")]
    public override string PriorityDecisionOffered { get; set; }

    [Display(Name = "Early Decision Deadline")]
    public override string PriorityDecisionDeadline { get; set; }

    [Display(Name = "Early Decision Notification")]
    public override string PriorityDecisionNotificationDate { get; set; }

    [Display(Name = "Early Decision Deposit Deadline")]
    public override string PriorityDecisionDepositDeadline { get; set; }

    [Display(Name = "Financial Aid Application Deadline")]
    public override string PriorityFinancialAidAppDeadline { get; set; }

    [Display(Name = "Early Action Offered")]
    public string PriorityActionOffered { get; set; }

    [Display(Name = "Early Action Deadline")]
    public string PriorityActionDeadline { get; set; }

    [Display(Name = "Early Action Notification")]
    public string PriorityActionNotificationDate { get; set; }

    [Display(Name = "Early Decision  or Action Notes")]
    public override string PriorityAdmissionNotes { get; set; }

    [Display(Name = "Data URL")]
    public override string PriorityDataURL { get; set; }
}

public class AdmissionDateViewModel
{
    public AdmissionDateBaseModel Domestic { get; set; }
    public AdmissionDateBaseModel International { get; set; }
}

-->基础模型

public class AdmissionDateBaseModel
    {
        [HiddenInput]
        public int? AdmissionDateID { get; set; }

        [Display(Name = "Regular Admission Deadline")]
        public string ApplicationDeadline { get; set; }

        [Display(Name = "Regular Admission Notification")]
        public string AdmissionNotificationDate { get; set; }

        [Display(Name = "Regular Admission Deposit Deadline")]
        public string DepositDeadline { get; set; }

        [Display(Name = "Accept Offer of Admission")]
        public string AcceptOfferDeadline { get; set; }

        [Display(Name = "Waiting List Used")]
        public string WaitingListUsed { get; set; }

        [Display(Name = "Deferred Admission")]
        public string DeferAdmission { get; set; }

        [Display(Name = "Transfer Admission")]
        public string TransferAdmission { get; set; }

        [Display(Name = "Financial Aid Application Deadline")]
        public string FinancialAidAppDeadline { get; set; }

        [Display(Name = "Admission Notes")]
        public string AdmissionNotes { get; set; }

        [Display(Name = "Data URL")]
        public string DataURL { get; set; }

        [Display(Name = "Priority Decision Offered")]
        public virtual string PriorityDecisionOffered { get; set; }

        [Display(Name = "Priority Decision Deadline")]
        public virtual string PriorityDecisionDeadline { get; set; }

        [Display(Name = "Priority Decision Notification Date")]
        public virtual string PriorityDecisionNotificationDate { get; set; }

        [Display(Name = "Priority Decision Deposit Deadline")]
        public virtual string PriorityDecisionDepositDeadline { get; set; }
    [Display(Name = "Priority Financial Aid Application Deadline")]
    public virtual string PriorityFinancialAidAppDeadline { get; set; }

    [Display(Name = "Admission Notes")]
    public virtual string PriorityAdmissionNotes { get; set; }

    [Display(Name = "Data URL")]
    public virtual string PriorityDataURL { get; set; }
}

这是主视图，其中 Kendo().TabStrip 放置了 4 个选项卡，每个选项卡对应 AdmissionViewModel 中的每个成员

@model UniversityApp.ViewModels.AdmissionViewModel
@Html.HiddenFor(model => model.OperatorID)

<table>

<tr>
    <td>
    @(Html.Kendo().TabStrip()
    .Name("tabAdmission")
    .Events(events => events
        .Select("tabAdmissionOnSelect")
    )
    .Animation(false)

    .Items(items =>
    {
        items.Add().Text("Application Fees").Content(@<text>
        @Html.EditorFor(m => m.Fee)
        </text>).Selected(true);
        items.Add().Text("Fall Admission").Content(@<text>
        @Html.EditorFor(m => m.FallAdmission)
        </text>);
        items.Add().Text("Spring Admission").Content(@<text>
        @Html.EditorFor(m => m.SpringAdmission)
        </text>);
        items.Add().Text("Summer Admission").Content(@<text>
        @Html.EditorFor(m => m.SummerAdmission)
        </text>);
    })
)
    </td>
</tr>
</table>

-->这里是 kendo.tabstrip 使用的 subview

@model UniversityApp.ViewModels.AdmissionFeeViewModel
@Html.HiddenFor(model => model.Domestic.AdmissionFeeID)
@Html.HiddenFor(model => model.International.AdmissionFeeID)
<table>
    <tr>
        <th></th>
        <th>Domestic Applicant</th>
        <th>International Applicant</th>
    </tr>
    <tr>
        <td><label>Application Fee</label></td>
        <td>
            @Html.EditorFor(model => model.Domestic.ApplicationFee)
            @Html.ValidationMessageFor(model => model.Domestic.ApplicationFee)
        </td>
        <td>
            @Html.EditorFor(model => model.International.ApplicationFee)
            @Html.ValidationMessageFor(model => model.International.ApplicationFee)
        </td>
    </tr>
    <tr>
        <td><label>Application Fee Waiver</label></td>
        <td>
            @Html.EditorFor(model => model.Domestic.ApplicationFeeWaiver)
            @Html.ValidationMessageFor(model => model.Domestic.ApplicationFeeWaiver)
        </td>
        <td>
            @Html.EditorFor(model => model.International.ApplicationFeeWaiver)
            @Html.ValidationMessageFor(model => model.International.ApplicationFeeWaiver)
        </td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td><input type="button" btn-next-tab="true"  value="Next" /></td>
    </tr>

/* subview */

 @model UniversityApp.ViewModels.AdmissionDateViewModel
@Html.HiddenFor(model => model.Domestic.AdmissionDateID)
@Html.HiddenFor(model => model.International.AdmissionDateID)


<table>
    <tr>
        <th></th>
        <th>Domestic Applicant</th>
        <th>International Applicant</th>
    </tr>
    <tr>
        <td>@Html.LabelFor(model => model.Domestic.ApplicationDeadline)</td>
        <td>
            @Html.EditorFor(model => model.Domestic.ApplicationDeadline)
            @Html.ValidationMessageFor(model => model.Domestic.ApplicationDeadline)
        </td>
        <td>
            @Html.EditorFor(model => model.International.ApplicationDeadline)
            @Html.ValidationMessageFor(model => model.International.ApplicationDeadline)
        </td>
    </tr>
/* all other properties */
    <tr>
        <td><input type="button" btn-previous-tab="true" value="Previous" /></td>
        <td></td>
        <td><input type="button" btn-next-tab="true" value="Next" /></td>
    </tr>
</table>

以同样的方式我们还有 2 个 subview 。

无论如何，问题是:当我在主视图中单击提交(保存)按钮时，所有必填字段都会响铃，但如果我在任何其他没有必填字段的选项卡上并点击提交，提交表单时没有客户端验证错误。

Answer 1

我也有同样的问题，经过调查，默认情况下 jQuery Validate 会忽略任何 :hidden http://jqueryvalidation.org/validate/#ignore

来自 https://api.jquery.com/hidden-selector/ :hidden 定义为

• CSS 显示值为 none。
• 带有 type="hidden"的表单元素。
• 宽度和高度设置为 0。
• 祖先元素被隐藏

如果未选择标签条，则将其设置为 display:none，因此 Validate 将忽略输入，因为它的祖先是 :hidden (显示:无)。

我使用的解决方法是将其添加到 View 中

<script>
    $(document).ready(function() {
        $("form").data("validator").settings.ignore = "";
    });
</script>

它现在当然会验证 View 中的所有内容，包括您的隐藏输入，因此可能不是正确的方法，但可能会有所帮助。你总是可以和一些特殊性 $("form").data("validator").settings.ignore = "input[type=hidden]"

Kendo Validator 不会遇到同样的问题 http://demos.telerik.com/kendo-ui/validator/index但如果选项卡不在 View 中，用户将不知道它出错了，因此您将需要某种摘要或尝试找出哪个选项卡有错误，然后选择它。