Question

我有一个视图，它有一个动态输入。

这是代码

@using (Html.BeginForm("Save", "Attribute"))
{
<input type="text" id="newtypevalue" />
<input type="button" value="Add Text" id="addtypevalue" />
<div id="typevaluelist">
// Generate inputs for existing items and in case of returning the view
foreach(var item in Model.typevalue)
{
  <div class="typevalue">
    <input type="text" name="typevalue" value="@item" />
    <button type="button" class="delete">Delete</button>
  </div>
}
</div>
....
}
// Hidden template for adding new items (outside the form element)
<div id="new" style="display:none;">
<div class="typevalue">
<input type="text" name="typevalue" />
<button type="button" class="delete">Delete</button>
</div>
</div>

//scripts for adding and deleting items
$('#addtypevalue').click(function() {
var clone = $('#new').clone().children('div'); // copy the template
clone.find('input').val($('#newtypevalue').val()); // update text
$('#typevaluelist').append(clone); // add it to the DOM
$('#newtypevalue').val(''); // clear initial text box
});
$('#typevaluelist').on('click', '.delete', function() {
$(this).closest('.typevalue').remove(); // remove it from the DOM
});

我想限制用户在dyanamic文本框中添加相同的文本（列表中的现有值）。我在视图中尝试过这样的方法。

 @foreach(var item in Model.typevalue){
 if(!Model.typevalue.Contains(item))
 {
      <div class="typevalue">
      <input type="text" name="typevalue" value="@item" />
      <button type="button" class="delete">Delete</button>
      </div>
 }
 }

但这不起作用。请帮助我正确的方式。提前谢谢！

Answer 1

@foreach()是剃刀代码，在服务器发送到视图之前进行评估（它不能用于评估动态添加的项目）。

为您的输入提供一个类名（在foreach循环内部和模板中的一个）

<input type="text" class="typevalue" name="typevalue" />

然后在按钮。click事件中，您可以检查是否有任何现有输入具有该值

$('#addtypevalue').click(function() {
  var isDuplicate = false;
  // get the value of the item to be added
  var value = $('#newtypevalue').val();
  // get all existing values
  $('.typevalue').each(function() {
    if ($(this).val() == value) {
      isDuplicate = true;
      alert('duplicates not allowed');
      return false;
    }
  });
  if (!isDuplicate) {
    var clone = $('#new').clone().children('div'); // copy the template
    clone.find('input').val(value); // update text
    $('#typevaluelist').append(clone); // add it to the DOM
    $('#newtypevalue').val(''); // clear initial text box
  }
});

附注：

这只是检查确切的大小写匹配，所以你可能想要在检查你是否想要（比如说）之前将值转换为小写 “item”和“Item”被视为重复。
这将为客户端验证，但您仍必须验证在服务器上。

限制将相同的输入输入到动态文本框mvc5

1 个答案: