为什么 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 版本,全部使用服务器端验证。
这就是问题所在
工作场景一
- 填写表单数据
- Select 下拉列表中的内容
- 点击提交
- 有效
工作场景2
- 填写表单数据
- Select 下拉列表中的内容
- 不填写文本字段
- 点击提交
- 文本字段验证错误
- 输入文字
- 点击提交
- 有效
失败场景:
- 填写表单数据
- 不要 select 下拉列表中的内容
- 点击提交
- 下拉验证错误
- Select 下拉列表中的内容
- 点击提交
- 重复验证错误并将下拉菜单设置回未selected
目前正在使用服务器端验证。
当我比较我们的工作 kendo 下拉菜单之一和不工作的下拉菜单时,有两点很突出。
工作下拉列表,在验证失败后,当我更改其 selection 时,会添加一个带有 "k-input" 的跨度,该跨度在文本中具有 selected 值形式。 (破的没有)
分解的下拉菜单有一个值字段,而工作的下拉菜单没有
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");
});
这个问题只发生在我的商业项目中。它不会发生在我的其他项目中,除了我当前的项目是 运行 Kendo 的最新更新(但办公室中的其他项目是 运行 最新版本没有问题)。相同的 MVC 版本,全部使用服务器端验证。
这就是问题所在
工作场景一
- 填写表单数据
- Select 下拉列表中的内容
- 点击提交
- 有效
工作场景2
- 填写表单数据
- Select 下拉列表中的内容
- 不填写文本字段
- 点击提交
- 文本字段验证错误
- 输入文字
- 点击提交
- 有效
失败场景:
- 填写表单数据
- 不要 select 下拉列表中的内容
- 点击提交
- 下拉验证错误
- Select 下拉列表中的内容
- 点击提交
- 重复验证错误并将下拉菜单设置回未selected
目前正在使用服务器端验证。
当我比较我们的工作 kendo 下拉菜单之一和不工作的下拉菜单时,有两点很突出。
工作下拉列表,在验证失败后,当我更改其 selection 时,会添加一个带有 "k-input" 的跨度,该跨度在文本中具有 selected 值形式。 (破的没有)
分解的下拉菜单有一个值字段,而工作的下拉菜单没有
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");
});