Javascript没有调用函数，因为语法错误

Question

在C＃中，我正在为div的设计创建字符串，我在其中调用javascript函数，后者将其添加到div。

在c＃中我做了如下：

innerHTML.Append(@"<div  onmouseover=""javascript:ShowColor('" + Convert.ToString(dt.Rows[i]["sku"]) + @"');""  class='thumbnail slide'><a   onclick='window.open('" + link + "',''_self'')' ><img src='http://www.DimpleChild.com/Images/" + dt.Rows[i]["Image"].ToString().Trim() + ".jpg' height='50' width='50'></a><span style='font-family: Tahoma, Geneva, sans-serif;font-size: 12px;'>$" + Convert.ToString(dt.Rows[i]["price"]) + "</span></div>");

这里有锚标记：

<a   onclick='window.open('" + link + "',''_self'')' >

这里window.open没有被调用因为一些语法问题。

当我在Chrome中inspect element时：

<a onclick="window.open("www.sitename.com/sku="" 120pbootcat11',''_self'')'="">

如何在C＃中对其进行格式化以便正确查看。???

编辑1

错误：

Answer 1

如果使用单引号来分隔属性，则需要在其中使用双引号。如果使用双引号来分隔属性，则需要在其中使用单引号。

试试这个：

innerHTML.Append(@"<div onmouseover=""javascript:ShowColor('" + 
     Convert.ToString(dt.Rows[i]["sku"]) + 
     @"');"" class='thumbnail slide'><a onclick=""window.open('" + 
     link + 
     @"', '_self')"" ><img src='http://www.DimpleChild.com/Images/" + 
     dt.Rows[i]["Image"].ToString().Trim() + 
     @".jpg' height='50' width='50'></a><span style='font-family: Tahoma, Geneva, sans-serif;font-size: 12px;'>$" + 
     Convert.ToString(dt.Rows[i]["price"]) + 
     @"</span></div>");

另一方面，我强烈建议将值放在data-...属性中，并在脚本文件中设置脚本事件，并使用类+ CSS文件而不是style属性。这太可怕了。

Answer 2

您目前已撰写

<a   onclick='window.open('" + link + "',''_self'')' >

问题在于您终止了window之前开始的引号，因此完整的字符串为'window.open('。

您可以通过多种方式解决问题。一种方法是

<a   onclick='window.open(\"" + link + "\",'_self')' >

我在生成的字符串中放置双引号，以便它不会终止您之前启动的单引号字符串。我也用\转义它，以便它不会终止我在C＃中启动的双引号字符串。 Woosh，这很复杂，我知道。

另一种更简单的方法是在C＃中使用String.Format()函数。

您可以将上述代码编写为

var generatedHTML = String.Format("<div  onmouseover='javascript:ShowColor(\"{0}\");'  class='thumbnail slide'><a   onclick='window.open(\"{1}\",\"_self\")' ><img src='http://www.DimpleChild.com/Images/{2}.jpg' height='50' width='50'></a><span style='font-family: Tahoma, Geneva, sans-serif;font-size: 12px;'>${3}</span></div>", Convert.ToString(dt.Rows[i]["sku"]), link, dt.Rows[i]["Image"].ToString().Trim(), Convert.ToString(dt.Rows[i]["price"]));

innerHTML.Append(generatedHTML);

我认为从C＃生成干净的HTML / Javascript代码的更简单方法是使用像Razor这样的模板引擎。它在新的ASP.NET项目中预先配置，甚至可以单独使用。

Answer 3

我建议将String.Format用于这么长的字符串。 同样与您对"和'的使用保持一致。 我总是喜欢将"用于HTML属性，将'用于javascript字符串。

这是使用String.Format：

的样子

innerHtml.Append(
    String.Format(
        @"<div onmouseover=""javascript:ShowColor('{0}');"" class=""thumbnail slide"">
            <a onclick=""window.open('{1}','_self')"" >
                <img src=""http://www.DimpleChild.com/Images/{2}.jpg"" height=""50"" width=""50"">
            </a>
            <span style=""font-family: Tahoma, Geneva, sans-serif; font-size: 12px;"">${3}</span>
        </div>"
        , dt.Rows[i]["sku"].ToString()
        , link
        , dt.Rows[i]["Image"].ToString().Trim()
        , dt.Rows[i]["price"].ToString()
    )
);

我说这更具可读性，引用错误不会经常发生。 在HTML中，它看起来像：

<a onclick="window.open('http.//example.com/', '_self')"></a>