MVC中PartialView的JavaScript代码未被渲染，如何正确引入？

嘿，这个问题我之前帮不少开发者踩过坑，PartialView里的JavaScript没被正确执行或者引入，大多和渲染时机、加载方式有关，给你几个实用的解决思路：

把脚本放在PartialView的末尾，确保操作的DOM元素已经渲染完成，这样脚本执行时能找到目标元素。比如：

<!-- 你的PartialView内容 -->
<div class="partial-container">
  <input type="text" id="textBoxName" />
</div>

<script>
// 直接获取元素并赋值，因为脚本在元素之后渲染，DOM已经存在
const textBox = document.getElementById('textBoxName');
if (textBox) {
  // 用Json.Encode自动处理字符串转义，比Html.Raw更安全
  textBox.value = @Json.Encode(Model.textValue);
}
</script>

如果你的PartialView是通过AJAX异步加载的，这种方式依然有效——浏览器会自动解析执行PartialView里的<script>标签。

把通用的JS函数放在主页面（Index.cshtml），PartialView只负责传递参数调用，适合多个PartialView有类似操作的场景：

主页面Index.cshtml的脚本：

// 主页面定义通用设置函数
function setInputValue(elementId, value) {
  const targetElement = document.getElementById(elementId);
  if (targetElement) {
    targetElement.value = value;
  }
}

PartialView中调用：

<input type="text" id="textBoxName" />
<script>
// 调用主页面的全局函数，传递模型值
setInputValue('textBoxName', @Json.Encode(Model.textValue));
</script>

把模型值存在元素的data-*属性里，再用脚本读取，避免脚本直接嵌入后端变量，结构更清晰：

<!-- PartialView里给元素绑定数据 -->
<input type="text" id="textBoxName" data-default-value="@Html.Raw(Model.textValue)" />

<script>
const textBox = document.getElementById('textBoxName');
if (textBox) {
  // 读取data属性的值
  textBox.value = textBox.dataset.defaultValue;
}
</script>

• 别依赖DOMContentLoaded事件：这个事件只在初始页面加载时触发，异步加载的PartialView不会触发它，所以直接写脚本逻辑就行。
• 优先用Json.Encode转义：比Html.Raw更安全，能自动处理字符串里的引号、换行等特殊字符，避免JS语法错误。

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