javascript - 在数据属性中序列化对象的最可靠方法

Question

我想知道使用 C# 在数据属性(例如 <div data-options="[jsonlike object]>")中序列化对象的最可靠方法是什么。我想使用 $.data() 获取此数据，如果数据没有以良好的方式写入(例如空格)，jquery 将无法获取正确的对象并返回一个字符串。

我可以完全访问 JSON.Net 库。

Answer 1

1. 如果您还没有 JSON.NET Nuget 包，请安装它。

2. 使用它。例如，在 Razor 语法中:

   <div class="my-component" data-options="@JsonConvert.SerializeObject(new 
      {
         active = true,
         name = "Foo",
         // ...
      })">
   </div>
   

3. 消费它:

   jQuery(function($) {
     $('.my-component').each(function() {
       var component = $(this);
       var options = component.data('options');
       component.somePlugin(options);
     });
   })
   

JsonConvert.SerializeObject()将确保对象呈现为有效的 JSON，无论是否存在反斜杠等任何奇怪的字符。 Razor 的@语法将确保生成的 JSON 为 HTML 上下文正确编码，因此像 < 这样的符号也不会造成问题。