ASP.NET Core MVC点击删除按钮后删除确认模态框不弹出如何修复？

核心问题点 #

代码里存在几个明显的错误会导致模态框无法弹出，按优先级排列如下：

• 最核心的错误：Index视图中删除按钮的data-url属性使用Url.Action的方法完全错误
• 资源加载顺序错误：jQuery、Bootstrap相关资源未引入或者引入顺序不对
• 局部视图路径/名称拼写错误：控制器请求的局部视图和实际文件不匹配

修复步骤 #

1. 修正删除按钮的data-url属性 #

你现在的写法是把路由参数直接拼接到了Url.Action的第一个参数（动作名称）里，控制器不存在名称为Delete/xxx的动作，会直接返回404错误，请求失败自然无法加载模态框内容。
将删除按钮的data-url属性修改为正确的写法：

<!-- 原错误写法 -->
data-url="@Url.Action($"Delete/{scenario.ScenarioId}")"
<!-- 修改后正确写法 -->
data-url="@Url.Action("Delete", new { id = scenario.ScenarioId })"

2. 检查资源加载顺序 #

Bootstrap模态框依赖jQuery和Bootstrap的JS、CSS资源，必须保证引入顺序正确，且在你自定义的模态框JS代码之前加载：

1. 引入Bootstrap CSS文件
2. 引入jQuery文件
3. 引入Bootstrap JS文件
4. 最后引入你写的这段模态框交互JS代码

排查方法：打开浏览器F12控制台，如果提示$ is not defined就是未引入jQuery，如果提示modal is not a function就是未引入Bootstrap JS。

3. 核对局部视图配置 #

确认你的局部视图文件存放路径和名称和控制器返回的参数完全匹配：

• 局部视图可以放在Views/Shared目录下，或者Views/Scenario目录下
• 文件名必须完全是_DeleteScenarioModelPartial.cshtml，注意拼写是否正确，比如是否把模态框的Modal误写为Model，大小写、下划线是否匹配

4. 验证服务端接口可用性 #

直接在浏览器地址栏访问/Scenario/Delete/[已存在的场景Id]，确认接口可以正常返回HTML内容，没有服务端报错。

额外优化建议 #

局部视图中的表单action属性建议也用Url.Action生成，避免相对路径错误：

<form action="@Url.Action("Delete")" method="post">

同时记得补充[HttpPost]特性的Delete动作处理删除提交逻辑，现在你只写了[HttpGet]的Delete方法，提交删除会报错。

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