Render a partial view inside a Jquery modal popup

Question

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!

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