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>
}

On buttonClick I在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-call，我们传入了所选ID的'id'值。最后，我们使用'html'方法将我们的局部视图插入到对话框中。

部分视图操作：

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

  return PartialView("UserPartial", user);
}

就是这样！

Answer 2

此处似乎不需要对话框，因为您需要做的就是将用户的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对话框，只有在确认操作后才会发布帖子。

在Jquery模式弹出窗口内渲染局部视图

2 个答案: