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

时间:2015-10-07 13:54:41

标签: jquery asp.net-mvc validation asp.net-mvc-4

我使用的是ASP.NET MVC razor和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>

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

1 个答案:

答案 0 :(得分:2)

没有可以处理此问题的内置验证属性。一种方法是处理表单.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");
}