.NET Core使用Area时Modal Popup无法弹出，求排查解决

问题核心是URL路径生成错误，在Area环境下未正确指定Area参数，导致请求路径不正确，进而弹窗无法加载。以下是具体修改步骤：

1. 修正视图中Url.Action的Area参数 #

在Index.cshtml中，所有调用Url.Action的地方必须指定area参数，确保生成正确的Area内控制器路径：

修改前：

<button class="btn btn-outline-secondary" data-toggle="ajax-modal" data-target="#addNewLink" 
        data-url="@Url.Action($"EditLink/{obj.id}")">...</button>
<button class="btn btn-outline-danger" data-toggle="ajax-modal" data-target="#addNewLink"
        data-url="@Url.Action($"DeleteLink/{obj.id}")">...</button>

<button type="button" class="btn btn-outline-primary" data-toggle="ajax-modal" 
        data-target="#addNewLink" data-url="@Url.Action("AddNewLink")">...</button>

修改后：

<button class="btn btn-outline-secondary" data-toggle="ajax-modal" data-target="#addNewLink" 
        data-url="@Url.Action("EditLink", new { id = obj.id, area = "Creator" })">...</button>
<button class="btn btn-outline-danger" data-toggle="ajax-modal" data-target="#addNewLink"
        data-url="@Url.Action("DeleteLink", new { id = obj.id, area = "Creator" })">...</button>

<button type="button" class="btn btn-outline-primary" data-toggle="ajax-modal" 
        data-target="#addNewLink" data-url="@Url.Action("AddNewLink", new { area = "Creator" })">...</button>

2. 修正表单的Action路径 #

在_LinksPartial.cshtml中，使用Tag Helper生成正确的表单提交路径，替代硬编码的action属性：

修改前：

<form method="post" action="AddNewLink">

修改后：

<form method="post" asp-action="AddNewLink" asp-area="Creator">

3. 修正JS中的POST请求URL #

原JS代码硬编码了/Links/前缀，未包含Area路径，导致提交失败。直接使用表单的action属性即可：

修改前：

var actionUrl = form.attr('action');
var url = "/Links/" + actionUrl;
$.post(url, sendData).done(function (data) {
    PlaceHolderElement.find('.modal').modal('hide');
})

修改后：

var actionUrl = form.attr('action');
$.post(actionUrl, sendData).done(function (data) {
    PlaceHolderElement.find('.modal').modal('hide');
})

额外检查 #

• 打开浏览器开发者工具（F12），切换到网络标签，点击弹窗按钮，查看AddNewLink请求的状态码：
  • 如果是404，说明路径仍有错误，检查Url.Action的参数是否正确
  • 如果请求成功但弹窗不显示，检查返回的PartialView是否正确加载到PlaceHolderHere容器中
• 确保_LinksPartial.cshtml放置在Areas/Creator/Views/Links目录下，或者在控制器返回时指定完整路径（如return PartialView("~/Areas/Creator/Views/Links/_LinksPartial.cshtml", link);）

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