In this video, we are going to learn
about a cool concept, building Hybrid Apps. Imagine combining the best parts
of native apps, like the ones on your phone and web apps, like the ones you
use in your browser. Well that's what we are going to do. Let's Jump Right In and
discover how we can make this magic happen. I have created a fresh empty solution in
Visual Studio named MAUI Hybrid Demo. Now let's proceed to create a new dotnet Maui Blazor
app project. Within the project types drop down you can choose Maui to Access Project types
associated with MAUI. In the provided list, you will find the option labeled .NET Maui Blazor
app. Alternatively, you can locate the same option by filtering for Blazor project types. As you can
see here the identical option is available. Let's proceed with the project creation process using
the specified project name Maui Blazor app. I am creating it. Before we move ahead, I want to
let you know that we have a special tutorial series all about DotNet MAUI. If you are looking
to dive deeper into this exciting technology, you can find the entire playlist Link in the video
description below. Within the Solution Explorer, you will notice a familiar arrangement of files
and folders resembling those typically found in both Maui and Blazor projects. This combination
includes parts of both types of projects. Inside the platforms folder, you'll find the folder
specific to various platforms such as Android, iOS, Mac Catalyst, tizen and windows. Additionally,
there is a resources folder similar to what you would find in a MAUI app. Within this structure,
you will come across pages and shared folders, mirroring the arrangement you see in a Blazor
project. I'll now open the index Razor Component. The content closely resembles what you would find
in a Blazor project. You can create the design of these razor components using HTML elements.
Just as we do in a normal Blazor project. Inside the counter Razor component, we can see a button
that when clicked will increase the value of the current count variable. Moving on to the fetch data
razor component, you will notice a table element designed to exhibit mock weather information. Now
let's navigate to the MauiProgram.cs class. Inside this class you will observe the incorporation
of a Maui webview service into the dependency service. Additionally, there is a designated section
that will only run when the app is being debugged. Within this section, a Blazor WebView Developer
Tools service is integrated. This facilitates the ability to press the F12 key and access
developer options while debugging the application. I'll demonstrate this functionality to you. Let's
proceed by opening the MainPage.xaml file. In this file, you will come across a Blazor WebView element.
The Blazor webview serves as a component that allows you to incorporate a Blazor web application
within your .NET Maui application. In this specific instance, you'll notice that the host page
property has been set to "www.root/index.html". Consequently this page is essentially loaded
within the Blazor webview control, establishing the connection between the two. Now let's explore
the contents of the wwwroot folder. In this folder you will find a CSS directory where the CSS files
are stored. Similar to the structure of a standard Blazor app. Now let's open the index.html file.
Inside, you will notice the inclusion of essential CSS and JavaScript files that are imported for
the Project's functionality. Firstly, let's attempt to run the application on Android and observe how
the pages are presented within our Maui app. You'll notice that the Blazor webview control is directed
to the root page. Now let's proceed to the counter page. Here the click me button is effectively
increasing the counter value. On the FetchData Page, you will find the simulated weather information
being displayed. Now I'll demonstrate how you can access the developer options. Let's execute
the application on a Windows Machine. As you can observe, the MAUI app functions smoothly here as
well. From any of the app's Pages, simply press F12 key and the developer options window will appear.
You can utilize this window just as you would in a typical web application. If our goal is to create
a hybrid application that can be deployed as both a mobile or desktop app and a web application,
it's essential to share the codebase among these platforms. Let's explore how this can be
achieved. To begin, we'll initiate the creation of a Blazor web project. In this example I am opting
for the Blazor server app template from the available project templates. However, you have the
flexibility to choose the Blazor WebAssembly app if you prefer. Let's proceed by providing the project
name as Blazor server app and then creating the project. Before we proceed further, I would like
to highlight that we also offer an informative tutorial series on Blazor. If you are eager to
learn more about this technology, you can access the complete playlist through the link provided in
the video description. At this point, the Solution Explorer displays two distinct projects a Dotnet
Maui Blazor app and the newly added Blazor server app. The next step involves sharing the razor
components between these two projects. To achieve this, I am adding another project to our solution.
We'll change the project type to "All Project Types". From there, we'll search for Razor Class Library,
which you can find listed at the top. I'll proceed by creating a project using this option. An
automatically generated Razor component named "Component1" is present. But it's not necessary, you
can delete it if desired. Let's proceed to create a new razor component. I am assigning it the name
"CustomerComponent". In the code section, I'll create a model class called "Customer" with two properties,
name and email. In this component, we'll implement the functionality to add customers to a table.
To achieve this functionality, in the customer component, we'll need a list of customers to
display in the table, a customer object named model that we'll use when adding a new customer, a method
called "AddCustomer" to incorporate the process of adding a new customer to the list. We'll begin by
placing an input element where users can enter the customer's name. To establish the connection
we'll bind the value of this input to the name property of the model object. Subsequently, I'll add
another input element. This time for entering the customer's email address. Similar to before we'll
set up the necessary binding for this input. For the process of adding a customer, we'll incorporate
a button. Within the onclick event of this button, we'll invoke the "AddCustomer" method. Lastly we'll
include a table in the design. This table will be used to display the list of added customers. In the
layout structure, you'll notice that if there are any customers present in the list, I am utilizing
a foreach Loop to generate distinct rows within the table. On the other hand if the list is
empty, the table will display the message "No Customers Added". Let's proceed to implement this
razor component in both projects. We'll begin by integrating it into the index page of the Blazor
server app project. To utilize the Razor component, we first need to reference the project. Once this
is done, typing the component name will display it in the suggestions. I am simplifying the usage
by removing the namespace from the component tag. As we can directly import it. Let's proceed to
run the Blazor server app project and observe its functionality. You'll notice that the elements
we integrated within the Razor component are now visible on the index page. Upon attempting to
add a customer record you will find that the addition is successful and the customer data
we entered is correctly presented in the table. Aligning with our expectations. Let's proceed to
incorporate the same component into .NET MAUI Blazor app. To achieve this, I'll add the necessary
project reference. Subsequently we can place the component within the index page of dotnet Maui
Blazor app. Now we'll run the application in the Android emulator to determine whether it operates
smoothly. The application loads successfully and you can observe the consistent design. Moving
forward, I would like to highlight a significant aspect. Consider the scenario where there is a
requirement to incorporate platform specific methods within the Maui framework. For instance
consider the requirement to display an alert message using the DisplayAlert method available
within the Maui platform. However this approach might not be suitable for browser environments.
In such cases, an alternative method such as utilizing a JavaScript alert may be necessary in
Blazor server app. Let's proceed to explore the implementation of these functionalities. Within
our Customer Razor component, I'm introducing an additional button. When this button is clicked,
an alert message should be displayed. To accomplish this, I am utilizing the Blazor parameter attribute.
Subsequently I am creating a public event callback named "ShowAlert". For the newly added buttons click
event, I am associating it with this event callback which can then be passed as a parameter. Firstly,
let's pass this parameter from our Maui Blazor project. In the code section, I am introducing a new
method. The method name is "ShowAlert". Although you can choose a different name if preferred. Within
this method, I am utilizing application dot current dot mainpage dot DisplayAlert. Parameters like
title, message and cancel text can be provided to this method. Finally, we can assign this method
to the components parameter named "ShowAlert". Now let's move to the Blazor server app. Within this
project, we need to display the alert using a JavaScript function. Similarly I am introducing
a new method in this context. To interact with JavaScript methods, I am injecting the IJSRuntime
service. We can then directly invoke the JavaScript alert method and provide the message. Subsequently
we'll assign this method to the EventCallBack parameter. For seamless functionality, let's
proceed to run both projects concurrently. Within the solution properties, I am selecting
multiple startup projects and adjusting the action settings for both projects. Now I'll initiate the
execution. This will open both the Android Emulator and the browser simultaneously. Let's begin by
testing it on Android. As you can observe, the Android native alert dialog is displayed. On the
other hand in the Blazor server app project, the conventional browser-based alert is being
presented. In the Maui Blazor app, let's add another feature to examine internet connectivity.
This functionality is commonly required in Mobile or desktop apps. I'll implement this by checking
the connectivity within an if condition. If no connectivity is detected, I am displaying an
additional alert. It's noteworthy that connectivity class is located under Microsoft.Maui.Networking.
Just like in a standard MAUI app, these methods can be utilized within a Maui Blazor app as
well. Let's proceed to run the project in the Android emulator and conduct a test. Initially
I'll enable airplane mode to simulate a lack of internet connectivity. As expected the app displays
the connectivity alert upon clicking the button. Subsequently I'll disable the airplane mode and
click the button again. At this point, you'll notice that the connectivity alert doesn't appear as
connectivity has been restored. We hope you have enjoyed this tutorial and gained valuable insights
into the art of building versatile apps. Thank you for joining us today and we look forward
to seeing you in our next video. Happy Coding!
