如何爲Kendo UI DropDownList和ComboBox啓用ASP.Net MVC客戶端驗證？

當我在MVC Razor視圖中使用Kendo UI組合框和DropDownList控件時，客戶端驗證不會觸發。這裏有一個例子：如何爲Kendo UI DropDownList和ComboBox啓用ASP.Net MVC客戶端驗證？

@using Kendo.Mvc.UI 
@model KendoDropDownTest.Models.TestModel 

@{ 
    ViewBag.Title = "Kendo Drop Down and Combo Box Test"; 
} 

<h2>Kendo Drop Down and Combo Box Test</h2> 

@using (Html.BeginForm()) 
{ 
    @Html.ValidationSummary() 

     <div> 
      @Html.LabelFor(x => x.DropDownValue) 
      @(Html.DropDownListFor(x => x.DropDownValue, Model.Options, "-- Select an Option --")) 
      @Html.ValidationMessageFor(x => x.DropDownValue) 
     </div> 

    <fieldset> 
     <legend>Kendo</legend> 
     <div> 
      @Html.LabelFor(x => x.KendoComboValue) 
      @(Html.Kendo().ComboBoxFor(x => x.KendoComboValue) 
        .BindTo(Model.Options.Select(x => x.Text))) 
      @Html.ValidationMessageFor(x => x.KendoComboValue) 
     </div> 

     <div> 
      @Html.LabelFor(x => x.KendoDropDownValue) 
      @(Html.Kendo().DropDownListFor(x => x.KendoDropDownValue) 
       .OptionLabel("-- Select an Option --") 
       .BindTo(Model.Options)) 
      @Html.ValidationMessageFor(x => x.KendoDropDownValue) 
     </div> 
    </fieldset> 

    <input type="submit" value="Submit" /> 
}

，對應的模式：

public class TestModel 
{ 
    [Required] 
    public string DropDownValue { get; set; } 
    [Required] 
    public string KendoComboValue { get; set; } 
    [Required] 
    public string KendoDropDownValue { get; set; } 

    public SelectListItem[] Options = new[] 
    { 
     new SelectListItem 
     { 
      Text = "Option 1", 
      Value = "1" 
     }, 
     new SelectListItem 
     { 
      Text = "Option 2", 
      Value = "2" 
     }, 
     new SelectListItem 
     { 
      Text = "Option 3", 
      Value = "3" 
     }, 
    }; 
}

非劍道UI下拉適當顯示驗證錯誤時提交表單，但劍道控件不。請讓我知道是否有辦法爲這些控件啓用客戶端驗證，而無需手動連線。

完整的例子液附着於以下劍道論壇上發帖： http://www.kendoui.com/forums/mvc/dropdownlist/mvc-client-validation-not-working.aspx

來源

2012-09-06 Jason Smale

基於對劍道論壇的響應，驗證不起作用的原因是因爲JQuery驗證不驗證默認隱藏域。改變這種狀況的最簡單方法是使用$ .validate.setDefaults方法重寫該行爲，像這樣：

$.validator.setDefaults({ 
    ignore: "" 
});

這仍然沒有在「輸入驗證錯誤」類添加到組合框或降但至少會增加驗證錯誤，並且不會提交表單。

來源

2012-09-10 17:05:40

對於jQuery驗證1.9，你必須[組'ignore'爲空數組（http://stackoverflow.com/a/8565769/26226）。 – jrummell

發現了一個很好的補充。如果您有其他控件，如果隱藏時不想驗證其他控件，但希望隱藏特定控件，則可以將它們添加到不（忽略）以展開此有用提示：例如，我們將.kendoDD標記在Kendo Dropdown上，然後設置： $ .validator.setDefaults（{0：隱藏：不（（.kendoDD）「 }）; https://stackoverflow.com/questions/20287567/ignore-all-hidden-div-but-not-one-in-jquery-validation – Mike

在嘗試了很多東西之後，我得出了一個結論：使用jQuery unobtrusive js庫和kendo驗證的ASP.NET MVC驗證是兩個不同的不兼容的野獸。我使用服務器端和客戶端代碼驗證了一個kendo Multi-Select控件，但是沒有任何工作真正起作用，包括jQuery驗證器（$ .validator）上的setDefaults（）方法。我終於找到了這篇文章http://www.macaalay.com/2014/02/15/enabling-asp-net-mvc-client-validation-for-kendo-ui-components/，並且不得不單獨掛上了kendo驗證，並提醒說它沒有集成到ASP.NET MVC驗證摘要控件和一般的ASP.NET MVC驗證API中。

下面是代碼片段，以演示必須完成的工作。再次，可以有一個更清潔和更好的方法。這段代碼與我的ViewModel對象上的綁定屬性「SelectedIDs」中的Required驗證屬性一起使用。「divCategories」是包含kendo多選控件的div元素。這一次，現在對我的作品，直到我得到一個更簡潔的方法：

Html.Kendo().MultiSelectFor(m => m.SelectedIDs) 
      .Name("SelectedIDs") 
      .BindTo(CategoryItems) 
      .HtmlAttributes(new { @class = "height100pc", @onchange= "$('#divCategories').kendoValidator().validate();" })

你可以的javascript插入腳本代碼或到公用JavaScript文件反正內嵌分開。

好運誰踹這條路..

來源

2015-11-30 13:54:25 Sudhir

如何爲Kendo UI DropDownList和ComboBox啓用ASP.Net MVC客戶端驗證？

回答

相關問題