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  id="items" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div  role="document">
    <div >
      <div >
        <h5  id="exampleModalLabel">Modal title</h5>
        <button type="button"  data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div >
      
      </div>
      <div >
        <button type="button"  data-dismiss="modal">Close</button>
        <button type="button" >Save changes</button>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

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  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)