javascript - 从 Controller 发送的字符串在处理为 HTML 时被分离

Question

我正在尝试将验证规则作为字符串从 Controller 发送到输入元素。字符串已正确发送，但未正确呈现(您可以在下面的代码片段中看到它将“Field is required”与“Field” is=""required=""分开)。

这是 HTML 渲染后得到的结果:

<input type="text" class="form-control valid" id="Code" name="Code" 
     value="INDiamnana" 
     data-rule-required="true" 
     data-msg-required="Field" is="" required="" 
     aria-required="true">

在 Controller 中，我以类似于此的方式构建字符串:

 stringBuilder.Append("data-rule-required=true");
 stringBuilder.AppendLine();
 stringBuilder.Append("data-msg-required=Field is required" );

我在 Razor 中指定:

<input type="text" class="form-control valid" 
 id="..." name="..." 
 value="..." 
 @Model.ValidationRules />

@Model.ValidationRules 是格式为

的字符串

"data-rule-required=true data-msg-required=Field is required"

有谁知道如何明确地说我希望我的字符串不可分离？ 或者也许我做错了，我应该以不同的方式发送字符串？

Answer 1

问题是因为HTML属性值有空格，这是无效的。第一个单词 Field 被解释为值，而 is 和 required 被解释为其他属性。因此，浏览器会将 ="" 添加到它们之后。

要解决此问题，您需要将属性值括在双引号中:

stringBuilder.Append("data-rule-required=\"true\"");
stringBuilder.Append("data-msg-required=\"Field is required\"");

另请注意，在 stringBuilder 中使用 AppendLine() 是多余的。 HTML 不关心空格。它所做的只是让您的代码更加冗长。