How to Use Blazor Components in ASP.NET Core MVC?

as developers we want to use the latest and greatest Technologies however sometimes we have to work on existing applications and use the existing framework or technology in this video I will show you how to use Blazer components in an existing asp.net core MVC application no more excuses for not using Blazer components in your existing net web application I use an MC application on net 8 generated by the default project template in Visual Studio 2022 for this demo when I start the application we see that there is a home and a privacy page both Pages have some text and enough space to add more content let's add a Blazer component to enhance the application let's start by adding a components folder next we create a Blazer component and name it random number I prepared a code for this component because it's not the core of this video to show you how to implement Blazer components I have a whole playlist with blazer videos explaining Blazer in more detail such as explaining how to implement Blazer components I highly recommend watching those videos if you want to learn more about Blazer development the component shows a random number and provides a button to generate a new random number we also generate a value when the component is initialized and whenever the button is pressed now the big question is how do we integrate this Blazer component into our existing MVC application we want to use the random number Blazer component on the index page of the MVC application we use the HTML Helper and its render component async method to render a Blazer component we need to provide a render mode as the only argument in this case I want to use bler server as the interactivity mode but you could also use bler web assemly let's talk about bler web assemly later in this video now make sure to add the required using statement for the component's Nam space the integration of a Blazer component into our MVC application looks simple right but does it actually work let's start the application and see unfortunately nothing happened and we see the same homepage we saw before adding the Blazer component the reason is that we first need to configure our asp.net core MVC application to work with blazer components in the program. Cs file we register Blazer services using the ad server side Blazer method in addition to the controllers and Views next we need to register the signal R connection for Blazer server as a middleware using the map Blazer Hub method on the web application object next we open the layout. Cs HTML file which contains the root of the HTML page layout at the bottom of the page we need to add the Blazer server script now let's start the application again as we can see the random number is shown on the screen and whenever we click the generate button a new number appears it all happens client side there is no page load required when you implement more bler components especially those who need access to specific features like routing forms or other bler specific classes you need to import those namespaces into your bler component files we can reduce the number of using statements required to import the bler namespaces by adding an imports. Riser file within the components folder of the application it's similar to the Imports file generated when using the default Blazer application template maybe you ask yourself why should you integrate bler components into your existing MVC application you can only use CP to implement service side logic when using traditional MVC if you want to have client side interactivity on your website you need to use JavaScript however when you add Placer components to your existing MVC application you can use C to implement the logic for your client side interactivity maybe you already have some Blazer components from another project you can extract them into a raser components library and reuse those components within your MC application speaking of Razer class class libraries let's create a new project name it shared components and move the random number component into that shared Tracer class Library we remove the implementation in our MVC application project and add a reference from the MVC application to the shared class library next we open the index. CSH HTML file and point the using statement to the namespace from within the shared components project and we start the application again as you can see the application still works and the random number Blazer component is now loaded from the shared class Library instead of from within the MVC project if you want to make your Blazer components available from outside your MVC application it might be worth starting implementing your components in a shared class library from the beginning otherwise you can keep them all within your MVC application but what if you want to use bler web assembly instead of place a server in our MVC application let's start over again with a new MVC application first when using web assembly we need a separate project that contains code that will be deployed onto the client we create a new project and use the Blazer web assembly app m empty project template I usually name the project the same as the main application and add client at the end make sure that the asp.net core hosted option in the project creation wizard isn't selected and create the new project when the project is created we add a project reference from the MVC application to the newly created Blazer web assembly project next we need to install a new get package to the MVC project that will add Blazer web assambly functionality we install the microsoft. aspet core. components. web ass sample. server package next we open the program. Cs file of the MVC project here we want to add the use web assembly debugging method for the development environment adding it will allow you to debug the web assembly components in the browser Dev tools next we add the use Placer framework files after the use authorization method it configures the application to serve Placer related files now we open the program the Cs file of the web assembly project we created here we remove the lines that add root components next we remove the page folder including the index page component the app component the main layout component and the example JS interrupt. CS file remember we don't want to have a fully fledged Blazer web assembly application instead we want to use bler components within our MVC application we now only have an imports. Riser file and the program.cs file in the Blazer web assembly project next we create a new bler component named random number and insert the same component code we used in the Blazer server example before we now want to use the random number component in our MVC application again we open the index. CSH HTML file in the MVC application this time though the code looks different we use the component tag which is a tag helper that renders the razor component we provide the random number type and use we a simply pre-rendered as the render mode again this video isn't about bler and its rendering modes if you want to learn more about them I highly recommend watching this video where I explain them in full detail last but not least we open the layout. cshtml file and add the bler script at the end of the file this time we use the blazer. web.js file instead of the blazer. server. JS file now we are ready to build and start the MVC application as you can see the website looks the same and the number generator Works similar to the bler server implementation the only difference is that we now execute the code client side using web assembly instead of server side using Blazer server via a signal R connection this takes us to the question of whether you want to use bler server or bler web ass simply for your MVC application the answer depends on different factors for example the application size increases when using Blazer web assembly however when you use Blazer server each client has a persistent websocket connection to your server and if the client has an internet issue that becomes a problem or when you have many simultaneous users it can also become an issue for your server I highly suggest educating yourself on the differences between bler server and bler web assembly before making a decision for your project of course I have several videos covering bler server and bler web ass sample in more detail if you want to skip educating yourself and want to make a decision now I recommend starting with bler web assembly we learned how to use bler components inside an MVC application we not only learned how to use components from within the MVC project but also how to use bler components from a shared class Library besides Blazer server we also learned how to use Blazer web assembly to add interactivity to your existing MVC application adding Blazer to our existing MVC application allows us to add client side interactivity implemented in C instead of JavaScript we also quickly looked at the differences between Blazer server and Blazer web assembly if you want to learn more about net development including Blazer subscribe to the channel and I will see you in the next video

Channel: Claudio Bernasconi

Views: 2,124

Keywords: Blazor Components in AspNetCore MVC, Blazor Components in ASP.NET Core MVC, How to use Blazor Components in MVC, Blazor in MVC, Blazor in Asp.net core MVC, Blazor Server in mvc, Blazor WebAssembly in MVC, Integrating Blazor in Asp.NET Core MVC, Blazor Server vs. Blazor WebAssembly for Asp.NET Core MVC, .NET 8, .NET, dotnet, dotnet 8, Claudio Bernasconi, Blazor, ASP.NET Core, Blazor Tutorial

Id: FZg80ea9W54

Length: 11min 42sec (702 seconds)

Published: Tue Dec 26 2023