Dynamically rendering API data in Modal popups

Modal popups are becoming increasingly popular in the wide world of websites. They are mostly used for user prompts - e.g. do you accept these cookies? Are you sure you want to download this? and they're also very popular for login and verifying whether the user is a robot or not.

To get started, I used a regular bootstrap modal popup for styling and modal popup functionality. The modal appears when a user clicks on a cryptocurrency and displays a spinning 'loading' wheel until detailed data has been rendered:

When a cryptocurrency is clicked, a call is made to the following JQuery function. This function takes in a parameter of 'id' which is passed along using razor syntax.

The function makes an AJAX call to ‘api/cryptodetails’ which calls an IHttpActionResult called “GetCryptoDetails” and passes along the id as a paramater. This ActionResult then makes a call to a class called “ApiCall” and a function “DoIT”. This is where the call to the API is completed using the Restsharp namespace and passing along required authentication in the form of an API key. The API data is returned back to the “GetCryptoDetail” method. The API data is then converted into a JSON string and returned in the form of a large HTML string.

Dynamically rendering data like this, greatly enhances website performance and user experience for multiple reasons. There is no need to render an entire new page in order to display detailed information. The detailed information will render more swiftly and therefore improve the user experience.

Hopefully the code examples help, there are some aspects missing in this article. Feel free to reach out on more specifics.

Related posts:

The nature of the topic of climate change already sounds doom and gloom, while bringing the topic up at the dinner table makes you the defacto wet blanket. If you are like me, I am often times called…

Life is full of surprises, challenges, and opportunities. No matter where you are on your journey, there’s always something to learn and discover. Over the years, I’ve had the privilege of meeting…

Our brain is negatively affected by chronic inflammation which is the metabolic imbalance caused by stress, poor eating habits, lack of exercise, or metabolic diseases. The bad news is that as we age…