Display partial view inside jQuery modal popup

Question

Question: I have a View, which on the user model displays the user ID and its characteristics 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> } 

In buttonClick, I am viewing 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 pass user id in popup from foreach? This, for example, in a pop-up window gave me: "you selected user number 5", Thanks for the answers!

Answer 1

I created a fiddle to show how to get the id of the selected record:

http://jsfiddle.net/uyg0v4mp/

To explain: your current code cannot indicate which identifier you want to select when you click the Deny button. Therefore, in the script, I created a hidden input containing the ID for each entry in the list / table. In order to display, you can click the button and a warning appears about which identifier you have selected. You should be able to incorporate this idea into your own code.

Add hidden text like this:

 <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 ... instead of hard coding your partial view directly in your "dialog1", you should insert it using 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'); }); }); 

Thus, the above makes a request for action with the name "GetPartialView", and we pass the value "id" of the selected identifier. Finally, we use the "html" method to insert our partial view into our dialog.

Partial view action:

 [HttpGet] public PartialViewResult GetPartialView(int id) { var user = db.Users.Single(r => r.Id == id); return PartialView("UserPartial", user); } 

What is it!

Answer 2

The simplest solution is to make the modal foreach individual user .

In the view below, I changed button and modal to 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 =" [e-mail] ">User Ban</button> </td> </tr> <div id=" [e-mail] " title="Dialog Title">@Html.Partial("UserPartial", user)</div> $(function () { $( "# [e-mail] " ).dialog({ autoOpen: false }); $("# [e-mail] ").click(function() { $("# [e-mail] ").dialog('open'); }); }); } </table> 

Note. The best solution would be to have one modal window and change the data from the fields, depending on which user was clicked (this is done using jQuery or / and JavaScript ).

Answer 3

There does not seem to be a need for a dialog box, since all you have to do is pass the user id to the controller method, which performs some actions to “ban” the user.

You have problems with html first. You randomly generate a separate table for each user in the foreach , and also generate invalid html, duplicating the id attribute for the button. Your view also has @model Project.User , but I assume the typo and its really @model IEnumerable<Project.User> , since you cannot list a single object. Your opinion 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> 

Please note that instead of the id button, instead of id , the id value is added instead of the id name, and the button is added as the data- attribute, so it can be found in the .click() handler.

Then add a script to access the button

 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 } 

Please note that the ajax ( $.post() ) function will remain 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 (b) from being pressed again, deleting a row from the table, i.e. $(this).closest('tr').remove(); or (c) possibly changing the button to "un-ban" the user. You can also consider displaying the confirm dialog box and only make a message if the action has been confirmed.