Question 87459 in ASP.NET Question posted in
The official documentation can be found here.

How to call a modal when I return data a partial view from the controller in ASP.NET MVC

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">&times;</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>
Tags:

2

Answers


  1. 0

    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)

    Login or Signup to reply.
  2. 0

    The solution proposed by OP seems to be heavily relied on the backend.

    You can also approach the problem from the frontend (as partially proposed by Charles).

    At ASP.NET MVC, you can place your modal entirely as a partial view. And then pass any data to your modal inside a model.

    // My View
@model MyApp.Models.MyModel.SomeViewModel // From any controller

@Html.Partial("~/Views/Home/MyModalFolder/_MyModal.cshtml", Model)
// You can pass any kind of model, even an object property from the model; this could be another view model inside the model. For example: Model.InnerViewModel

    Then, load the model inside a form (for example), inside the modal, with data from the backend, or/and load it with additioanl data using an jQuery ajax call to the backend.

    Let’s say you click a button that calls the following function: It get data from the backend and opens the modal.

    // My script
function GetFile(inputOne, inputTwo) {

    var data = {
        id: inputOne,
        name: inputTwo
    }

    $.ajax({
        url: '../File/Edit', // Any method in the controller is called here
        dataType: "json",
        async: true,
        data: data,
        method: "POST", // The button is posting, or sending a request
        success: function (response) {

            /* Response processing */
            // For example, place the response values inside the form using
            
            $("#AgeFieldId").val(response['AgeData']);
            $("#ProffesionFieldId").val(response['ProffesionData']);

            // Then show the modal
            $('#modalAddOriginalFile').modal('show');
        },
        error: function (ex) {
            console.error(ex.responseText);
        },
    });
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search