asp.net-mvc – Kendo Grid Edit InLine Custom Validation message重复名称等

前端之家收集整理的这篇文章主要介绍了asp.net-mvc – Kendo Grid Edit InLine Custom Validation message重复名称等前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个实体位置,我正在使用具有InLine编辑模式的Kendu UI网格.
实体拥有一个属性DisplayName,它是必需的,不能在数据库中存在两次.

目前,它可以显示必需的验证消息:

而且它还可以在LocationController Ajax InLine Create方法调用CustomValidateModel方法,该方法检查Name是否已经存在于数据库中,然后添加一个ModelError.我通过javascript在.Events(events => events.Error(“onError”))中捕获此错误,然后通过javascript弹出窗口显示该消息.

  1. ModelState.AddModelError("DisplayName","Name already exists.");

这是问题的关键:我不想有这个JavaScript弹出消息.我想在这个字段下面也有这样的信息,就像这个“Field required!”一样!信息.
我已经搜索了很多时间,但是大多数人建议只有这个验证和输出通过javascript,因为它的工作.

另外,弹出窗口之外的实际问题是,用户想要在网格中创建的记录在确认javascript弹出窗口之后就会消失.
但是对于可用性,我希望新行和输入仍然存在.用户应该可以编辑给定的名字,他想保存.而不应该再次输入完整的行.只有验证消息“名称已存在”.应提示信息.

码:

位置实体:

  1. public class LocationDto
  2. {
  3. public Guid? ID { get; set; }
  4. [required(AllowEmptyStrings = false,ErrorMessage = "Field required!")]
  5. public string DisplayName { get; set; }
  6. // other properties
  7. }

LocationController动作方式:

  1. [AcceptVerbs(HttpVerbs.Post)]
  2. public ActionResult CreateInline([DataSourceRequest] DataSourceRequest request,LocationDto model)
  3. {
  4. CustomValidateModel(model); // checks if the DisplayName is already existing in the DB
  5. if (model != null && ModelState.IsValid)
  6. {
  7. // Create and Save the Model into database
  8. }
  9. return Json(ModelState.ToDataSourceResult());
  10. }

javascript功能

  1. function onError(e,status) {
  2. if (e.errors) {
  3. var message = "Error:\n";
  4. $.each(e.errors,function (key,value) {
  5. if (value.errors) {
  6. message += value.errors.join("\n");
  7. }
  8. });
  9. this.cancelChanges();
  10. alert(message);
  11. }
  12. }

我希望有可能以同样的方式让这个工作.根据一致的可视化和可用性的提高将是很好的.

解决方法

我们在网格中完成了这一点,就像在控制器一样,将我们的自定义错误添加到模型状态并将其传递给视图.然后在onError javascript事件中,我们自己构建了验证消息,并将其放在网格中.

Javascript onError:

  1. function onError(e,status) {
  2. if (e.errors) {
  3. var message = "Error:\n";
  4.  
  5. var grid = $('#gridID').data('kendoGrid');
  6. var gridElement = grid.editable.element;
  7.  
  8. $.each(e.errors,value) {
  9. if (value.errors) {
  10. gridElement.find("[data-valmsg-for=" + key + "],[data-val-msg-for=" + key + "]")
  11. .replaceWith(validationMessageTmpl({ field: key,message: value.errors[0] }));
  12. gridElement.find("input[name=" + key + "]").focus()
  13. }
  14. });
  15. }
  16. }

然后创建一个validationMessageTmpl(或任何你想要调用它):

  1. var validationMessageTmpl = kendo.template($("#message").html());
  2.  
  3. <script type="text/kendo-template" id="message">
  4. <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
  5. <span class="k-icon k-warning">
  6. </span>
  7. #=message#
  8. <div class="k-callout k-callout-n">
  9. </div>
  10. </div>
  11. </script>

至于为什么用户输入正在消失,我认为:

  1. this.cancelChanges();

可能与它有关系.我相信这只是它所说的,取消所有的变化.这将重置您的网格并删除所有用户输入.

有一件事要注意:ModelState中的代码(也就是$.each中的键)必须与要显示错误的列一起使用的视图模型属性名称相同.

猜你在找的asp.Net相关文章