如何在MVC视图的Bootstrap模态框中按原格式显示XML文件

问题原因 #

• XML内容中的<、>、&等特殊字符未做HTML转义，浏览器会将XML标签识别为HTML节点解析，直接丢弃标签结构，仅保留纯文本内容
• Bootstrap模态框默认的pre标签样式可能被全局样式覆盖，导致缩进、换行等XML原始格式丢失

修复方案 #

1. 首先在MVC控制器端对需要输出的XML内容做HTML实体转义，示例代码：

// xmlStr为待展示的原始XML字符串
string encodedXml = HttpUtility.HtmlEncode(xmlStr);
// 传递到视图层
ViewBag.EncodedXml = encodedXml;

2. 调整Bootstrap模态框内的代码结构：

<div class="modal-body">
  <pre class="xml-preview">
    <code>@ViewBag.EncodedXml</code>
  </pre>
</div>

3. 新增自定义CSS避免Bootstrap样式冲突，保证原始格式保留：

.modal-body pre.xml-preview {
  white-space: pre;
  overflow-x: auto;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: 12px;
  font-size: 13px;
  font-family: "Consolas", "Monaco", monospace;
  line-height: 1.4;
}

如果需要实现XML语法高亮效果，可引入常用的前端语法高亮库，给code标签添加language-xml类名后按照库要求初始化即可。

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