如何基于TempData值自动打开Modal弹窗？

你的弹窗无法正常显示主要源于语法错误、逻辑问题以及框架版本适配问题，以下是具体修复步骤：

1. 修正JavaScript判断逻辑的语法与格式错误 #

原JS代码存在引号拼接错误、逻辑顺序颠倒，且未正确处理Razor变量转JS的格式问题，修改后：

$(document).ready(function () {
    // 安全转换Razor变量到JS，避免引号冲突
    var warningText = @Html.Raw(Json.Encode(TempData["WarningText"]));
    // 先判断值存在，再判断非空
    if (warningText && warningText.trim() !== "") {
        // Bootstrap 5需用原生JS调用Modal（你的代码用了data-bs-*属性，对应Bootstrap 5）
        new bootstrap.Modal(document.getElementById('GenericWarningModal')).show();
        // 若用Bootstrap 4及以下，可保留jQuery写法：$("#GenericWarningModal").modal('show');
    }
});

错误点说明：

• 原代码|| @TempData["WarningText"]" != null多了一个闭合引号，直接导致语法报错
• 直接拼接Razor变量到JS字符串会引发引号冲突，Json.Encode可安全完成格式转换
• 逻辑顺序应先判断null，再判断空字符串，避免空值调用trim()时出错

2. 统一警告文本的数据源 #

你控制器将警告内容存入TempData["WarningText"]，但Modal内容用的是@ViewBag.WarningText，容易导致内容不一致，改成：

<div class="modal-body">
    @TempData["WarningText"]
</div>

若需保留ViewBag，可在控制器中添加代码：ViewBag.WarningText = TempData["WarningText"];

3. 匹配Bootstrap版本的调用方式 #

你的Modal使用了data-bs-*属性，说明是Bootstrap 5版本，此时jQuery的.modal('show')方法已被移除，必须使用Bootstrap原生JS API调用。如果是Bootstrap 4及更低版本，可继续使用jQuery写法，但要确保jQuery在Bootstrap之前加载。

完整修复后的代码示例 #

<script type="text/javascript">
    $(document).ready(function () {
        var warningText = @Html.Raw(Json.Encode(TempData["WarningText"]));
        if (warningText && warningText.trim() !== "") {
            new bootstrap.Modal(document.getElementById('GenericWarningModal')).show();
        }
    });
</script>

<!-- Modal -->
@using (Html.BeginForm("Warning", "Generic", FormMethod.Post))
{
    <div class="modal fade" id="GenericWarningModal" tabindex="-1" role="dialog" aria-labelledby="warningModalTitle" data-bs-backdrop="static" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="warningModalLongTitle">确认取消开球时间</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @TempData["WarningText"]
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" id="modalProceed" class="btn btn-primary">继续</button>
                </div>
            </div>
        </div>
    </div>
}

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