[asp.net-mvc]呈现一个 Jquery modal弹出窗口里面的局部视图

发布时间: 2017/3/25 17:17:52
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

问题是︰ 看用户哪些关于模型在 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>
}

在按钮上我呈现分部视图里面一个 Jquery modal弹出窗口︰

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

如何将在弹出窗口中的用户 id 从 foreach 转移?例如,在弹出窗口给我:"你选择用户数 5"谢谢你的答案 !

解决方法 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 调用。 新的代码︰

<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');
  });
});

所以上述调用 get-行动命名为"GetPartialView",和我们经过在选定 ID id 值。 最后,我们使用 html 方法将我们分部视图插入到我们的对话框。

局部视图操作︰

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

  return PartialView("UserPartial", user);
}

就是这样 !

官方微信
官方QQ群
31647020