如何使用javascript添加@html标签

本文关键字：@html 标签 添加 javascript 何使用 | 更新日期: 2023-09-27 18:15:54

有时您需要添加另一个textbox或其他输入类型以获取额外信息。比如说，一个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>

我的问题是:

  1. 可以将文本框添加为@Html.EditorFor() ?
  2. 如果我也能添加@Html.ValidationMessageFor()，那真是太好了，可能吗?

我正在使用ASP。Net MVC 4;EF码优先进场

任何帮助都将非常感激。谢谢。

如何使用javascript添加@html标签

name属性使用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。

不，razor工作在服务器端。一旦进入客户端，就不能访问@Html。这篇文章展示了如何用列表建模绑定，尽管看起来你已经掌握了i迭代器。

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

可以在客户端使用Razor生成的标签。创建一个使用{...}语法的EditorFor模板文件。然后像这样使用。

<script type="text/javascript">
    var editorFor = '@Html.EditorFor(...)';
    var i = 0;
    $().ready(function(){
        $('.address-container').append(editorFor.replace("{id}", i));
        i++;
    }
});
</script>

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

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

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

相关文章：