How do I access query data in modal popup

Question

This seems like it should be simple but nothing is in ASP.NET Core MVC. I would simply like to present the results of a query in a table inside a modal popup. The modal is opening but the table is empty. Not just that but the table is getting created before I even click the button to show the modal. I'm hoping some kind person out there can help me.

This is the controller action method:

public async Task<IActionResult> GetStudies(int id)
{
    var results2 = (from s in _context.Studies
                    join sn in _context.StudyNodes on s.Id equals sn.StudyId
                    where sn.NodeId == id
                    select new BundleNodeViewModel
                           {
                               StudyId = s.Id,
                               StudyName = s.Name
                           }).ToList();

    return Ok(results2);
}

This is the function calling the action:

getStudies = (url, id) => { 
        $.ajax({
            type: 'GET',
            url: url,
            data: {
                'id': id
            },
            success: function (res) {
                console.log(res);
                $("#formModal").find(".modal-body").html(res.Name);
                $("#formModal").find(".modal-title");
                $("#formModal").modal('show');
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                console.log(response);
                alert("error");
            }
        })
    };

And this is the modal popup:

<div id="formModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_" style="background-color:transparent; color:aquamarine; border-style:none">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Assigned Studies</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <form asp-action="Bind" asp-controller="Studies">
                                <div class="form-group">
                                    <table class="table table-hover" style="height: 300px">
                                        <thead>
                                            <tr class="position-sticky" style="color:aliceblue; background-color:#126E75">
                                                <th class="text-start">
                                                    Study
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach (var item in Model)
                                            {
                                                <tr class=" table-light">
                                                    <td class="text-start">
                                                        @item.StudyName
                                                    </td>
                                                </tr>
                                            }
                                        </tbody>
                                    </table>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="button" id="btnClosePopup" value="Close" data-dismiss="modal" class="btn btn-danger" />
            </div>
        </div>
    </div>
</div>

I'm really confused about the order in which things are happening. For some reason the code in the modal runs when the parent page is loaded and not when you click the button on the parent page to open the modal. So the model in the foreach() statement is not the model I need it to be. When I click on the open modal button I expect it to go to the controller, get the data and return it to the modal where I can loop through the object and create a table.

Any ideas anyone?

Answer 1

I didn't understand your question but I have tried to do what you might want to do.

1. we have created dummy data which should you get from the ajax.
2. If you don not want to open the modal on page load please remove the Document Ready part.
3. try to place the 'getStudies' function body to your ajax's success block.

$(document).ready(()=>{
  getStudies();
});

var data = [
    { 'StudyId': 1,'Name':"STD 10"},
    {'StudyId' : 2,'Name':"STD 11"}
];

 let getStudies = (url, id) => { 
           $("#formModal").find("tbody").html('');
             $.each(data,(index,val) => 
               {              
                let tr=`<tr class="table-light"><td class="text-start">${val.Name}</td></tr>`; 
                $("#formModal").find("tbody").append(tr);
              });
           $("#formModal").modal('show');
    };

<html>
  <head>
    <title>kaushal</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
  <body> <button onClick="getStudies()">open modal</button>
<div id="formModal" style="width:100%;border:1px solid red;" class="modal fade in" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_" style="background-color:transparent; color:aquamarine; border-style:none">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Assigned Studies</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <form asp-action="Bind" asp-controller="Studies">
                                <div class="form-group">
                                    <table class="table table-hover" style="height: 300px">
                                        <thead>
                                            <tr class="position-sticky" style="color:aliceblue; background-color:#126E75">
                                                <th class="text-start">
                                                    Study
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                           
                                        </tbody>
                                    </table>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="button" id="btnClosePopup" value="Close" data-dismiss="modal" class="btn btn-danger" />
            </div>
        </div>
    </div>
  </div>
  </body>
  </html>