Why does browser page flicker on reload?

Question

I have some HTML5 code for an online store. Whenever I click a link to change the product inventory and display a different product line, it makes use of modal and only redraws the part of the browser page for the products.

However, when I replaced modal with ASP.NET code (asp-controller, asp-action, etc.) and clicked the link to refresh the products, the browser flickers and scrolls all the way back up to the top. It doesn't look good to me.

Why is it doing that? Is that the default behavior?

Better yet, can I get it to stop repainting the entire browser page?

Answer 1

Hi @Coreysan,

The problem you're having involves different ways of behaving in HTML5 and ASP.NET. When you use HTML5 and Modal, page content is updated via asynchronous requests. This allows you to partially refresh the page content without causing the entire page to reload or scroll.

And when you convert to ASP.NET code, especially when using the asp-controller and asp-action properties, you may no longer use asynchronous requests. These properties of ASP.NET MVC are often used to generate links to server-side operations. When a user clicks on such a link, the default behavior is to send a brand new request to the server and load a brand-new page. That's why the page flickers and rolls back to the top.

To resolve this issue, you can use 1) AJAX to handle click events for these links. This way, you can request the necessary data and update only a part of the page, not the entire page.2) Use ASP.NET MVC Partial Views that can be loaded and inserted into existing pages via AJAX.3) Use JavaScript or jQuery to block the default behavior in the link's click event, and then handle the event manually (e.g. via an AJAX call).

Best Regards,

Jalpa Panchal

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Typically a link is navigation to a new page, so the screen is redrawn. browsers make an attempt to only update what is needed, but this requires the new html actually match the old, and the changes easily detected.

You can use JavaScript, Ajax and the DOM api to only update parts of the page.