how can I call partial view from button click event - asp.net-core

Question

I have a partail view _delete.cshtml in view\shared folder. I want to call the partial view from the button click event of index.cshtml
#model DeleteViewModel
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">#Model.ConfirmationTitle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
#Model.ConfirmationMesssge
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
I want to call the _delete view from Index html . How can I call _delete partial view from here
<button type="button" class="btn btn-danger m-1" data-toggle="modal">
Delete
</button>
When I click the Delete button of partial view I want to call the action method Delete() from the HomeController.
public IActionResult Delete(Product product )
{
return View()
}
public IActionResult Delete(Product product )
{
return View()
}

Answer 1

Here is a working demo like below:
Model:
public class DeleteViewModel
{
public string ConfirmationTitle { get; set; } = "Delete confirmation";
public string ConfirmationMesssge { get; set; } = "Are you sure you want to Delete ?";
public Product Product { get; set; }
}
public class Product
{
public string productName { get; set; }
public int productPrice { get; set; }
public int quantity { get; set; }
}
View(Index.cshtml):
<button type="button" class="btn btn-danger m-1" data-toggle="modal" data-target="#exampleModal">
Delete
</button>
#await Html.PartialAsync("_Delete")
Partial View:
#model DeleteViewModel
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">#Model.ConfirmationTitle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
#Model.ConfirmationMesssge
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form asp-action="Delete">
<input type="hidden" asp-for="Product.productName" />
<input type="hidden" asp-for="Product.productPrice" />
<input type="hidden" asp-for="Product.quantity" />
<input type="submit" value="Delete" class="btn btn-default" />
</form>
</div>
</div>
</div>
</div>
Controller:
public async Task<IActionResult> Index()
{
var model = new DeleteViewModel() {
Product= new Product()
{
productName="aa",
productPrice=34,
quantity=2
}
};
return View(model);
}
[HttpPost]
public IActionResult Delete(Product product)
{
//do your stuff..
return Json("OK");
}
Result: