在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"感谢您的回答!

Answer 1

我创建了一个小提琴来演示如何获取所选记录的 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 调用，并且我们传入了所选 ID 的“id”值。最后，我们使用“html”方法将部分视图插入到对话框中。

部分视图动作：

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

  return PartialView("UserPartial", user);
}

就是这样！