如何在Razor中转义代码以在文件名中输出Category值？

嘿，你遇到的问题其实是Razor语法和HTML属性的引号嵌套冲突啦！原来的写法里单引号和@表达式混在一起，导致Razor解析的时候出了问题，所以图片路径一直不对。试试下面这几个靠谱的解法：

• 解法一：调整引号嵌套，用双引号包style属性

  <div class="headerpost" style="background-image: url('~/CategoryImages/@Model.Category.jpg');">
  </div>
  

  这里把style属性的外层引号换成双引号，url内部用单引号包裹路径，Razor就能正确识别@Model.Category，把它替换成实际的分类值（比如Orders），最终生成url('/CategoryImages/Orders.jpg')这样正确的路径。

• 解法二：用Razor字符串插值，更直观

  <div class="headerpost" style="@($"background-image: url('~/CategoryImages/{Model.Category}.jpg');")">
  </div>
  

  这种方式用$字符串插值把Category值直接嵌入到样式字符串里，Razor会完整解析整个style属性的内容，完全避开引号嵌套的坑，可读性也更强。

• 解法三：用Html.Raw处理复杂场景
  如果你的样式里还有其他动态内容，或者担心Razor对内容编码，可以用Html.Raw辅助方法：

  <div class="headerpost" style="@Html.Raw($"background-image: url('~/CategoryImages/{Model.Category}.jpg');")">
  </div>
  

  Html.Raw会确保Razor不对生成的样式内容进行编码，直接输出到页面上。

为啥原来的写法失效？ #

你原来的代码里，style属性用了单引号，然后在url里又用单引号包裹'@Model.Category'，这会让HTML解析器误以为style属性在'@Model.Category'的第一个单引号就结束了，剩下的.jpg);'会被当成无效的HTML内容，自然没法正确渲染图片路径啦。

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