在Jquery模态弹出框中呈现部分视图

The question is : I have View which on model of users displays id of the user and his characteristic on 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>
}

On buttonClick I Render a partial view inside a Jquery modal popup:

在buttonClick下，我在Jquery模态弹出框中呈现部分视图:

<div id="dialog1" title="Dialog Title">@Html.Partial("UserPartial")</div>

$(function () {
  $( "#dialog1" ).dialog({
    autoOpen: false
  });

  $("#but").click(function() {
    $("#dialog1").dialog('open');
  });
});

This is UserPartial:

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

How to transfer user id in popup window from foreach? That, for example, in popup window gave out to me : "you chose the user number 5" Thanks for answers!

如何在弹出窗口中从foreach传输用户id ?例如，在弹出窗口中，我得到的答案是:“您选择了用户5”，谢谢您的回答!

3 个解决方案

#1

I created a fiddle for you to show how to get the ID of your selected record:

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

http://jsfiddle.net/uyg0v4mp/

To explain: your current code has no way of telling which ID you want to select when you click your "Ban" button. So in the fiddle, I've created a hidden input that contains the ID for each record in the list/table. For purposes of display, you can click the button and an alert comes up telling you which ID you've selected. You should be able to incorporate that idea to your own code.

说明:当前代码无法告诉您单击“Ban”按钮时要选择哪个ID。因此，在fiddle中，我创建了一个隐藏的输入，其中包含列表/表中的每个记录的ID。出于显示的目的，您可以单击按钮，然后出现一个警告，告诉您选择了哪个ID。您应该能够将这个想法合并到您自己的代码中。

Add the hidden like so:

添加隐藏如下:

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

Now I suggest you change this code a bit... rather than hard-coding your partial view directly into your "dialog1" , you should insert it via a jquery get-call. New code:

现在我建议你修改一下这段代码……与其将部分视图直接硬编码到“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');
  });
});

So the above makes a get-call to an action named "GetPartialView", and we're passing in the 'id' value of the selected ID. Lastly, we use the 'html' method to insert our partial view into our dialog .

因此，上面调用了一个名为“GetPartialView”的操作，我们将输入所选id的“id”值。

The partial view action:

局部视图操作:

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

  return PartialView("UserPartial", user);
}

And that's it!

这是它!

#2

The most easy solution, is to make a modal foreach individual user.

最简单的解决方案是为每个用户创建一个模式。

In the below View I modified the button and modal to have the id based on user.Id

在下面的视图中，我修改了按钮和模式，使其具有基于user.Id的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>

Note: A better solution will be to have one modal window and change the data from fields, based on what user has been clicked (this is done with jQuery or/and JavaScript).

注意:一个更好的解决方案是有一个模式窗口，并根据用户点击的内容从字段中更改数据(这是用jQuery或/和JavaScript完成的)。

#3

There seems no need for a dialog here since all you need to do is pass the id of the user to a controller method which performs some action to 'ban' the user.

这里似乎不需要对话框，因为您需要做的只是将用户的id传递给控制器方法，该方法执行一些操作来“禁止”用户。

First some issues with you html. You are unnecessarily generating a separate table for each user in the foreach loop and also generating invalid html by duplicating the id attribute for the button. Your view also has @model Project.User but I assume that's a typo and its really @model IEnumerable<Project.User> since you cant enumerate over a single object. Your view should look like

首先是html的一些问题。您不必要地为foreach循环中的每个用户生成一个单独的表，并且通过复制按钮的id属性生成无效的html。您的视图也有@model项目。用户，但我假设这是一个错码和它的真正的@model IEnumerable。用户>，因为您无法枚举单个对象。您的视图应该是这样的。

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

Note the use a class name rather than a id and the users Id value has been added to the button as a data- attribute so it can be retrieved in the buttons .click() handler.

注意，使用类名而不是id，并且用户id值作为数据属性添加到按钮中，以便在按钮.click()处理程序中检索。

Then add a script to handle the button 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?
  });
});

And the controller method

和控制器方法

[HttpPost]
public JsonResult BansUsers(int ID)
{
  // call database to update user based on the ID value
  return Json(true); // signal success
}

Note the ajax ($.post()) function will stay on the same page and allow the user to continue to 'ban' other users. Some options to consider in the success callback include (a) disabling the button i.e. $(this).prop('disabled', true); to prevent the button being fired again (b) removing the row from the table i.e. $(this).closest('tr').remove(); or (c) perhaps changing the button to 'un-ban' the user. You might also consider displaying a confirm dialog and only do the post if the action has been confirmed.

注意，ajax ($.post())函数将保持在相同的页面上，允许用户继续“禁止”其他用户。在成功回调中要考虑的一些选项包括(a)禁用按钮，例如$(this)。道具(“禁用”,真正的);为了防止再次触发按钮(b)从表中删除行，例如$(this). latest(“tr”).remove();或者(c)可能将按钮更改为“unban”用户。您也可以考虑显示一个确认对话框，并且只在操作被确认后才进行发布。

#1