Question

我想用Razor插入onclick事件，该事件将打开一个新窗口，并将HTML写入其中，包含在Model属性中。

以下是一些使用简单的Hello World字符串的代码：

for (var i = 0; i < Model.EmailDetails.Length; i++)
{
  var emailClick = "var wnd=window.open('about:blank','','_blank'); wnd.document.write('Hello World');";
  <small>
  <i class="fa fa-envelope" onclick="@emailClick" ></i>
  Some other text
  </small>
}

但是，如果我尝试插入一些HTML代替：

<p class="h4">Hello World</p>

呈现为：

onclick="var wnd=window.open('about:blank','','_blank'); wnd.document.write('<p class="h4">Hello World</p>');"

或

<p class='h4'>Hello World</p>

呈现为：

onclick="var wnd=window.open('about:blank','','_blank'); wnd.document.write('<p class='h4'>Hello World</p>');"

由于明显的原因，两者都不可行。

假设我想将html保留在Model属性中，如何使它正常工作...或者有另一种方法可以做到这一点？

Answer 1

问题很简单：您应该转义HTML标记的属性引号，因为包含HTML标记的JS代码是在C＃代码中分配的。

如果您使用单引号，则由于HTML标记中的单引号未转义，因此会发生JS语法错误，您需要使用双转义（\\'）：

参数列表后未捕获到的SyntaxError：缺少

但是，如果您使用双引号，它将破坏C＃字符串分配语句，因为该字符串在h4之前和之后分为两部分（期望用分号分隔）。

正确的用法应如下：

1）使用转义序列

// single quote
var emailClick = "var wnd=window.open('about:blank','','_blank'); wnd.document.write('<p class=\\'h4\\'>Hello World</p>');";

// double quotes
var emailClick = "var wnd=window.open('about:blank','','_blank'); wnd.document.write('<p class=\"h4\">Hello World</p>');";

2）使用文字/普通字符串

var emailClick = @"var wnd=window.open('about:blank','','_blank'); wnd.document.write('<p class=""h4"">Hello World</p>');";

更新：

由于从字符串属性传递的HTML字符串和JS代码中用于document.write的单引号，因此只需使用string.Replace()来用\\'或\"来排除引号，因此创建有效的JS语句：

// single quote escape
var emailClick = "var wnd=window.open('about:blank','','_blank'); wnd.document.write('" + Model.EmailHtml.Replace("'", "\\'") + "');";

// double quote escape
var emailClick = "var wnd=window.open('about:blank','','_blank'); wnd.document.write('" + Model.EmailHtml.Replace("'", "\"") + "');";

工作示例：.NET Fiddle

如何在用Razor插入的onclick事件中包含HTML？

1 个答案: