通过onclick传递含特殊字符的C# List至jQuery方法失败求助

你遇到的核心问题是直接把Json序列化后的字符串放在onclick属性里会导致语法冲突——Json生成的双引号会和onclick的双引号嵌套冲突，斜杠、星号等特殊字符也可能破坏HTML属性的语法结构，最终导致onclick事件无法正确解析，方法自然触发不了。

方案1：使用data属性存储数据（推荐） #

放弃内联onclick，改用HTML的data属性存储序列化后的List数据，再通过jQuery绑定点击事件读取，彻底避开转义问题：

HTML代码 #

<input type="radio" class="btn-check" value="Maybe" name="ckhanswerA" id="chk" data-question='@Json.Serialize(question)' />

注意：这里用单引号包裹data-question的属性值，因为Json.Serialize生成的JSON会用双引号，单双引号分开可以避免嵌套冲突。

jQuery代码 #

$(function() {
    // 绑定点击事件
    $('#chk').on('click', function() {
        // jQuery的data方法会自动解析JSON格式的字符串
        var myList = $(this).data('question');
        debugger;
        // 直接使用myList即可，无需再JSON.parse
    });
});

方案2：转义后使用内联onclick #

如果必须保留内联onclick，需要对序列化后的JSON做JavaScript字符串转义，确保特殊字符和引号不会破坏语法：

HTML代码 #

<input type="radio" class="btn-check" value="Maybe" name="ckhanswerA" id="chk" onclick="nextSlide('@HttpUtility.JavaScriptStringEncode(Json.Serialize(question))')" />

这里用HttpUtility.JavaScriptStringEncode处理序列化后的字符串，它会把双引号转成\"，斜杠等特殊字符也会被正确转义，避免和onclick的引号冲突。

jQuery代码（无需修改） #

function nextSlide(question) {
    debugger;
    var myList = JSON.parse(question);
}

内容的提问来源于stack exchange，提问作者Anele Ngqandu