如何在 ASP.NET MVC 中将 ID 传递给模态框 - C#

在使用 ASP.NET MVC 开发 Web 应用程序时，经常需要使用模态框（Modal）来实现一些交互式的功能。例如，当用户单击列表中的某一行时，可能需要在模态框中显示详细信息。这时候，我们往往需要将该行的 ID 值传递给模态框，以便从服务器端获取该行的详细信息。

下面，我们将介绍如何在 ASP.NET MVC 中将 ID 传递给模态框。

1. 在页面中设置 ID

首先，我们需要在列表中设置一个 ID 属性，以便在后面的操作中将其传递给模态框。例如：

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    @foreach (var item in Model)
    {
      <tr>
        <td>@item.ID</td>
        <td>@item.Name</td>
        <td><a href="#" class="showDetails" data-id="@item.ID">Details</a></td>
      </tr>
    }
  </tbody>
</table>

在上面的代码中，我们给“Details”链接设置了一个“data-id”属性，这个属性的值为当前行的 ID 值。我们后面会使用 jQuery 从这个属性中获取 ID 值。

2. 使用 jQuery 传递 ID

接下来，我们需要使用 jQuery 从“data-id”属性中获取当前行的 ID 值，并将其传递给模态框。例如：

$(".showDetails").on("click", function (e) {
  e.preventDefault();
  var id = $(this).data("id");
  $.ajax({
    url: "/Home/GetDetails/" + id,
    success: function (data) {
      $("#detailsModalBody").html(data);
      $("#detailsModal").modal("show");
    }
  });
});

在上面的代码中，我们首先使用 jQuery 监听“Details”链接的“click”事件，然后使用“data()”方法获取“data-id”属性的值。接着，我们使用 AJAX 从服务器端获取详细信息，并使用“html()”方法将其显示在模态框中。最后，我们使用“modal()”方法显示模态框。

3. 在服务器端获取详细信息

最后，我们需要在服务器端实现一个“GetDetails”动作方法，用于获取当前行的详细信息并返回给客户端。例如：

public ActionResult GetDetails(int id)
{
  var item = db.Items.Find(id);
  return PartialView("_Details", item);
}

在上面的代码中，我们首先从数据库中查询当前行的详细信息，并将其传递给一个局部视图（PartialView）。然后，我们返回这个局部视图到客户端。

总结

在 ASP.NET MVC 中将 ID 传递给模态框需要以下步骤：

1. 在页面中设置 ID。
2. 使用 jQuery 传递 ID。
3. 在服务器端获取详细信息。

通过上面的步骤，我们可以实现在 ASP.NET MVC 中将 ID 传递给模态框的功能。