Razor视图中Script代码意外渲染到页面的问题求助

1. 彻底隔离JS与Razor语法冲突 #

如果你的Script里包含@符号或Razor表达式，Razor引擎会误把它当作服务器端代码解析，直接将部分JS内容输出到页面上。可以用两种方式隔离：

• 单行JS代码前加@:，明确告诉Razor这是纯前端代码：

<script>
    @:let username = '@Model.Username';
</script>

• 多行JS代码用<text>标签包裹，避免Razor乱解析：

<script>
<text>
    function init() {
        let username = '@Model.Username';
        console.log(username);
    }
</text>
</script>

2. 不要把Script嵌套在未闭合的HTML元素内 #

很多时候问题出在Script放在了未闭合的div或其他容器里，浏览器解析时会把部分代码当成纯文本渲染。务必先闭合局部视图的所有HTML元素，再放置Script：

<!-- 错误示例：Script在未闭合的容器内 -->
<div class="partial-content">
    <script>/* 这里的代码容易被意外渲染 */</script>

<!-- 正确写法：先闭合容器，再放Script -->
<div class="partial-content">
    <!-- 局部视图的页面内容 -->
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 你的JS逻辑
    });
</script>

3. 用@section将Script托管到布局页指定位置 #

如果项目使用了布局页（比如_Layout.cshtml），直接在局部视图中编写@section Scripts块，布局页会自动把这部分Script渲染到页面底部（或你指定的位置），完全避免渲染问题：

<!-- 局部视图的页面内容 -->
<div>
    <!-- 页面元素 -->
</div>

@section Scripts {
    <script>
        $(function() {
            // 这里的JS代码会被正确加载，不会乱渲染
        });
    </script>
}

注意：布局页中需要包含@RenderSection("Scripts", required: false)代码，用来加载这个区块的内容。

4. 转义JS中的HTML特殊字符 #

如果Script里存在<、>、&这类HTML特殊字符，Razor会把它们当作HTML标签解析，导致部分代码显示在页面上。可以用Html.Raw()处理：

<script>
    let message = '@Html.Raw(Model.Message)';
</script>

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