ASP.NET MVC如何阻止分部视图在页面加载时显示

核心原因分析 #

你的问题出在Bootstrap模态框的初始化逻辑上：直接调用$('#projectModal').modal({...})会同时完成模态框初始化并自动显示；另外如果直接用CSS/JS强制隐藏模态框但不处理Bootstrap生成的遮罩层（.modal-backdrop），就会导致屏幕锁定模糊。

推荐解决方案（符合Bootstrap官方规范） #

通过正确初始化模态框，设置初始不显示，仅在按钮点击时触发显示：

修改_projectView.cshtml代码

@Html.Hidden("SessionProjectId", Convert.ToString(Session["PId"]))   
<div id="projectModal" class="modal fade">
    <div class="modal-body">
        @(Html.Kendo().ComboBox()
            .Name("ProjectCombo") <!-- 必须设置Name，确保后续JS能定位到元素 -->
            <!-- 补充你的ComboBox配置项 -->
        )
    </div>
</div>

<script type="text/javascript">
    // 页面加载完成后初始化模态框，设置默认不显示
    $(document).ready(function() {
        $('#projectModal').modal({
            backdrop: 'static',
            keyboard: false,
            show: false // 关键配置：初始化时不自动弹出模态框
        });
    });

    function showProjectModal(projectId) {
        $('#projectModal').modal('show'); // 点击按钮时才触发显示
    
        if (projectId > 0) {
            $("#ProjectCombo").data("kendoComboBox").value(projectId);
        }
        else {
            $('#projectModal').find('.close').hide();
        }
    }
</script>

备选方案（快速修复） #

如果不想调整初始化逻辑，可强制模态框初始隐藏，并清理残留遮罩：

修改_projectView.cshtml的模态框HTML

<div id="projectModal" class="modal fade" style="display: none !important;">

补充JS清理逻辑

$(document).ready(function() {
    // 移除页面加载时可能残留的遮罩层
    $('.modal-backdrop').remove();
});

function showProjectModal(projectId) {
    // 移除隐藏样式后再初始化显示模态框
    $('#projectModal').removeAttr('style').modal({
        backdrop: 'static',
        keyboard: false
    });
    
    // 原有逻辑不变
    if (projectId > 0) {
        $("#ProjectCombo").data("kendoComboBox").value(projectId);
    }
    else {
        $('#projectModal').find('.close').hide();
    }
}

关键注意事项 #

• 禁止直接用hide()或纯CSS隐藏模态框却不调用Bootstrap的modal('hide')方法，否则遮罩层不会被自动移除，导致页面无法交互。
• 务必确保Kendo ComboBox设置了正确的Name属性，否则$("#ProjectCombo")无法定位到目标元素。

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