在 Jquery 模式弹出窗口中呈现部分视图答案

【问题标题】：Render a partial view inside a Jquery modal popup在 Jquery 模式弹出窗口中呈现部分视图
【发布时间】：2015-07-10 14:36:54
【问题描述】：

问题是：我有 View 在用户模型上显示用户的 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');
  });
});

这是用户部分：

<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 号用户” 感谢您的回答！

【问题讨论】：

标签： jquery html asp.net-mvc foreach

【解决方案1】：

这里似乎不需要对话框，因为您只需将用户的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>

注意使用class 名称而不是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 对话框，并且仅在操作得到确认后才发布。

【讨论】：

如果在foreach中显示模型房间的房间并且在buttonclick上我需要部分：您选择了第5个房间，请填写您的数据：姓名，姓氏......但部分在客户端模型。我该怎么办？？？？？？
对不起，我不明白你的评论。为什么需要显示部分内容。您有要禁止的用户的 ID。对话框和表单中的属性Surname 和Name 的用途是什么？您看到 t 建议用户填写他们的详细信息，但您已经知道如果他们已登录，那么这似乎是很多不必要的开销

【解决方案2】：

我为您创建了一个小提琴来展示如何获取所选记录的 ID：

http://jsfiddle.net/uyg0v4mp/

解释一下：当您点击“禁止”按钮时，您当前的代码无法告诉您要选择哪个 ID。所以在小提琴中，我创建了一个隐藏输入，其中包含列表/表中每条记录的 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-call 将其插入。新代码：

<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”的操作进行了 get-call，并且我们传入了所选 ID 的 'id' 值。最后，我们使用 'html' 方法将部分视图插入到对话框中。

局部视图动作：

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

  return PartialView("UserPartial", user);
}

就是这样！

【讨论】：

现在如何在局部视图中使用这个 id？那是@using (Html.BeginForm ("BansUsers", "Bans", FormMethod.Post)) {你选择了用户5 }
您的局部视图应该附有一个模型。您将使用模型属性“Id”(@Model.Id)
谢谢！明天我会努力做）
如果在foreach中显示模型房间的房间并且在buttonclick上我需要部分：您选择了第5个房间，请填写您的数据：姓名，姓氏......但部分在客户端模型。我该怎么办？？？？？？
您没有为局部视图发布模型，所以我不确定它是否包含 ID 属性。但是，由于我们能够将 ID 传递给“GetPartialView”操作，因此如果您正确调整模型，您显然可以包含 ID。

【解决方案3】：

最简单的解决方案是制作一个模态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 ="but@user.Id">User Ban</button>
        </td>
    </tr>

    <div id="dialog@user.Id" title="Dialog Title">@Html.Partial("UserPartial", user)</div>

    $(function () {
      $( "#dialog@user.Id" ).dialog({
        autoOpen: false
      });

      $("#but@user.Id").click(function() {
        $("#dialog@user.Id").dialog('open');
      });
    });
}
</table>

注意：更好的解决方案是拥有一个模态窗口并根据用户点击的内容更改字段中的数据（这是通过jQuery 或/和JavaScript 完成的)。

【讨论】：