Asynchronous reading master detail data not working because of the async:true, otherwise it works

Question

User-251496785 posted

I have a list of persons and when I click on a icon I have a popover that shows details about that person and that works.
My problem is that it needs to be asynchronous.
I have a action result method that generates data based on a person Id and returns a view that is showed in a popover.
I now have that method as a async Task and inside it I use await.
But the problem is when in ajax call I use the attribute async:true, or remove it because of the default value that is true, nothing happens. It doesnt even register that I clicked on a button inside a table.
How to fix this?

If I set async to false it works as it should.

This is my c# code:

 [HttpGet]
        public async Task<ActionResult> PersonDetails(int id)
        {
            var model = await _context.Persons.Where(e => e.PersonId == id && e.Number > 5).ToListAsync();
            return View(model);
        }

This is my ajax call: 

 $('.bInfoPerson').popover({
                title: setData,
                html: true,
                placement: 'left',
                container: 'body'

            });
        });
        function setData(id) {
            var set_data = '';
            
            var element = $(this);
            var id = element.attr("id");
            
            $.ajax({
                url: "/Home/PersonDetails/" + id,
                method: "GET",
                async: true,
               
               
                success: function (data) {
                    set_data = data;
                }, 
                error: function (jqXHR, textStatus, errorThrown) {

                    console.log(jqXHR.statusText + textStatus + errorThrown);
                }
            });
            
            return set_data;
           
        }

How can I fix this?

Answer 1

User475983607 posted

The issue you are facing has to do with fundamental asynchronous programming.  The success handler is triggered when the request is received.  In your code snippet, the setData(id) function is returning before the HTTP response reaches the success handler.  Therefore, set_data will contain an empty string at the moment it is returned from the function.

You'll need to rethink the design.  Place the DOM logic inside the success handler or call a function from the success handler that updates the DOM.

Answer 2

User-251496785 posted

You were right,thanks a lot!