将 asp.net razor html 助手与 innerHTML 一起使用答案

【问题标题】：use asp.net razor html helper with innerHTML将 asp.net razor html 助手与 innerHTML 一起使用
【发布时间】：2017-10-03 10:24:43
【问题描述】：

我想为 innerHTML 提供 html 助手。但不能这样做。这是我的代码。如何解决这个问题

element.innerHTML = '@Html.DropDownList("TopTags", null, new { @onchange = "ChangeCallback(this.value);" })'

【问题讨论】：

我已经更新了我的答案。我的原始代码在引号内产生了引号，这是错误的。现在应该更正了。

标签： c# asp.net-mvc html-helper

【解决方案1】：

<script id="anything" type="text/template">
        @Html.DropDownList("TopTags", null, new { @onchange = "ChangeCallback(this.value);" })
</script>
<script>
     ....
     element.innerHTML=document.getElementById("anything").innerHTML;
</script>

【讨论】：

<script type="text/template"> will be ignored by the browser 里面的任何东西，所以这个 JavaScript 代码永远不会被执行。我认为这对 OP 没有帮助。
@haindl 我认为现在可以提供帮助
这有点好，但仍然存在一个主要问题：OP 没有说明他使用 jQuery。这些标记仅指定 ASP.NET MVC。如果 OP 不使用 jQuery，那么他肯定不会为了进行一个简单的调用而改变他的应用程序架构，而无需 jQuery 就可以非常简单地解决。
从我的回答中删除 jquery
对不起，您是否尝试过自己的代码？我收到 JavaScript 错误 Uncaught TypeError: Cannot read property 'innerHTML' of null。那是因为<script id="anything" type="text/template"> 必须定义为before the getElementById call。因此，您必须交换您的 <script> 块才能使其正常工作。

【解决方案2】：

@Html.DropDownList() 将生成多行 HTML 代码。您需要对此输出进行编码，以便 JavaScript 能够理解它。

以下应该可以解决问题：

element.innerHTML = '@HttpUtility.JavaScriptStringEncode(Html.DropDownList("TopTags", null, new { @onchange = "ChangeCallback(this.value);" }).ToHtmlString().Replace("\"", "'"))';

【讨论】：