Question

有时您需要添加另一个textbox或其他输入类型以获取其他信息。好的，比方说，A Customer可以有很多Address。当用户填写表单时，当他到达地址时，他可以点击加号为另一个地址添加另一个文本框。所以我做的是这样的:(不知道是否推荐）

HTML：

<a href="#" class="add-address">Additional Address</a>
<div class="address-container"></div>

JS：

<script>
$(function() {
  var i = 0;
  var addAddress = function() {
    var strBuilder = '<input type="text" name="Addresses[i].Location" />';
    $('.address-container').append(strBuilder);
    i++;

    return false;
  };
  $('.add-address').click(addAddress);
});
</script>

所以我的问题是：

可以将文本框添加为@Html.EditorFor()？
如果我还可以添加@Html.ValidationMessageFor()，这可能真的很棒吗？

我正在使用ASP.NET MVC 4; EF Code第一种方法。

非常感谢任何帮助。感谢。

Answer 1

只需使用i作为name属性。

name="Addresses[' + i + '].Location"

这与你的模特绑定。

  var i = 0;
  var addAddress = function() {
    var strBuilder = '<input type="text" value="" name="Addresses[' + i + '].Location">';
    $('.address-container').append(strBuilder);
    i++;
    return false;
  };

请参阅this post，这对我来说非常有用。

<强>更新

用于验证只需添加此属性以及输入元素。

data-val-email="The Email field is not a valid e-mail address." 

data-val="true"

这背后的想法是，使用name属性和验证附加正确的元素（data-val =＆＃34; true＆＃34;）。您可以看到已经使用验证的已经工作的页面的渲染html。

Answer 2

不，razor在服务器端工作。在您加入客户后，您无法访问@Html。 This post显示了如何使用列表对绑定进行建模，尽管看起来您已经掌握了i迭代器。

通常，我会让剃刀生成一个模拟的Address[0]，然后将生成的html复制到javascript中进行生成。它应该保留jQuery查找的所有客户端验证属性。

Answer 3

可以在客户端使用Razor生成的标签。创建一个EditorFor模板文件，该文件使用{...}语法来表示动态属性。然后像这样使用它。

<script type="text/javascript">
    var editorFor = '@Html.EditorFor(...)';
    var i = 0;

    $().ready(function(){
        $('.address-container').append(editorFor.replace("{id}", i));
        i++;
    }

});
</script>

Answer 4

您无法在客户端添加HTML帮助程序。但是，您可以通过多种方式使用jquery添加简单的HTML控件。您可以使用上面的追加功能或html功能。

您的验证也必须在客户端处理。

但是对于最佳实践，您应该创建地址文本字段的部分视图模板，然后在每次用户单击添加新地址时使用Knockout添加新模板。然后，您可以轻松处理验证，因为您的viewmodel将绑定到您的MVC模型。

如何使用javascript添加@html标签？

4 个答案: