Reusing Razor view component in list context - asp.net-core

Question

Say, on a page I have a list of items and a Delete button next to each. Upon clicking, I want to show a pop-up with a confirmation message.
The confirmation dialog and the deletion functionality are put into a view component.
I know I can do like this:
foreach (var item in Model.List)
{
<tr class="row">
<td class="col-12">
#item.Name
<button class="btn btn-danger ml-auto" data-toggle="modal"
data-target="#delete-item-#item.Id">×</button>
<vc:delete-item-dialog id="delete-item-#item.Id" item-id="#item.Id"></vc:delete-item-dialog>
</td>
</tr>
}
But then each delete-item-dialog view component is rendered separately, bloating the size of the generated HTML.
Is it possible to place that view component only in one place, after the end of the list, and provide the item-id parameter more dynamically?

Answer 1

Is it possible to place that view component only in one place, after the end of the list, and provide the item-id parameter more dynamically?
Yeah, you can use ajax to load the view component dynamically. Below is a working demo.
View:
#model List<User>
<table>
#foreach (var item in Model)
{
<tr class="row">
<td class="col-12">
#item.Name
<button class="btn btn-danger ml-auto" onclick="deleteuser(#item.Id)">
×
</button>
</td>
</tr>
}
</table>
<div id="container">
</div>
#section scripts{
<script>
function deleteuser(id){
$.ajax({
type: 'get',
url: 'GetMyViewComponent?id=' + id,
success: function (result) {
$("#container").html(result);
$('.modal').modal('show');
}
})
}
</script>
}
Controller:
public IActionResult UserList()
{
var users = new List<User>
{
new User{ Id = 1, Name = "Mike"},
new User{ Id = 2, Name = "John"},
new User{ Id = 3, Name = "David"},
};
return View(users);
}
public IActionResult GetMyViewComponent(int id)
{
return ViewComponent("PopUp", id);
}
PopUpViewComponent class:
public class PopUpViewComponent : ViewComponent
{
public IViewComponentResult Invoke(int id)
{
return View(id);
}
}
PopUpViewComponent Razor View:
#model int
<div class="modal fade" id="delete-#Model" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure to delete #Model?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
Result: