3

現在、ユーザーが btnSubmit をクリックしたときに Kendo UI DropDownList の検証概要を実装しようとしています。ユーザーが [選択してください] を選択すると、検証の概要に「製品リストを選択してください」というエラーが表示されます。

どうすればこれができるかわかりません。お知らせ下さい

<script type="text/javascript">
 $("#btnSubmit").click(function () {

        var pList= $("#ProductList").data("kendoDropDownList").select();

    });
</script>

インデックス.cshtml

@(Html.Kendo().DropDownList()
                        .Name("ProductList")
                        .HtmlAttributes(new { @Style = "width: 130px; margin:0.5em 0 0 0;height:20px;align:center; font-size:11px;" })
                        .OptionLabel("Please Select")
                        .DataTextField("OptionName")
                        .DataValueField("OptionID")
                        .DataSource(source =>
                        {
                            source.Read(read =>
                            {
                                read.Action("GetProduct", "ProductDetails");
                            });
                        })

                )




<div class="submit">
            <input type="button" id="btnSubmit" style="height:50px; width:95px; font-size:13px; background-color: rgb(51, 153, 255); white-space: normal;"  class="k-button" title="Submit" value="Submit" />


        </div>

ProductDetailsController.cs

public JsonResult GetRole()
            {
                var productName = new ContexEntities();

                return Json(productName.Product.Select(c => new { OptionID = c.OptionID, OptionName = c.OptionName, OptionTypeID = c.ConfigTypeID })
                    .OrderBy(c => c.OptionName).Where(e => e.OptionTypeID == 10), JsonRequestBehavior.AllowGet);


            }
4

2 に答える 2

3

HTML または Razor:

<div id="ValidateMyContents">
@(Html.Kendo().DropDownList()
                    .Name("ProductList")
                    .HtmlAttributes(new {required = "required", data_required_msg = "Selection Required", @Style = "width: 130px; margin:0.5em 0 0 0;height:20px;align:center; font-size:11px;" })
                    .OptionLabel("Please Select")
                    .DataTextField("OptionName")
                    .DataValueField("OptionID")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetProduct", "ProductDetails");
                        });
                    })

            )
        <span id="status"></span>
        <input type="button" id="btnSubmit" value="Submit" />
 </div>

脚本：

<script>
$(document).ready(function () {
    var validator = $("#ValidateMyContents").kendoValidator().data("kendoValidator"),
        status = $(".status");

    $("btnSubmit").click(function () {
        if (validator.validate()) {
            status.text("Hooray!");
        } else {
            status.text("Oops! There is invalid data in the form.");
        }
    });
});
</script>

参考： Kendo ui validator Demo

于 2013-10-24T12:45:35.987 に答える
1

私はこのスタイルを追加しました：

.k-dropdown-clientValidation input[type='text'] {
    height: 0;
    width: inherit;
    z-index: -99;
    padding: 0;
    position: relative;
    top: -26px !important;
    display:  block !important;
    border-style: none !important;
}

そして、Razor は次のようになります。

   @(Html.Kendo().DropDownList()
                    .Name("ProductList")
                    .HtmlAttributes(new { @class="k-dropdown-clientValidation", @Style = "width: 130px; margin:0.5em 0 0 0;height:20px;align:center; font-size:11px;" })
                    .OptionLabel("Please Select")
                    .DataTextField("OptionName")
                    .DataValueField("OptionID")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetProduct", "ProductDetails");
                        });
                    })

            )

これは基本的に入力を再表示し、ドロップダウンリストの後ろに移動します。スタイルを少しいじる必要があるかもしれません。スタイルが機能するように、コントロールの上に検証メッセージを表示します。

于 2014-01-15T21:22:11.150 に答える