Скачать или смотреть How to Use Multiple Models in a Razor Page of a Blazor App

Discover how to effectively manage and use multiple models in a Razor page within your Blazor app for better data handling and processing.
---
This video is based on the question https://stackoverflow.com/q/68205664/ asked by the user 'Shrey' ( https://stackoverflow.com/u/16044437/ ) and on the answer https://stackoverflow.com/a/68205816/ provided by the user 'Meer' ( https://stackoverflow.com/u/9907597/ ) 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: How to have multiple models added in Razor page of Blazor app?

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.
---
How to Use Multiple Models in a Razor Page of a Blazor App

When building applications with Blazor, you might encounter a situation where you need to handle multiple models within a single Razor page. This challenge can arise, particularly when your forms require data from different sources or objects. If you've found yourself struggling to figure out how to implement this in your Blazor app, you're not alone. In this post, we’ll address how to elegantly combine multiple models into a single form for a smoother user experience.

Understanding the Problem

The fundamental question arises when you are working on a Razor page with an EditForm, and you need to use attributes from two or more different models. As the standard approach allows only a single model per Razor page, correctly linking attributes from multiple models can be perplexing.

In your Razor page, you might have defined two separate models, for example, Trade and TradePartner. To effectively link these attributes in your form, we need to think outside the box.

The Solution: Encapsulating Models

The recommended strategy for managing multiple models in a Razor page is to create a view model that encapsulates the various models you need. This unified approach allows you to bind the UI to a single model while still maintaining the complexity of multiple data structures.

Step 1: Create a Composite View Model

You’ll need to create a new class to serve as your view model. This class will contain both the Trade model and the TradePartner model, as shown below:

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

Step 2: Update Your Razor Page

Next, update your Razor page to utilize this new view model. Within your <EditForm>, bind to the TradeViewModel instance rather than just one model. This simple change allows you to handle multiple input fields corresponding to different properties.

Here’s how your edited Razor page might look:

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

Conclusion

Using a view model is a clean way to manage multiple models in a single Razor page. By encapsulating your models with a composite class, you can effectively bind your inputs and maintain clear and organized code. This not only simplifies your logic but also enhances the maintainability of your application.

In summary:

Create a new view model that includes both models.

Bind your EditForm to this new model.

Handle submissions appropriately to ensure both models are processed correctly.

By following these steps, you can successfully use multiple models in a Razor page of your Blazor app with ease.