Razor Page中C#带空格字符串存入HTML data属性被截断问题

问题1：动态字符串含空格时被截断 #

原因是动态绑定属性值时未用双引号包裹，浏览器会把空格识别为属性分隔符，导致只保留空格前的内容。

解决方法：

• 给data属性值加上双引号，用Razor语法直接绑定：

  <div data-comment="@Model.Comment"></div>
  

  这样Razor会自动将包含空格的字符串渲染为带双引号的属性值（比如data-comment="Hello World"），浏览器就能识别完整内容。

问题2：字符串为null时出现带斜杠的异常结果 #

原因是null值未被正确处理，Razor可能输出了转义后的异常格式。

解决方法：

• 使用空合并运算符将null转为空字符串，确保属性值正常渲染：

  <div data-comment="@(Model.Comment ?? string.Empty)"></div>
  

  当Model.Comment为null时，会输出data-comment=""，避免异常格式。

进阶：处理含特殊字符的字符串 #

如果字符串包含双引号、尖括号等HTML特殊字符，Razor会自动进行HTML编码，保证属性结构不被破坏。比如Model.Comment为Hello "World"时，会被渲染为：

<div data-comment="Hello &quot;World&quot;"></div>

前端通过element.dataset.comment获取时，会自动解码为原始字符串Hello "World"，无需额外处理。

内容的提问来源于stack exchange，提问作者Pawich S.