Скачать или смотреть How to Open Multiple Windows in ASP.NET Core Blazor

Discover how to manage multiple windows in ASP.NET Core Blazor applications, a key feature for those transitioning from WinForms. Learn effective strategies to open new tabs that can be dragged to second monitors.
---
This video is based on the question https://stackoverflow.com/q/63591669/ asked by the user 'Paul Stanley' ( https://stackoverflow.com/u/997688/ ) and on the answer https://stackoverflow.com/a/63592793/ provided by the user 'DGrowns' ( https://stackoverflow.com/u/1477006/ ) 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: Multiple Windows In ASP.NET Core Blazor

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

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Managing Multiple Windows in ASP.NET Core Blazor

If you're transitioning from a WinForms environment to ASP.NET Core Blazor, you might be wondering if you can replicate the functionality of opening new windows or forms. In WinForms, the ability to create new forms at the click of a button was intuitive, allowing users to drag them to different monitors for enhanced multi-tasking. But how does this work in a Blazor web application? Let’s explore this further.

The Challenge: Creating Multiple Windows in Blazor

Blazor operates within the confines of the web browser and follows a different paradigm than traditional desktop applications like WinForms. In WinForms, you could easily open a new synchronous window, but in Blazor, the situation is a bit different. Here are some key points to consider:

Web App Technology: Blazor is primarily designed for building web apps, where opening windows operates within the tabbed structure of the browser.

Dialogs vs. New Windows: Most guides focus on creating dialogs. However, dialogs are tethered to the current browser window and cannot be dragged freely across multiple monitors.

The Solution: Using JavaScript Interop for New Windows

To create the effect of having multiple windows in a Blazor application, you will need to utilize JavaScript Interop. This allows your Blazor code to communicate with JavaScript functions that can open new browser tabs. Here’s how to do it step-by-step.

Step 1: Set Up JavaScript Interop

You’ll need to include the necessary setup to inject the IJSRuntime into your Blazor component. Here’s a simple example:

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

Step 2: Create a Method to Open a New Tab

You'll need to create an asynchronous method in your Blazor component that calls the JavaScript function to open a new tab. The code below demonstrates how to do this:

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

Step 3: Trigger the Event

Now, you need to associate the OpenInNewTab method with a user action, such as a button click. Here’s how you could set it up in your Razor component:

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

Dragging the New Tab to Another Monitor

Once you have this functionality in place, users can now click the button to open a new tab pointing to the desired content. They can then drag that tab to another monitor, achieving the multi-window effect sought after by many coming from a WinForms background.

Conclusion

While Blazor may not allow the direct creation of multiple draggable windows like WinForms, it offers a viable workaround using JavaScript Interop to open new tabs. This method not only meets the requirement of displaying information on separate monitors but also keeps a clean and organized user experience within your web application.

Embrace this functionality and bring a piece of your WinForms napkin sketch into the world of modern Blazor applications! By using JavaScript Interop effectively, you can take further steps in enhancing user interactions and creating dynamic web applications that feel more like traditional desktop software.