ASP.NET MVC - JQuery - 验证可编辑表列的唯一值

Posted

技术标签:

【中文标题】ASP.NET MVC - JQuery - 验证可编辑表列的唯一值【英文标题】:ASP.NET MVC - JQuery -Validate unique values for an editable table column 【发布时间】:2016-01-04 19:08:37 【问题描述】:

我使用的是 ASP.NET MVC 剃须刀和 JQuery。我有以下型号。

 public class Employee
    
        public string Id  get; set; 
        public string Name  get; set; 
        [Required]        
        public int Number  get; set; 
    

我将其渲染为表格。数字字段是可编辑的输入字段。可以在表格中添加和删除行。添加一行时,数字字段为空,可以分配一个数字。

@model List<Models.Employee> 

 <thead>....
 </thead>
        <tbody>
        @for (int i = 0; i < Model.Count; i++)
        
            <tr>
                 <td>...
                <td>
                    @html.TextBoxFor(m => m[i].Number, new  @id ="", @title = "Number", @class = "textBox", @autocomplete = "false")
                    @Html.ValidationMessageFor(m => m[i].Number)
                </td>                   
            </tr>
        
        </tbody>

如果数字列中的所有数字都是唯一的,我想在保存之前验证。我正在使用 JQuery 不显眼的验证。我在 MVC 中没有看到 [Unique] DataAnnotation?我想知道验证表中的所有数字字段是否唯一以及如何将其与表单验证联系起来的最佳方法是什么,即如果存在非唯一值,表单验证应该失败。我所需要的只是客户端验证。

【问题讨论】:

可以远程验证tugberkugurlu.com/archive/… 对不起,所有员工都在视图中的桌子上。我检查的服务器端没有任何内容。我只需要客户端验证。 你想检查这个数字在数据库中是否唯一,对吧? 尝试处理 form.submit 事件并使用 javascript 自己检查值。您不需要对此进行不显眼的验证 你还应该检查服务器端。 【参考方案1】:

没有内置的验证属性可以处理这个问题。一种方法是处理表单.submit() 事件并在值不唯一时取消该事件。为属性的每个文本框指定一个类名(例如)class="number",并在视图中包含一个元素以显示错误消息

<div id="uniqueerror" class="field-validation-error"></div>

并添加以下脚本

$('form').submit(function() 
  var numbers = [];
  // add the textbox values to the array
  $.each($('.number'), function () 
    numbers .push($(this).val());
  );
  // create a new array containing only unique values
  var unique = numbers.filter(function (item, index, numbers) 
    return index == arr.indexOf(item);
  );
  // compare them
  if (numbers.length !== unique.length) 
    // display error message and cancel the submit
    $('#uniqueerror').text('The numbers must be unique');
    return false;
  
);

您还可以处理文本框.change() 事件来清除错误消息。

旁注:您也应该始终在服务器上进行验证。客户端验证是一个很好的奖励,可以改善用户体验,但很容易被绕过。服务器端验证可以是

var numbers = model.Select(m => m.Number);
if (numbers.Count() != numbers.Distinct().Count())

  ModelState.AddModelError("", "The numbers must be unique");

【讨论】:

以上是关于ASP.NET MVC - JQuery - 验证可编辑表列的唯一值的主要内容,如果未能解决你的问题,请参考以下文章

使用带有 jquery ajax 的 ASP.NET MVC 验证?

Asp.net MVC的验证

使用 jQuery $.ajax 进行 ASP.NET MVC 验证

ASP.NET MVC - JQuery - 验证可编辑表列的唯一值

Jquery 验证单击提交按钮两次 ASP.Net 核心 MVC 项目

ASP.net MVC 3 jQuery 验证;禁用不显眼的 OnKeyUp?