最新版本的引导程序未在 Visual Studio 2022 中呈现模式对话框

问题描述 投票：0回答：1

我已从 Visual Studio 2019 升级到 Visual Studio 2022。

我致力于基于 ASP.NET .NET Framework Webform 的 Web 应用程序。当我升级到 Visual Studio 2022 时，有人警告我，我的应用程序使用的当前引导程序版本 (3.4.1) 有漏洞，我应该升级到最新版本。所以这是我需要升级的：

引导程序 - 旧：3.4.1 新：5.3.3 AspNet.ScriptManager.bootstrap - 旧： 3.4.1 新 5.2.3 AspNet.ScriptManager.jQuery - 旧 3.4.1 新 3.7.1

在我的 .aspx 文件中生成模态对话框，如下所示：

<a href="#" data-id="2" data-toggle="modal" class="anchor-btn" id="add-compp" data-target="#myModalAddressAddCP">Add Complainant</a>

升级到上面列出的最新版本后，在 Visual Studio 2022 内以调试模式运行时，模式对话框将不会呈现。如果我发布 Web 应用程序并将其推送到我的 IIS 服务器，模式对话框将呈现就好了。

什么给予？

当 Web 应用程序在调试中运行时，我检查了网页，发现在页面上使用重复的 ID 时出现了一些错误。有趣的是，这些错误没有在 Visual Studio 2019 下显示，但我离题了。我认为这就是问题所在，但即使解决了这个问题，模式对话框仍然不会在列出的最新版本下呈现。当我回到旧版本时，模式对话框将在调试模式下呈现得很好。

asp.net webforms bootstrap-modal visual-studio-2022
1个回答
0
投票

错误分析：

1.正如VDWWD所说，你应该使用“

data-bs-toggle
和
data-bs-target
。

2.

bootstrap
和 
AspNet.ScriptManager.bootstrap
使用不兼容的版本。

enter image description here

您可以考虑只安装

bootstrap
（版本5.3.3）而不安装
AspNet.ScriptManager.bootstrap
，或者回滚
bootstrap
到5.2.0到5.2.4（我使用5.2.3进行测试）。

相关测试代码： WebForm1.aspx

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <!-- Trigger modal -->
                        <a href="#" data-id="2" data-bs-toggle="modal" class="anchor-btn" id="add-compp" data-bs-target="#exampleModal">Add Complainant</a>
                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                          <div class="modal-dialog">
                            <div class="modal-content">
                              <div class="modal-header">
                                <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                              </div>
                              <div class="modal-body">
                                ...
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                              </div>
                            </div>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.