如何向模态框传递值并传入控制器函数？

你现在已经通过循环生成了带对应楼宇ID的模态框触发链接，接下来我给你一步步拆解怎么把这个ID传递到模态框，最终提交给控制器：

1. 给模态框添加表单与隐藏字段 #

首先在你的AddRoom模态框里，新增一个表单和隐藏输入框，用来暂存楼宇ID。修改后的模态框结构大概是这样：

<div class="modal fade" id="AddRoom" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">为该楼宇添加房间</h4>
      </div>
      <div class="modal-body">
        <!-- 表单绑定到控制器的Action -->
        <form id="addRoomForm" asp-action="AddRoom" asp-controller="BuildingController" method="post">
          <!-- 隐藏字段：用来存储楼宇ID，提交时会一起传给控制器 -->
          <input type="hidden" id="targetBuildingId" name="buildingId" value="">
          
          <!-- 其他业务字段示例 -->
          <div class="form-group">
            <label for="roomName">房间名称</label>
            <input type="text" class="form-control" id="roomName" name="roomName" required>
          </div>
          
          <button type="submit" class="btn btn-primary">确认添加</button>
        </form>
      </div>
    </div>
  </div>
</div>

2. 用JS捕获模态框触发事件，传递ID #

Bootstrap模态框在显示前会触发show.bs.modal事件，我们可以利用这个事件拿到触发链接的data-id，再赋值给隐藏字段。在页面底部（或独立JS文件）添加这段脚本：

$('#AddRoom').on('show.bs.modal', function (event) {
  // 获取触发模态框的那个<a>元素
  const triggerBtn = $(event.relatedTarget);
  // 从data-id属性提取楼宇ID
  const buildingId = triggerBtn.data('id');
  // 把ID赋值给模态框里的隐藏字段
  const modal = $(this);
  modal.find('#targetBuildingId').val(buildingId);
});

3. 控制器接收ID并处理 #

最后在你的控制器里，编写对应的Action方法来接收这个buildingId参数：

[HttpPost]
public IActionResult AddRoom(int buildingId, string roomName)
{
  // 这里写你的业务逻辑：比如根据buildingId关联房间信息，写入数据库
  // ...
  
  return RedirectToAction("BuildingList"); // 跳转回楼宇列表页或其他页面
}

这样操作下来，当你点击任意一个“为该楼宇添加房间”的链接时，对应的楼宇ID会自动传入模态框的隐藏字段，提交表单时就会一起发送到控制器的AddRoom方法里了。

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