How can i render partial view as modal popup on button click? - asp.net-mvc

Question

I am trying to render partial view from controller on button click event to view the details. But unfortunately its not working.
My Controller Action
OwnerController.cs
public IActionResult ShowpopUp(int id) {
var venue = _context.Venues.FirstOrDefault(x=>x.Id==id);
return PartialView(venue);
}
My View All.cshtml
#model List<Venue>
<table class="table table-hover">
<thead>
<th> Property Name </th>
<th colspan="2">Action</th>
</thead>
<tbody>
#foreach(var x in Model)
{
<tr>
<td>
#x.Name
</td>
<td>
<a class="btn btn-default btn-sm" id="#x.Id" onclick="Details(this.id)">Show</a>
</td>
</tr>
}
</tbody>
</table>
<script>
function Details(id)
{
$.get("#Url.Action("ShowpopUp","Owner")/"+id,
function(data) {$('.modal-body').html(data);})
$("#myModal").modal("show");
}
$('#myModal').on('hidden.bs.modal', function(e){
$('.modal-body').html("");
})
}
</script>
myModal
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Answer 1

The following example should help achieve your requirement of rendering partial view as modal popup using jQuery Ajax, please check it.
All.cshtml
#model IEnumerable<Venue>
#{
ViewData["Title"] = "All";
}
<h1>All</h1>
<table class="table table-hover">
<thead>
<th> Property Name </th>
<th colspan="2">Action</th>
</thead>
<tbody>
#foreach (var x in Model)
{
<tr>
<td>
#x.Name
</td>
<td>
<a class="btn btn-default btn-sm" id="#x.Id" onclick="Details(this.id)">Show</a>
</td>
</tr>
}
</tbody>
</table>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#section scripts{
<script>
function Details(id) {
$.get("#Url.Action("ShowpopUp","Owner")/" + id,
function (data) {
$('.modal-body').html(data);
});
$("#myModal").modal("show");
}
</script>
}
ShowpopUp action
public IActionResult ShowpopUp(int id)
{
var venue = _context.Venues.FirstOrDefault(x => x.Id == id);
//specify the name or path of the partial view
return PartialView("_VenueDetail", venue);
}
_VenueDetail.cshtml (partial view under Views/Shared folder)
#model Venue
<h1>Venue Details</h1>
<h2>Id: #Model.Id</h2>
<h2>Name: #Model.Name</h2>
Test Result