如何在ASP.NET MVC 5分部视图中使用jQuery及Select2脚本

核心问题分析 #

• 分部视图属于动态加载内容，主页面的$(document).ready()会在分部视图渲染前就执行完毕，因此分部里的ready事件不会触发。
• 分部视图中重复引用jQuery、Select2脚本，容易引发全局变量冲突（比如jQuery被重新覆盖）。
• CSS加载顺序或作用域问题（但核心矛盾集中在脚本执行时机）。

具体解决方案 #

1. 统一在主页面加载核心资源 #

将jQuery、Select2的CSS和JS引用移至主页面的<head>或页面底部（推荐底部加载），不要在分部视图内重复引用：

<!-- 主页面的底部或head区域 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

2. 调整分部视图的脚本执行逻辑 #

去掉分部里的$(document).ready()包裹，改为直接初始化Select2，或在分部渲染完成后触发初始化：

方案A：分部视图内直接初始化（推荐）

把分部里的脚本修改为以下形式，无需等待ready事件：

<script type="text/javascript">
    // 分部渲染完成后元素已存在，直接初始化Select2
    $("#ddlSearch").select2();
</script>

方案B：通过主页面AJAX回调触发初始化

如果是通过AJAX加载分部视图（比如$.load()或$.ajax()），可在AJAX成功回调中执行初始化：

// 主页面中加载分部视图的AJAX代码
$.get("/Controller/Admins", { admId: 1 }, function(html) {
    $("#targetContainer").html(html);
    // 分部渲染完成后初始化Select2
    $("#ddlSearch").select2();
});

3. 避免重复引用脚本的额外处理 #

若必须在分部视图内引用脚本（不推荐），可先判断资源是否已加载：

<script type="text/javascript">
    if (typeof jQuery === 'undefined') {
        var script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js';
        document.head.appendChild(script);
        script.onload = function() {
            var select2Script = document.createElement('script');
            select2Script.src = 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js';
            document.head.appendChild(select2Script);
            select2Script.onload = function() {
                $("#ddlSearch").select2();
            };
        };
    } else {
        $("#ddlSearch").select2();
    }
</script>

4. 确保元素ID唯一 #

确认主页面中不存在与ddlSearch重复的ID，否则jQuery选择器会匹配第一个元素，导致分部控件无法正常初始化。

调整后的完整分部视图代码 #

<div class="radio">
 <label>
 <input type="radio" name="radio" class="radio" id="IP" value="Progress" checked="checked">
 Progress   
  </label>
 </div>
 <div class="radio">
  <label>
 <input type="radio" name="radio" class="radio" id="pending" value="Pending">
 Pending 
 </label>
 </div>
 
<div id="select" class="Search">
  <div>
  <span id="adminSearch">Administrators</span> <br>
 <select name="ddlSearch" id="ddlSearch" class="form-control">
 <option value="" selected>--Select A Administrator--</option>
 </select>

 </div>
</div>

<script type="text/javascript">
    $("#ddlSearch").select2();
</script>

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