在 JQuery 弹出框中呈现部分视图

Question

问题是：我有一个视图，它在用户模型上显示用户的ID和他的特征，使用foreach语句。

@model Project.User
@foreach (User user in Model)
{
  <table class="simple-little-table" cellspacing='0'>
    <tr>
      <td>Id @user.Id </td>
      <td>characteristic:@user.Charact</td>
      <td><button id="but">User Ban</button></td>
    </tr>
  </table>
}

按钮被点击后，我在Jquery模态框中渲染一个部分视图：

<div id="dialog1" title="Dialog Title">@Html.Partial("UserPartial")</div>

$(function () {
  $( "#dialog1" ).dialog({
    autoOpen: false
  });

  $("#but").click(function() {
    $("#dialog1").dialog('open');
  });
});

这是UserPartial：

<div class = "aaa">
@using (Html.BeginForm("BansUsers", "Bans", FormMethod.Post))
{
  <div class="editor-label">
    @Html.Label("Patronimyc")
    @Html.TextBoxFor(model => model.Surname)
  </div>
  <div class="editor-label">
    @Html.Label("Name")
    @Html.TextBoxFor(model => model.Name)
    @Html.ValidationMessageFor(model=>model.Name)
  </div>
  <input type="submit" id="submit" value="Ban User" />
}

如何从foreach循环中传递用户ID到弹出窗口？例如，在弹出窗口中向我给出：“您选择了用户编号5”

感谢回答！

- Alex Da

Answer 1

我为您创建了一个fiddle演示如何获取所选记录的ID：

http://jsfiddle.net/uyg0v4mp/

解释一下：当您点击“禁止”按钮时，您当前的代码无法确定要选择哪个ID。因此，在fiddle中，我创建了一个包含列表/表中每个记录的ID的隐藏输入。为了显示，您可以单击该按钮，然后会弹出一个警告，告诉您选择了哪个ID。您应该能够将该想法合并到自己的代码中。请按以下方式添加隐藏元素：

<tr>
  <td>Id @user.Id </td>
  <td>characteristic:@user.Charact</td>
  <td>
    <input class="idVal" type="hidden" value="@user.Id" />
    <button id ="but">User Ban</button>
 </td>

现在我建议您稍微改变一下这段代码...不要直接将您的局部视图硬编码到"dialog1"中，而是通过jquery get调用插入它。新代码如下：

<div id="dialog1" title="Dialog Title"></div>

$(function () {
  $( "#dialog1" ).dialog({
    autoOpen: false
  });

  $("#but").click(function() {
    var selectedId = $(this).parent().find(".idVal").val();

    $.get('@Url.Action("GetPartialView", "Home")', { id: selectedId }, function (partialView) {
      $("#dialog1").html(partialView);
    });

    $("#dialog1").dialog('open');
  });
});

因此，上面的代码调用了一个名为“GetPartialView”的动作，并传递了所选ID的“id”值。最后，我们使用“html”方法将部分视图插入对话框中。

部分视图操作：

[HttpGet]
public PartialViewResult GetPartialView(int id)
{
  var user = db.Users.Single(r => r.Id == id);

  return PartialView("UserPartial", user);
}

就是这样了！

- Eckert

---

如何在局部视图中使用此ID？代码如下： @using (Html.BeginForm("BansUsers", "Bans", FormMethod.Post)) { 你选择了用户5 } - Alex Da

你的部分视图应该附带一个模型。你可以使用模型属性 "Id" (@Model.Id)。 - Eckert

谢谢！明天我会尝试去做。 - Alex Da

如果在foreach中显示模型房间，并且在buttonclick上，我需要在partial中：您选择了第5个房间，请填写您的数据：姓名，姓氏......但是partial在客户端模型上。我该怎么办？？？？ - Alex Da

您没有张贴部分视图的模型，因此我不确定它是否包含ID属性。但是，由于我们能够将ID传递给“GetPartialView”操作，因此如果您正确调整模型，显然可以包括ID。 - Eckert

Answer 2

最简单的解决方案是将 foreach 中的每个 user 做成一个模态框。

在下面的视图中，我修改了 button 和模态框，使它们的 id 基于 user.Id。

@model Project.User
<table class="simple-little-table" cellspacing='0'>
@foreach (User user in Model)
{
    <tr>
        <td>Id @user.Id </td>
        <td>characteristic:@user.Charact</td>
        <td>
        <button id ="[e-mail]">User Ban</button>
        </td>
    </tr>

    <div id="[e-mail]" title="Dialog Title">@Html.Partial("UserPartial", user)</div>

    $(function () {
      $( "#[e-mail]" ).dialog({
        autoOpen: false
      });

      $("#[e-mail]").click(function() {
        $("#[e-mail]").dialog('open');
      });
    });
}
</table>

注意：更好的解决方案是只有一个模态窗口，并根据用户单击的内容更改字段数据（这可以使用jQuery和/或JavaScript完成）。

- adricadar

Answer 3

这里似乎不需要对话框，因为您只需要将用户的id传递给控制器方法，该方法执行一些操作以“禁止”用户。

首先，您的html存在一些问题。在foreach循环中，您不必为每个用户生成单独的表格，并且通过复制按钮的id属性而生成无效的html。您的视图还具有@model Project.User，但我假设那是一个打字错误，它实际上应该是@model IEnumerable<Project.User>，因为您不能枚举单个对象。您的视图应该如下所示：

<table>
  <thead>
    .... // add table row and th elements
  </thead>
  <tbody>
    @foreach (User user in Model)
    {
      <tr>
        <td>@user.Id</td>
        <td>@user.Charact</td>
        <td><button type=button class="banuser" data-id="@user.Id">User Ban</button></td>
      </tr>
    }
  </tbody>
</table>

请注意使用类名而不是ID，并将用户的ID值作为data-属性添加到按钮中，以便在按钮的.click()处理程序中检索它。

然后添加一个脚本来处理按钮点击。

var url = '@Url.Action("BansUsers", "Bans")';
$('.banuser').click(function() {
  var id = $(this).data('id'); // get the users Id value
  $.post(url, { ID: id }, function(response) {
    if(response) {
      // do something - see notes below
    }
  }).fail(function (result) {
    // Something went wrong - display error message?
  });
});

控制器方法

[HttpPost]
public JsonResult BansUsers(int ID)
{
  // call database to update user based on the ID value
  return Json(true); // signal success
}

请注意，ajax（$.post()）函数将保留在同一页上，并允许用户继续“禁止”其他用户。在success回调中考虑的一些选项包括：(a) 禁用按钮，即$(this).prop('disabled', true);以防止再次触发按钮；(b) 从表格中删除行，即$(this).closest('tr').remove();或(c) 可能将按钮更改为“解除禁令”用户。您还可以考虑显示一个confirm对话框，并仅在确认操作后执行提交。

- user3559349

---

如果在foreach中显示模型房间，并且在buttonclick上，我需要在partial中显示：您选择了第5个房间，请填写您的数据：姓名，姓氏......但是客户端模型上的partial应该怎么办？？？？ - Alex Da

抱歉，我不理解您的评论。您已经有要禁止的用户的ID，为什么需要显示部分内容？对话框和表单中的“姓氏”和“名字”属性的目的是什么？您似乎在建议用户填写他们的详细信息，但如果他们已经登录，您已经知道这些信息，因此这似乎是很多不必要的开销。 - user3559349