is it possible to pass Model to Partial View using JavaScript? - asp.net-mvc

Question

I need to pass a Model to a partial view. I first pass a value of ID, then I get the Model I need based on that ID.
The scenario: I have a table with a delete button in each row. I need to display a confirmation bootstrap modal that includes a Model.
The problem, it's not working and I don't know if there another way to do that or not
In the section of javascript BPCategoriesId not recognized
Here is my code attempt.
Delete Button
#foreach (var item in Model.BPCategories)
{
...
<button type="button" data-id="#item.Id" class="btn btn-outline-danger w-50" data-bs-toggle="modal" data-bs-target="#exampleModal">
Delete
</button>
...
}
Bootstrap Modal
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirm Delete</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="ModelLoad">
<!--here I need to load my partial view with a model using JS-->
</div>
<!--<partial name="Delete" model="#Model.BPCategories.Where(id => id.Id == returnID()).FirstOrDefault()" />-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<form asp-action="Delete">
<input type="hidden" asp-for="Id" />
</form>
</div>
</div>
</div>
</div>
JavaScript
<script>
$(document).ready(function () {
var btns = document.querySelectorAll('[data-id]');
for (let btn of btns) {
btn.addEventListener('click', () => {
let BPCategoriesId = btn.dataset['id'];
var jsonModel = #Html.Raw(Json.Serialize(#Model.BPCategories.Where(id => id.Id == BPCategoriesId).FirstOrDefault()));
$("#ModelLoad").load('#Url.Action("Delete", "BootstrapCategories")', jsonModel);
});
}
});
</script>

Answer 1

#model LoadPartialView.Models.TestViewModel
#foreach (var item in Model.BPCategories)
{
<p>
<button type="button" data-id="#item.Id" class="btn btn-outline-danger w-50" data-toggle="modal" data-target="#exampleModal">
Delete
</button>
</p>
}
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirm Delete</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="modelLoad">
<!--here I need to load my partial view with a model using JS-->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<form asp-action="Delete">
<input type="hidden" asp-for="Id" />
</form>
</div>
</div>
</div>
</div>
#section scripts {
<script type="text/javascript">
$(function () {
var btns = document.querySelectorAll('[data-id]');
for (let btn of btns) {
btn.addEventListener('click', () => {
let bpCategoryId = btn.dataset['id'];
$("#modelLoad")
.load('#Url.Action("Delete", "BootstrapCategories")', {
bpCategories: JSON.parse('#Html.Raw(Json.Encode(Model.BPCategories))'),
bpCategoryId: bpCategoryId
});
});
}
});
</script>
}
Demo is pushed to GitHub.