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

Question

有时候你需要添加另一个文本框或其他输入类型来提供额外的信息。比如说，一个客户可以有多个地址。当用户填写表单并到达地址部分时，他可以点击加号来添加另一个文本框以提供另一个地址。所以我做了类似于这样的事情（不知道是否建议这样做）：

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>

我的问题是：

1. 是否可以像这样添加文本框@Html.EditorFor()？ 2. 如果我能够添加@Html.ValidationMessageFor()，那就真的太好了，是否可能？

我使用的是ASP.NET MVC 4；EF Code First方法。

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

- Boy Pasmo

---

嵌套集合请参见此处：http://www.itorian.com/2013/04/nested-collection-models-in-mvc-to-add.html - Zaki

"@Html 标签" 并不存在。在Razor视图中，@ 用于表示 .NET 语句的起始位置。Html 是 HtmlHelper 的引用，它不可在客户端代码中使用，因此无法在 JavaScript 中调用。 - Yuck

我明白了。你能帮我编辑一下我的标题吗？ - Boy Pasmo

你正在寻找使用JavaScript或更可能是jQuery动态添加HTML元素的方法。你也可以搜索JavaScript模板。 - Yuck

Answer 1

只需使用 i 作为名称属性。

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

请参考这篇文章，对我很有帮助。

更新

要进行验证，只需在输入元素中添加这些属性即可。

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

data-val="true"

这背后的想法是，附加带有名称属性和验证（data-val="true"）的正确元素。您可以查看已经使用验证的工作页面的呈现HTML。

- Ashwini Verma

---

但是你如何添加 @Html.ValidationMessageFor()？ - Boy Pasmo

Answer 2

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

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

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

});
</script>

- jamesSampica

---

以前从未使用过 EditorFor 模板，但应该尝试一下。 - Boy Pasmo

你可以将这种技术用于任何HTML助手。 - jamesSampica

Answer 3

不行，Razor是在服务器端运行的。一旦你在客户端，就无法访问@Html。这篇文章展示了如何使用列表进行模型绑定，尽管看起来你已经掌握了使用迭代器 i 进行绑定。

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

- Jonesopolis

Answer 4

您无法在客户端添加HTML助手。但是，您可以使用多种方式使用jquery添加简单的HTML控件。您可以像上面一样使用append函数或html函数。

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

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

- MikeV