为什么 MVC Kendo Drop Down Not Adding Value/Input After Validation Error (Can't move past validation error)

Why is MVC Kendo Drop Down Not Adding Value/Input After Validation Error (Can't move past validation error)

这个问题只发生在我的商业项目中。它不会发生在我的其他项目中,除了我当前的项目是 运行 Kendo 的最新更新(但办公室中的其他项目是 运行 最新版本没有问题)。相同的 MVC 版本,全部使用服务器端验证。

这就是问题所在

工作场景一

  1. 填写表单数据
  2. Select 下拉列表中的内容
  3. 点击提交
  4. 有效

工作场景2

  1. 填写表单数据
  2. Select 下拉列表中的内容
  3. 不填写文本字段
  4. 点击提交
  5. 文本字段验证错误
  6. 输入文字
  7. 点击提交
  8. 有效

失败场景:

  1. 填写表单数据
  2. 不要 select 下拉列表中的内容
  3. 点击提交
  4. 下拉验证错误
  5. Select 下拉列表中的内容
  6. 点击提交
  7. 重复验证错误并将下拉菜单设置回未selected

目前正在使用服务器端验证。

当我比较我们的工作 kendo 下拉菜单之一和不工作的下拉菜单时,有两点很突出。

  1. 工作下拉列表,在验证失败后,当我更改其 selection 时,会添加一个带有 "k-input" 的跨度,该跨度在文本中具有 selected 值形式。 (破的没有)

  2. 分解的下拉菜单有一个值字段,而工作的下拉菜单没有

none 工作项目中的 Kendo 剃刀是这样的:

 @Html.Kendo().DropDownListFor(model => model.EmployeeRecordId).OptionLabel("Please Select").DataTextField("FullName").DataValueField("EmployeeRecordId").DataSource(source => { source.Read(read => { read.Action("Get", "EmployeeRecord", new {area = "ClientArea", id = ViewBag.ClientId}); }).ServerFiltering(true); }).Events(e => { e.Change("employeeChanged"); })

工作的那个要简单得多,它不需要能够更新(那个页面上有一个添加新员工的按钮)

@Html.Kendo().DropDownListFor(model => model.CurrencyId).BindTo(ViewBag.Currencies).OptionLabel("Select Currency")

下面是每个的 HTML,取自页面源代码,紧接在第二次验证错误之后,并且值被重新 selected:

工作

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="input-validation-error" data-val="true" data-val-number="The field Currency must be a number." data-val-required="The Currency field is required." id="CurrencyId" name="CurrencyId" type="text" />
<script>
  jQuery(function() {
    jQuery("#CurrencyId").kendoDropDownList({
      "dataSource": [{
          "Text": "GBP",
          "Value": "1"
        },
        {
          "Text": "EUR",
          "Value": "3"
        }
      ],
      "dataTextField": "Text",
      "dataValueField": "Value",
      "optionLabel": "Select Currency"
    });
  });
</script>
<span class="field-validation-error" data-valmsg-for="CurrencyId" data-valmsg-replace="true">The Currency field is required.</span>

不工作

<span class="field-validation-valid" data-valmsg-for="EmployeeRecordId" data-valmsg-replace="true"></span>
</div>
<div class="editor-field">
  <input data-val="true" data-val-number="The field Employee Name must be a number." data-val-required="The Employee Name field is required." id="EmployeeRecordId" name="EmployeeRecordId" type="text" value="3032" />
  <script>
    kendo.syncReady(function() {
      jQuery("#EmployeeRecordId").kendoDropDownList({
        "change": employeeChanged,
        "dataSource": {
          "transport": {
            "read": {
              "url": "/ClientArea/EmployeeRecord/GetAllActiveByClientId/1003",
              "data": function() {
                return kendo.ui.DropDownList.requestData(jQuery("#EmployeeRecordId"));
              }
            },
            "prefix": ""
          },
          "serverFiltering": true,
          "filter": [],
          "schema": {
            "errors": "Errors"
          }
        },
        "dataTextField": "FullName",
        "dataValueField": "EmployeeRecordId",
        "optionLabel": "Please Select"
      });
    });
  </script>

  <span class="field-validation-valid" data-valmsg-for="EmployeeRecordId" data-valmsg-replace="true"></span>
</div>

有没有人知道为什么会发生这种情况。

--更新--

拼图的另一个关键点,发送到服务器时,"EmployeeRecordId"不包含在key的表单集合中!

--更新 2--

当 VS 在 "Create" 操作(我正在检查表单集合)上暂停时,如果我返回页面,我可以看到下拉框神秘地不存在,就像它一直存在一样通过 JS 预提交删除

经过大量挖掘,我遇到了类似的问题。

https://www.telerik.com/forums/kendo-validation-does-not-work-the-second-time

虽然没有为我提供服务器端失败原因的答案。它确实引导我了解如何让 kendo 下拉列表的客户端验证工作。在服务器端之前发生的事情似乎阻止了错误的发生。

要在 kendo 下拉菜单上启用客户端验证,您需要将此代码添加到页面的最底部(也就是布局文件的最底部)

<script type="text/javascript">
    $.validator.setDefaults({
        ignore: ""
    });
</script>

您需要使用 jquery 脚本启用通常的 mvc 客户端验证。

我犹豫是否将此标记为最佳答案,因为它根本没有回答为什么会发生这种情况的问题,但我发布它是为了帮助其他遇到同样问题的人:)

不是理想的解决方案。 但是您必须为每个带有验证的表单提交添加以下代码。 从 Kendo UI 官方支持页面找到解决方案。它看起来更像是一个错误。 要使其正常工作,您可以在页面底部添加以下代码。 (页面加载后)

$(document).ready(function () {
    $(".k-widget").removeClass("input-validation-error");
});