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 或剃刀：

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

参考： 剑道ui验证器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 回答