I have a controller where I return data in a partial view and I would like to call a modal, how can it be done?
I leave you the details of my controller and view below .
Controller
[HttpPost]
public async Task<ActionResult> Items(List<string> items)
{
var dto = new ItemsDetails();
dto.item = items;
return PartialView($"~/Views/Items/ItemDetails.cshtml", dto);
(Here I want to call a modal)
}
View That is the modal that I want to call.
<!-- Modal -->
@model Application.ItemsDetails
<div class="modal fade" id="items" 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">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">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You open the modal with javascript.
That should be a bootstrap modal.
To select your modal easily you should give it an id like this:
<div class="modal fade" id="myModal">
Then put this script at the bottom of your File
<script type="text/javascript">
$('#myModal').modal('show');
</script>
For this to work JQuery and Bootstrap .css and .js files have to be loaded before. If those are loaded at the bottom of your page you will need to delay your script call until the page is fully loaded.
More Info can be found here: https://getbootstrap.com/docs/4.0/components/modal
If it's not working check the browser console for errors (F12)