在Kendo TabStrip选项卡之间导航时进行ModelView验证

时间:2014-03-19 21:15:33

标签: asp.net-mvc-4 kendo-ui jquery-ui-tabs telerik-mvc kendo-asp.net-mvc

我想在提交服务器之前修复modelview的验证问题

这是Main ViewModel

    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>

- &gt;这里是kendo.tabstrip使用的子视图

@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>

/ * childview * /

 @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个子视图。

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

1 个答案:

答案 0 :(得分:1)

我也有同样的问题,经过调查,jQuery Validate默认忽略:hidden http://jqueryvalidation.org/validate/#ignore

的任何内容

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

  • CSS显示无值。
  • 表单元素类型为&#34;隐藏&#34;。
  • 宽度和高度设置为0.
  • 隐藏祖先元素

如果未选择标签条,则会将其设置为display:none,因此Validate将忽略输入,因为其祖先为:hiddendisplay: none)。

我使用的解决方法是将其添加到视图

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

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

一样具体

剑道验证器并没有遇到同样的问题http://demos.telerik.com/kendo-ui/validator/index,但如果标签不在视图中,用户就不会知道它有错误,所以你会需要某种摘要或尝试找出哪个标签有错误然后选择它。