如何在Razor页面的.cshtml文件中基于C#值渲染JS代码

云上老周

2026-8-10

可以在Razor页面中基于C#值渲染JavaScript代码吗？

当然可以，Razor作为服务器端渲染引擎，会优先执行页面中的C#代码，再把生成的最终HTML、JavaScript代码发送给浏览器，完全支持基于C#的值来控制JS代码的输出。

你的示例代码本身是可行的

你给出的代码逻辑是正确的，服务器会先判断numberA的数值，再生成对应的JS代码。比如当numberA > 5时，浏览器收到的JS代码会是：

let myVal = "Number is small";
myVal = "Number is large"
console.log(myVal);

如果numberA ≤ 5，则收到的JS是：

let myVal = "Number is small";
console.log(myVal);

优化后的实现方式

可以通过更简洁的Razor表达式或者规范写法来实现，避免语法隐患：

用<text>标签包裹JS代码块
确保Razor正确识别JS代码，避免出现语法错误：

@{
    double numberA = (double)ViewData["someVal"];
}
<h1>SOME HTML</h1>
<script>
let myVal = "Number is small";
@if (numberA > 5) {
    <text>myVal = "Number is large";</text>
}
console.log(myVal);
</script>

直接用Razor三元表达式赋值
把C#的判断逻辑直接嵌入JS变量赋值，代码更紧凑：

@{
    double numberA = (double)ViewData["someVal"];
}
<script>
let myVal = @(numberA > 5 ? "\"Number is large\"" : "\"Number is small\"");
console.log(myVal);
</script>

安全处理字符串与复杂数据
如果需要把C#字符串、对象等注入JS，建议用Json.Serialize处理转义问题，避免语法错误：

@{
    string serverMessage = "Hi, I'm from server with \"quotes\"!";
    var userData = new { Name = "Tom", Age = 28 };
}
<script>
let jsMessage = @Json.Serialize(serverMessage);
let jsUserData = @Json.Serialize(userData);
console.log(jsMessage); // 输出 Hi, I'm from server with "quotes"!
console.log(jsUserData); // 输出 { Name: "Tom", Age: 28 }
</script>