kendowindow 的远程验证答案

【问题标题】：Remote validation for kendowindowkendowindow 的远程验证
【发布时间】：2015-10-22 10:36:52
【问题描述】：

我实现了远程验证。它适用于通常的字段，但如果字段位于 kendowindow 中，则 jquery 验证不起作用。

我该如何解决这个问题？

【问题讨论】：

您好，我的回答对您解决问题有帮助吗？如果是，您能否将我的回复标记为答案？这样一来，使用谷歌找到问题的人就可以更加确信答案是正确的。提前致谢。
@VladimirIliev 不，我写了自己的属性
您能在当前线程中分享它吗？这可能对其他用户有所帮助。

标签： asp.net-mvc asp.net-mvc-3 asp.net-mvc-4 kendo-ui kendo-asp.net-mvc

【解决方案1】：

这可以使用 Kendo UI 验证器来实现，如下所示：

具有“远程”注释属性的模型：

public class ProductViewModel
{
    [Editable(false)]
    public int ProductID { get; set; }

    [Required]
    [Remote("UniqueName", "Home", ErrorMessage = "The entered name already exists.")]
    public string ProductName { get; set; }
}

具有“UniqueName”操作的控制器：

public ActionResult UniqueName(string productName)
{
    var context = new NorthwindEntities();

    return Json(!context.Products.Any(p => p.ProductName == productName), JsonRequestBehavior.AllowGet);
}

将自定义验证规则添加到“远程”验证属性的 Kendo UI 验证规则的脚本（可以放置在页面上的任何位置，位于 Grid 初始化代码之前）：

<script>
    (function ($, kendo) {
        $.extend(true, kendo.ui.validator, {
            rules: {
                //define custom validation rule to match remote validation:
                mvcremotevalidation: function (input) {
                    if (input.is("[data-val-remote]") && input.val() != "") {
                        var remoteURL = input.attr("data-val-remote-url");
                        var valid;

                        $.ajax({
                            async: false,
                            url: remoteURL,
                            type: "GET",
                            dataType: "json",
                            data: validationData(input, this.element),
                            success: function (result) {
                                valid = result;
                            },
                            error: function () {
                                valid = false;
                            }
                        });

                        return valid;
                    }

                    return true;
                }
            },
            messages: {
                mvcremotevalidation: function (input) {
                    return input.attr("data-val-remote");
                }
            }
        });

        function validationData(input, context) {
            var fields = input.attr("data-val-remote-additionalFields").split(",");
            var name = input.prop("name");
            var prefix = name.substr(0, name.lastIndexOf(".") + 1);
            var fieldName;
            var data = {};
            for (var i = 0; i < fields.length; i++) {
                fieldName = fields[i].replace("*.", prefix);
                data[fieldName] = $("[name='" + fieldName + "']", context).val();
            }
            return data;
        }
    })(jQuery, kendo);

</script>

网格初始化代码：

@(Html.Kendo().Grid<KendoUIMVC5.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Command(comm =>
        {
            comm.Edit();
        });
        columns.Bound(p => p.ProductID);
        columns.Bound(p => p.ProductName);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
            {
                model.Id(p => p.ProductID);
            })
        .Read(read => read.Action("Read", "Home"))
        .Update(update => update.Action("Update", "Home"))
    )
)

【讨论】：