远程数据注释未在前端使用剑道控件触发答案

【问题标题】：Remote dataannotation not triggering in front-end with kendo controls远程数据注释未在前端使用剑道控件触发
【发布时间】：2022-08-17 16:18:37
【问题描述】：

我有两个控制速度和速度单位。速度是一个数字文本框，速度单位是一个下拉列表。

如果填写速度单位，则需要速度字段，反之亦然。

为了实现这个验证，我使用了remote data annotation。但是在前端，验证不会触发。

我的视图模型：

[AbpDisplayName(OE_TenantConsts.LocalizationSourceName, \"idb_Incident.Speed\")]
[Range(0.0, double.MaxValue, ErrorMessage = \"Please enter a value of {1} or more\")]
[Remote(action: \"VerifySpeedAndUnit\", controller: \"Event\", AdditionalFields = nameof(SpeedUnitId))]
public decimal? Speed { get; set; }

[AbpDisplayName(OE_TenantConsts.LocalizationSourceName, \"idb_Incident.SpeedUnitId\")]
[Remote(action: \"VerifySpeedAndUnit\", controller: \"Event\", AdditionalFields = nameof(Speed))] 
public int? SpeedUnitId { get; set; }

我的控制器（事件控制器 -> VerifySpeedAndUnit）：

[AcceptVerbs(\"GET\", \"POST\")]
[AllowAnonymous]
public IActionResult VerifySpeedAndUnit(decimal? speed, int? speedUnitId)
{
    if ((speed.HasValue && speedUnitId == DropdownConstants.DefaultSelectedSpeedUnitId) || (speed.HasValue && speedUnitId == null))
    {
        return Json(\"When entering a speed, you need to select the speed scale as well.\");
    }

    if (speedUnitId != DropdownConstants.DefaultSelectedSpeedUnitId && speed.HasValue && speedUnitId != null)
    {
        return Json(\"When selecting a speed scale, you need to enter a speed value as well.\");
    }

    return Json(true);
}

我的速度剑道控制：

                    <div class=\"mb-5 col-md-6 idb_Incident_Speed\">
                        @Html.LabelFor(model => model.Speed, htmlAttributes: new { @class = \"control-label col-12\" })
                        <div class=\"col-12\">

                            <kendo-numerictextbox deferred=\"true\" for=\"Speed\"
                                              format=\"#.##\"
                                              min=\"0\"
                                              name=\"Speed\"
                                              decimals=\"2\"
                                              placeholder=\"Enter Speed at time of Incident\">
                            </kendo-numerictextbox>

                            @Html.ValidationMessageFor(model => model.Speed, \"\", new { @class = \"text-danger\" })
                        </div>
                    </div>

如果我检查表单字段的 html，我可以看到正在设置属性。但什么也没发生：我在这里想念什么？

标签： kendo-ui data-annotations

【解决方案1】：

似乎不支持开箱即用。您必须编写一些自定义 jquery 才能使其工作：

@using(Html.BeginForm("FormPost","Home",FormMethod.Post,new {id="myForm"}))
{
    <div class="mb-5 col-md-6 idb_Incident_Speed">
        @Html.LabelFor(model => model.Speed, htmlAttributes: new { @class = "control-label col-12" })
        <div class="col-12">

            <kendo-numerictextbox deferred="true" for="Speed"
                                format="#.##"
                                min="0"
                                name="Speed"
                                decimals="2"
                                placeholder="Enter Speed at time of Incident">
            </kendo-numerictextbox>

            @Html.ValidationMessageFor(model => model.Speed, "", new { @class = "text-danger" })
        </div>
    </div>

    @(Html.Kendo().Button()
        .Name("btn")
        .Content("Submit")
        .HtmlAttributes(new {type="submit"})
    )

}
@Html.Kendo().DeferredScripts()

<script>
   $(document).ready( function () {
        var validator = $("#myForm").kendoValidator({
            rules: {
                remote: function (input) {
                    if (input.val() == "" || !input.attr("data-val-remote-url")) {
                        return true;
                    }

                    if (input.attr("data-val-remote-recieved")) {
                        input.attr("data-val-remote-recieved", "");
                        return !(input.attr("data-val-remote"));
                    }

                    var url = input.attr("data-val-remote-url");
                    var postData = {};
                    postData[input.attr("data-val-remote-additionalfields").split(".")[1]] = input.val();

                    var validator = this;
                    var currentInput = input;
                    input.attr("data-val-remote-requested", true);
                    $.ajax({
                        url: url,
                        type: "POST",
                        data: JSON.stringify(postData),
                        dataType: "json",
                        traditional: true,
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            if (data == true) {
                                input.attr("data-val-remote", "");
                            }
                            else {
                                input.attr("data-val-remote", data);
                            }
                            input.attr("data-val-remote-recieved", true);
                            validator.validateInput(currentInput);

                        },
                        error: function () {
                            input.attr("data-val-remote-recieved", true);
                            validator.validateInput(currentInput);
                        }
                    });
                    return true;
                }
            },
            messages: {
                remote: function (input) {
                    return input.attr("data-val-remote");
                }
            }
        }).getKendoValidator();

        $("#btn").click(function(e){
            e.preventDefault()
            if(!validator.validate()){
                //submit form
            }
        })
    });
</script>

特别感谢 Telerik 对代码示例的支持。

【讨论】：