点击DevExpress GridView行触发JavaScript语法错误求助

错误原因 #

报错Uncaught SyntaxError: missing ) after argument list的核心原因是数据中的单引号未正确转义，破坏了JavaScript字符串的语法结构：

• 你的ENTRY字段包含内容yeah that's it，其中的单引号在生成onclick属性时被HTML编码为'；
• 浏览器解析HTML时，'会被还原为单引号，导致JavaScript解析时第三个参数的字符串被提前截断（变成'UPDATED ... yeah that'），后续的s it.'等内容成为无效代码，最终引发语法错误。

解决方案 #

方案1：对参数进行JavaScript字符串转义 #

在VB.NET中添加辅助函数处理JS特殊字符转义，再修改事件绑定代码：

Private Function EscapeJsString(input As Object) As String
    If input Is DBNull.Value Then Return ""
    Dim str As String = input.ToString()
    ' 依次转义反斜杠、单引号、换行符等特殊字符
    str = str.Replace("\", "\\")
    str = str.Replace("'", "\'")
    str = str.Replace(ControlChars.Cr, "\r")
    str = str.Replace(ControlChars.Lf, "\n")
    Return str
End Function

Protected Sub gvSubNotes_HtmlRowPrepared(sender As Object, e As ASPxGridViewTableRowEventArgs)
    ' 对每个参数进行转义
    Dim id = EscapeJsString(e.GetValue("ID"))
    Dim synopsis = EscapeJsString(e.GetValue("SYNOPSIS"))
    Dim entry = EscapeJsString(e.GetValue("ENTRY"))
    Dim enteredBy = EscapeJsString(e.GetValue("ENTERED_BY"))
    
    e.Row.Attributes.Add("onclick", String.Format("OnEntryClick('{0}', '{1}', '{2}', '{3}');", id, synopsis, entry, enteredBy))
End Sub

方案2：使用HTML data属性存储数据（更安全推荐） #

避免直接拼接JavaScript字符串，改用data-*属性存储行数据，前端通过DOM读取：

后端VB.NET代码修改：

Protected Sub gvSubNotes_HtmlRowPrepared(sender As Object, e As ASPxGridViewTableRowEventArgs)
    ' 为行添加data属性存储数据
    e.Row.Attributes.Add("data-id", If(e.GetValue("ID") Is DBNull.Value, "", e.GetValue("ID").ToString()))
    e.Row.Attributes.Add("data-synopsis", If(e.GetValue("SYNOPSIS") Is DBNull.Value, "", e.GetValue("SYNOPSIS").ToString()))
    e.Row.Attributes.Add("data-entry", If(e.GetValue("ENTRY") Is DBNull.Value, "", e.GetValue("ENTRY").ToString()))
    e.Row.Attributes.Add("data-enteredby", If(e.GetValue("ENTERED_BY") Is DBNull.Value, "", e.GetValue("ENTERED_BY").ToString()))
    ' 绑定点击事件，传入当前行元素
    e.Row.Attributes.Add("onclick", "OnEntryClickFromRow(this);")
End Sub

前端JavaScript代码新增：

function OnEntryClickFromRow(row) {
    // 从data属性读取数据
    const id = row.dataset.id;
    const synopsis = row.dataset.synopsis;
    const entry = row.dataset.entry;
    const enteredBy = row.dataset.enteredby;
    // 调用原有的OnEntryClick函数
    OnEntryClick(id, synopsis, entry, enteredBy);
}

这种方式无需手动处理字符转义，HTML会自动处理特殊字符编码，从根源避免语法错误。

内容的提问来源于stack exchange，提问作者Carlos Mendieta