6

MVC Razor ビューで Kendo UI ComboBox および DropDownList コントロールを使用すると、クライアント側の検証が起動しません。次に例を示します。

@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"
        }, 
    };
}

非 Kendo UI ドロップダウンは、フォームが送信されたときに検証エラーを適切に表示しますが、Kendo コントロールは表示しません。手動で接続することなく、これらのコントロールのクライアント側の検証を有効にする方法があれば教えてください。

ソリューションの完全な例は、次の剣道フォーラムの投稿に添付されています: http ://www.kendoui.c​​om/forums/mvc/dropdownlist/mvc-client-validation-not-working.aspx

4

3 に答える 3

15

剣道フォーラムの回答に基づくと、検証が機能しない理由は、jqueryvalidateがデフォルトで非表示フィールドを検証しないためです。これを変更する最も簡単な方法は、$。validate.setDefaultsメソッドを使用して、次のようにその動作をオーバーライドすることです。

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

これでも、コンボボックスまたはドロップダウンに「input-validation-error」クラスは追加されませんが、少なくとも検証エラーが追加され、フォームが送信されなくなります。

于 2012-09-10T17:05:40.233 に答える
1

多くのことを試した結果、jQuery の控えめな js ライブラリを使用した ASP.NET MVC の検証と剣道の検証は、2 つの異なる、互換性のない獣であるという結論に達しました。kendo Multi-Select コントロールを検証するためにサーバー側とクライアント側のコードを接続しましたが、jQuery バリデーター ($.validator) の setDefaults() メソッドを含め、実際には何も機能しませんでした。私は最終的にこの投稿http://www.macaalay.com/2014/02/15/enabling-asp-net-mvc-client-validation-for-kendo-ui-components/を見つけ、剣道の検証を個別に接続する必要がありました。ただし、ASP.NET MVC 検証サマリー コントロールおよび一般的な ASP.NET MVC 検証 API には統合されません。

これは、何をしなければならなかったかを示すためのコード スニペットです。繰り返しになりますが、よりクリーンで優れたアプローチが存在する可能性があります。このスニペットは、ViewModel オブジェクトの例でバインドされたプロパティ「SelectedIDs」の Required 検証属性と連携して機能します。「divCategories」は、剣道の複数選択コントロールを含む div 要素です。よりクリーンなアプローチが得られるまで、これは私にとってはうまくいきます：

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

いずれにせよ、インライン JavaScript をスクリプト タグまたはユーティリティ JavaScript ファイルに分離できます。

この道を歩む人に幸あれ..

于 2015-11-30T13:54:25.953 に答える