ASP.Net MVC中data-target对应模态框表单的存放位置咨询

你遇到的404错误，核心原因是Bootstrap的data-target="#AddFacilityModal"是客户端直接查找页面内的DOM元素，不是请求独立页面。不能把模态框代码单独作为可访问的视图页面存放，正确处理方式有两种：

1. 直接嵌入触发按钮所在的视图页面 #

把包含id="AddFacilityModal"的完整模态框HTML代码，直接放在触发按钮所在的.cshtml页面里，通常放在页面底部（</body>标签前），示例如下：

<!-- 触发按钮 -->
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#AddFacilityModal" data-backdrop="static">Add Facility</button>

<!-- 模态框代码，放在当前页面底部 -->
<div class="modal fade" id="AddFacilityModal" tabindex="-1" role="dialog" aria-labelledby="AddFacilityModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="AddFacilityModalLabel">Add New Facility</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 表单内容 -->
        <form>
          <!-- 表单字段 -->
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

这种方式最直接，按钮能直接定位页面内的模态框元素，不会出现404。

2. 作为部分视图（Partial View）引入 #

如果想单独维护模态框代码（比如多页面复用），可以创建部分视图：

• 在Views/Shared目录下新建_AddFacilityModal.cshtml，将模态框HTML代码放入其中
• 在需要触发模态框的页面中，用以下代码引入部分视图：

  @Html.Partial("_AddFacilityModal")
  <!-- 或异步版本 -->
  @await Html.PartialAsync("_AddFacilityModal")
  

部分视图会被渲染到当前页面DOM中，按钮的data-target依然能找到对应模态框元素，同样不会出现404问题。

为什么单独放页面会404？ #

如果把模态框代码做成独立视图页面（比如AddFacilityModal.cshtml），Bootstrap触发时不会请求该页面，只会在当前页面查找id="AddFacilityModal"元素；若你直接访问该页面路由，会因缺少对应Action方法返回404——这不是模态框的正确使用逻辑。

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