Render a partial view inside a Jquery modal popup

问题

The question is : I have View which on model of users displays id of the user and his characteristic on 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 Render a partial view inside a Jquery modal popup:

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

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

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

This is 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!

回答1:

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

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.

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:

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

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

@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).

回答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.

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

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

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.

来源：https://stackoverflow.com/questions/29975413/render-a-partial-view-inside-a-jquery-modal-popup

标签

jquery

html

asp.net-mvc

foreach