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

Question

我有其中它有一个动态输入的图。

这是我想限制用户添加相同的文字（在列表中的现有值）dyanamic文本框代码

@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 
}); 

。我在视图中像这样尝试。

@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 
    } 
}); 

旁注：

1. 这是只检查大小写完全相符，所以你可能要 转换值之前为小写检查你是否想（说） “项目”和“项目”被视为重复。
2. 这会给客户端验证，但你还是必须验证 在服务器上。