Question

当前用户点击btnSubmit时，我正在尝试为我的Kendo UI DropDownList实现验证摘要。如果用户选择“请选择”，则验证摘要将在验证摘要中显示错误“请选择产品列表”。

我不确定我该怎么做。请指教

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

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

    });
</script>

Index.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);


            }

Answer 1

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

Answer 2

我添加了这种风格：

.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");
                        });
                    })

            )

这基本上取消了隐藏输入并将其移到下拉列表后面。你可能不得不玩一点风格。我们在控件上方显示验证消息，以便样式适用于我们。

如何：kendo Ui下拉列表的验证摘要

2 个答案: