如何在Partial View（分部视图）中加载JavaScript与CSS文件

注：不建议直接把<link>样式资源写在分部视图的HTML结构中间，会违反HTML规范，还可能导致页面闪烁重排；JS如果重复引用也会触发功能异常（比如datepicker重复初始化报错），可根据场景选择以下两种实现方式

方法1：使用Layout的Sections（推荐，符合ASP.NET MVC/Core最佳实践） #

步骤1：布局页预留资源插槽 #

在你的项目全局布局页（一般是_Layout.cshtml）中预留资源加载位：

1. 在<head>标签的末尾添加：

@await RenderSectionAsync("HeadContent", required: false)

2. 在</body>标签的前方、jQuery引用之后的位置添加：

@await RenderSectionAsync("Scripts", required: false)

步骤2：修改分部视图代码 #

添加资源重复加载判断，避免同一个页面多次引用该分部视图时重复加载资源，修改后的完整分部视图代码如下：

@{
    // 标记资源加载状态，防止重复加载
    if (ViewData["BootstrapDatepickerLoaded"] == null)
    {
        ViewData["BootstrapDatepickerLoaded"] = true;

        // 加载CSS到页面head区域
        @section HeadContent {
            <link href="~/AdminTheme/BootstrapJalaliDatePicker/css/bootstrap-datepicker.min.css" rel="stylesheet" />
        }

        // 加载JS到页面底部
        @section Scripts {
            <script src="~/AdminTheme/BootstrapJalaliDatePicker/js/bootstrap-datepicker.min.js"></script>
            <script src="~/AdminTheme/BootstrapJalaliDatePicker/js/bootstrap-datepicker.fa.min.js"></script>
            <script type="text/javascript">                  
                $(document).ready(function() {       
                    $('.Date').datepicker({ 
                        dateFormat: "yy/mm/dd", 
                        isRTL: true, 
                        showButtonPanel: true 
                    });
                });
            </script>
        }
    }
}

<!-- 原有HTML结构 -->
<div class="col-md-12">               
    <div class="col-md-6">
        <div class="form-group">
            <label asp-for="StartDate" class="control-label">
                StartDate
            </label>
            <input id="sdDate" class="Date form-control" name="stDate"/>    
            <span asp-validation-for="StartDate" class="error"></span>
        </div>
    </div>
             
    <div class="col-md-6">
        <div class="form-group">
            <label asp-for="EndDate" class="control-label"> 
                EndDate
            </label>
            <input id="edDate" class="Date form-control" name="edDate"/>
            <span asp-validation-for="EndDate" class="error"></span>
        </div>
    </div>
</div>

方法2：无Sections兼容方案（适用于未预留插槽的场景） #

如果你的布局页没有预留Section，或者分部视图需要在无布局的页面使用，可以用JS动态判断资源加载状态，直接在分部视图的HTML结构后添加如下代码即可：

<script>
// 动态加载CSS，避免重复引入
if (!$('link[href$="bootstrap-datepicker.min.css"]').length) {
    $('<link>').attr({
        rel: 'stylesheet',
        href: '~/AdminTheme/BootstrapJalaliDatePicker/css/bootstrap-datepicker.min.css'
    }).appendTo('head');
}

// 动态加载JS，加载完成后再初始化组件
function initDatepicker() {
    // 已加载过JS直接初始化
    if ($.fn.datepicker) {
        $('.Date').datepicker({ 
            dateFormat: "yy/mm/dd", 
            isRTL: true, 
            showButtonPanel: true 
        });
        return;
    }
    // 未加载则按顺序加载JS
    $.getScript('~/AdminTheme/BootstrapJalaliDatePicker/js/bootstrap-datepicker.min.js', function() {
        $.getScript('~/AdminTheme/BootstrapJalaliDatePicker/js/bootstrap-datepicker.fa.min.js', initDatepicker);
    });
}

$(document).ready(initDatepicker);
</script>

注意事项 #

• 两种方案都需要确保jQuery在日期选择器JS之前加载，否则会报$ is not defined、datepicker is not a function类错误
• 方法1资源加载顺序更可控、性能更好，优先推荐使用

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