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

Alex Da 发表于 Dev

亚历克斯·达

问题是：我有View在用户模型上在foreach上显示用户ID及其特征：

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

在buttonClick上，我在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”感谢您的回答！

埃克特

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

部分视图动作：

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

  return PartialView("UserPartial", user);
}

就是这样！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。