How to Execute Actions in Razor Pages Without Page Refreshing: A Guide to Using AJAX and Blazor

Learn how to run code in your Razor Pages web app without refreshing the page. This guide introduces AJAX and Blazor as solutions to enhance your web app experience.
---
This video is based on the question stackoverflow.com/q/71860575/ asked by the user 'GeoCode' ( stackoverflow.com/u/18682876/ ) and on the answer stackoverflow.com/a/71860995/ provided by the user 'jabda001' ( stackoverflow.com/u/1637581/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Razor Pages, button that permits to execute code without refreshing the page

Also, Content (except music) licensed under CC BY-SA meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Execute Actions in Razor Pages Without Page Refreshing

When developing a web application, particularly one that interacts with hardware like a PLC (Programmable Logic Controller), enabling seamless user experience is essential. You might be facing a common issue where pressing a button in your web app results in a page refresh, interrupting the interaction flow. This post aims to guide you through solutions that will allow your buttons to execute code without refreshing the page, ensuring a smoother user experience.

Understanding the Problem

In your scenario, you have a web app designed to control hardware via a single-page interface. You can successfully send commands to light up an LED, but every time you interact with a button, the entire page refreshes. This is not only disruptive but also detrimental to user experience. Your current setup uses an HTML form that automatically refreshes upon submission, which is a typical behavior for traditional forms.

The Current Setup

Your setup is illustrated as follows:

You are using a <form method="post"> to handle button actions.

This form contains an <input type="submit"> configured to trigger a specific handler (asp-page-handler="lightOn").

On the server side, you have a method defined as public void OnPostlightOn(), which gets executed when you press the button.

These configurations indeed light up the LED when interacted with, however, they also cause a page refresh that disrupts user experience.

Solutions to Avoid Page Refresh

To execute actions without refreshing the page, there are two prominent solutions you can explore: AJAX and Blazor.

1. Using AJAX

AJAX (Asynchronous JavaScript and XML) allows you to communicate with the server and update parts of a webpage without reloading the entire page. Here's how you can implement it:

Steps to Implement AJAX

Include jQuery or Vanilla JavaScript: AJAX can be implemented using libraries like jQuery or even plain JavaScript. Make sure your JavaScript library is loaded in your project.

Modify Button Element: Instead of using an <input type="submit">, change it to a <button type="button">. This prevents automatic form submission.

[[See Video to Reveal this Text or Code Snippet]]

Add AJAX Functionality: In a <script> tag, implement an AJAX call to execute your backend logic without refreshing the page.

[[See Video to Reveal this Text or Code Snippet]]

Backend Adjustments: Ensure your server endpoint is set up to handle AJAX requests effectively.

2. Utilizing Blazor

Blazor is a modern web framework by Microsoft that allows you to build interactive web UIs using C# . It simplifies the communication between client-side and server-side without the need for JavaScript.

Getting Started with Blazor

Create a Blazor Component: If you haven’t used Blazor yet, create a Blazor component for your button.

[[See Video to Reveal this Text or Code Snippet]]

Automatic Handling: Blazor takes care of the server-side communication using SignalR, meaning you won’t be dealing directly with AJAX payloads.

Conclusion

By implementing either AJAX or using Blazor, you can achieve a responsive web application that interacts seamlessly without unnecessary page refreshes. While AJAX provides more granular control with JavaScript, Blazor simplifies the interaction between frontend and backend using C# directly. Since you mentioned trying out Blazor and achieving your desired solution, feel free to explore these methodologies further based on your preferences and project requirements.

Final Thoughts

In summary, to cater to user interaction needs, leveraging techniques like AJAX or adopting modern frameworks like Blaz