Ed Charbeneau

Integrating Blazor with Existing .NET Web Apps

Tue, 14 Nov 2023 00:00:00 +0000

ASP.NET’s RazorComponent model is intuitive and brings productivity to web development. In this session we’ll learn how RazorComponents aren’t just for Blazor apps and how we can integrate the best part of Blazor with existing ASP.NET applications using: Razor Pages, MVC, and even other front-end technologies.

Blazor from MVC, Blazor from Razor Pages

Because Blazor is part of ASP.NET Core it is possible to mix UI frameworks such as: ASP.NET MVC (Razor Views), Razor Pages, and Blazor. ASP.NET Core’s modular middleware system configures how ASP.NET Core responds to requests and routing, this means we can opt into each UI framework and several routing options.

For instructions on setting up Blazor in an existing app, you can look at the official docs.

Docs: Integrate ASP.NET Core Razor components into ASP.NET Core apps

The following example application uses a different configuration which predates the documentation linked above. This configuration reuses the existing application’s layout making it easier to transition code to Blazor without duplicating the main applications layout and instead uses a _Host.cshtml file to host Blazor (vs. App.razor).

This example also includes usage of the <component> tag helper. The <component> tag helper allows Razor Views and Pages to display Blazor content. The example incorporates both Telerik UI for Blazor and Telerik UI for ASP.NET Core. The Telerik UI libraries work together with seamless theme capabilities, and support for .NET 8. The Telerik UI libraries require a license to run the application, a free trial of Telerik DevCraft is available.

Telerik Eshop ASP.NET Core and Blazor Demo

Blazor from Angular, Blazor from React

If an application is hosted by ASP.NET Core it can take advantage of Razor Components. Even if the current app does not use one of the ASP.NET Core UI stacks integrating Blazor is still possible. The core of using Razor components in JavaScript apps and SPA frameworks relies on a web standard technology called Custom Elements, part of the Web Components spec. The following docs explain how to enable Blazor Custom Elements and use them in SPA frameworks.

Docs: Use Razor components in JavaScript apps and SPA frameworks

This example uses the ASP.NET Core React template and Blazor Custom Elements to render a Blazor element from React.

https://github.com/EdCharbeneau/ReactAppDotnetConf

This example uses the ASP.NET Core Angular template and Blazor Custom Elements to render a Blazor element from Angular.

https://github.com/danroth27/BlazorCustomElements

Another .NET Conf session covered React Migration in detail. If you are coming from a React application to ASP.NET Core then this session will be interesting to you.

Blazor from WebForms

Similar to the approach above that uses Blazor Custom Elements, WebForms can also take advantage of this technology. Using Blazor Custom Elements in addition to the System Web Adapaters library and a YARP proxy a Razor Component can be rendered within a WebForms app. This is a nice stepping stone in migrating existing WebForms apps to Blazor.

https://github.com/dotnet/systemweb-adapters/tree/main/samples/WebFormsToBlazor

If you’re interested in rewriting your app from scratch using Blazor instead of migrating piecemeal, then give the Blazor Migration workshop using Telerik UI for Blazor a try.

Blazor from Web API

Razor Components can also be rendered directly from Web API, docs on how this is accomplished can be found below.

Docs: Render Razor ASP.NET Core Web API

Telerik UI for Blazor

Make sure you check out the full range of capabilities possible with Telerik UI for Blazor. There are over 100 components to help build your next Blazor app. In addtion, Telerik UI for Blazor includes scaffolding tools, document processing libraries, theme options, and templates to enhance productivity.

Telerik UI for Blazor Demos

.NET 8 Day 1 Support

Progress Software is proud to announce that multiple Telerik products support NET 8 on day 0! Get started using the next generation of .NET today with support from Progress.

Telerik UI for Blazor and ASP.NET Core in .NET 8 and Beyond

.NET Conf for Blazor Developers

Tue, 07 Nov 2023 00:00:00 +0000

.NET Conf is a world wide event that takes place over three days. Sessions are streamed 24 hours a day for two solid days! With all of that content it’s quite easy to miss out on something important. As a Blazor developer myself, I wanted to make sure I don’t lose track of any important content and compiled a list of Blazor sessions that shouldn’t be missed.

There’s amazing content in all 3 days of .NET Conf and you will be able to catch it all on YouTube later. But if you’re pressed for here is the “Blazor track”:

Tuesday, November 14

11:00 AM - 12:00 PM EST

Welcome to .NET 8 (Keynote)

See the team behind .NET and learn about .NET 8 and the roadmap ahead.

12:00 PM - 1:00 PM EST

Full stack web UI with Blazor in .NET 8

Daniel Roth and Steve Sanderson talk about the new direction Blazor has taken with the “Blazor United” initiative. Blazor’s capabilities have grown in .NET 8 offering static, server, and client rendering modes. This is the must see session for Blazor developers.

2:00 PM - 3:00 PM EST

Performance Improvements in .NET 8, ASP.NET Core, and .NET MAUI

Blazor has received performance improvements in .NET 8. This will likely be highlighted along with performance wins in other framework topics as well. AOT, JSON, JITerpreter, and WASM news is possible.

3:00 PM - 3:45 PM EST

What’s New in C# 12

With Blazor being a full stack web UI, there is no doubt that C# 12 features will strengthen your Blazor skills.

Wednesday, November 15

Wednesday marks the beginning of the first 24 hour stream. All presenters in this 24 hour period are Microsoft engineers or PMs.

1:30 PM - 2:00 PM EST

In .NET 8, ASP.NET Ate

Engineers from the .NET team working on things like Web API. We’ll likely see new Minimal API features, tooling, etc.

2:00 PM - 2:30 PM EST

What’s new in System.Text.Json

There’s some cross over with Blazor here. If you’re working with HttpClient or JavaScript interop JSON has some influence on your application and its performance.

2:30 PM - 3:00 PM EST

Tiny, fast ASP.NET Core APIs with native AOT

Native AOT apps have faster startup time and smaller memory footprints. These apps can run on machines that don’t have the .NET runtime installed. AOT support in .NET 8 is more comprehensive than in .NET 7 and will likely influence Blazor.

4:00 PM - 4:30 PM EST

Visual Studio Updates for .NET Devs

If you’re interested in Blazor and Blazor Hybrid make sure you tune in to see what Dev Tunnels is all about.

5:00 PM - 5:30 PM EST

ASP.NET Core Authentication Simplified

Authentication should be easier in .NET 8, in addition to the new Identity Blazor Components. The Identity UI has been rewritten with Razor Components, making Identity seamless with Blazor.

6:30 PM - 7:00 PM EST

Build hybrid apps with .NET MAUI

Blazor Hybrid has massive potential for deploying to web, desktop and mobile from a single code base. If you’re interested in cross platform development make sure you don’t miss this session and hear about it directly from the engineering team.

Thursday, November 16

Thursday marks the beginning of the second 24 hour stream. All presenters in this 24 hour period are community contributors, content creators, and MVPs. 6:30 AM - 7:00 AM EST | Migrating a React Application to Blazor

If you’re coming from a React codebase to Blazor, this is the session for you.

7:00 AM - 7:30 AM EST

How to Achieve Optimistic Updates with Blazor and EF Core

In this session, you will learn how to implement optimistic updates with Blazor and Entity Framework Core (EF Core).

10:30 AM - 11:00 AM EST

Building beautiful Blazor apps with Tailwind CSS

If you’re going to learn about Tailwind, you should hear it form expert Chris Sainty.

11:00 AM - 11:30 AM EST

Blazor-testing from A to Z

Save time and increase your app’s stability by unit testing your components. This session is presented by bUnit creator Egil Hansen.

12:30 PM - 1:00 PM EST

Blazor Puzzles and Answers

A fun session by two very entertaining individuals Jeffrey T. Fritz and Carl Franklin. Don’t miss it.

1:00 PM - 1:30 PM EST

Integrating Blazor with existing .NET web apps

In this session I talk about how to transition your MVC, Razor Pages, and other app models to use Blazor’s Razor Component architecture. Mixing and matching architectures is surprisingly effective and relatively easy.

3:30 PM - 4:00 PM EST

Clean Architecture with ASP.NET Core 8

This session is a great way to round out your ASP.NET Core skills. It’s the least Blazor specific in my recommendations but still makes the list due to the importance of clean coding. Steve Smith is an excellent authority on the subject and wont disappoint.

Conclusion

There are plenty of amazing sessions not listed here, make sure you revisit .NET Conf when the replays are posted online and catch the sessions you missed.

The Future of Cross Platform Blazor

Wed, 25 Oct 2023 00:00:00 +0000

With .NET 6 Blazor can target multiple platforms. In this session we’ll explore the various Blazor targets and how to choose between them. Learn the tradeoffs and advantages of: Blazor Hybrid, Blazor Progressive Web Apps (PWAs), and Blazor Electron.

Learn Blazor

Learn Blazor, access books, and get certified all in one place. If you’re just starting to learn Blazor check out my Manning liveProject Build Web Apps with Blazor. This four part series takes you through a fictional on the job training where you’ll learn Blazor in a workshop backed with learning resources from Manning and more.

Learn More About: Build Web Apps with Blazor

Blazor Hybrid Web Apps with .NET MAUI

Microsoft has introduced the highly anticipated Blazor framework in ASP.NET Core 3.0. In .NET 5.0, Blazor received significant updates to its component model, plus speed improvements and pre-rendering capabilities. Blazor’s initial focus was to allow developers to target the browser using the .NET stack with little or no JavaScript required, all without a single browser plug-in. The key to Blazor’s success is its ability to enable .NET developers by leveraging their existing skills. Using Blazor, .NET developers can build a full-stack application using only .NET technologies.

In .NET 6.0, the Blazor framework finds yet another path for developer success with .NET MAUI. MAUI provides a set of technologies that enable apps to run on Web, desktop, and mobile. This new pattern is named Blazor Hybrid and, once again, developers are empowered to use their existing skills to reach even more ecosystems. With Blazor Hybrid, native desktop on Android, iOS, macOS, and Windows are now within reach.

Read Blazor Hybrid Web Apps with .NET MAUI

Blazor Hybrid and Web in One Solution

The eBook is all about examining the architecture behind a Blazor application that targets web, desktop and mobile. With each chapter and example, you’ll gain more insight on how to structure, run, and test such cross-platform apps.

By leveraging the techniques described in this e-book, you’ll be able to quickly become familiar with Blazor Hybrid applications, identify potential roadblocks, and implement unit tests with Razor components. Each idea is presented in a way to get started and be productive right away.

The “Blazor Hybrid and Web in One Solution” eBook covers these all-important topics:

Introduction to Cross-Platform
Code Organization
Blazor Hybrid and We Client Set Up
Adding Blazor Hybrid to a Web Solution
Razor Class Library with Blazor WASM
Razor Class Library with Blazor Hybrid
Android Emulation with Localhost
Testing Razor Components

Free eBook: Blazor Hybrid and Web in One Solution

Sands of MAUI

Welcome to the Sands of MAUI—newsletter-style issues dedicated to bringing together latest .NET MAUI content relevant to developers. By Sam Basu

A particle of sand—tiny and innocuous. But put a lot of sand particles together and we have something big—a force to reckon with. It is the smallest grains of sand that often add up to form massive beaches, dunes and deserts.

Most .NET developers are looking forward to .NET Multi-platform App UI (MAUI)—the evolution of Xamarin.Forms with .NET 6. Going forward, developers should have much more confidence in the technology stack and tools as .NET MAUI empowers native cross-platform solutions on mobile and desktop.

While it is a long flight until we reach the sands of MAUI, developer excitement is palpable in all the news/content as we tinker and prepare for .NET MAUI. Like the grains of sand, every piece of news/article/video/tutorial/stream contributes towards developer knowledge and we grow a community/ecosystem willing to learn and help.

Read Sands of MAUI

Telerik UI for Blazor

Cut development time and cost in half with the Telerik high-performing Grid and 95+ truly native, easy-to-customize UI components to cover any app scenario.

See Telerik UI for Blazor

Telerik UI for .NET MAUI

Kickstart your multiplatform application development with a Preview version of Telerik UI for .NET MAUI controls. While in Preview, they are free to download and play with!

See Telerik UI for .NET MAUI

Demos / Recording / Slides

Build for all clients with one solution. Blazor Hybrid and Web in One Solution Example

Warning, slides include video about 200mb. Don’t try this on mobile. Presentation Slides

Presentation from Stirtrek 2022 The Future of Cross Platform Blazor Stirtrek - YouTube

Updating Android SDKs from Visual Studio

Fri, 14 Jul 2023 00:00:00 +0000

Recently I ran into an issue with a Blazor Hybrid application. The app compiled, and ran just fine on web and desktop, however I immediately hit an exception on Android.

Uncaught TypeError: t.split(...).at is not a function", source: https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js (28)

This ugly and cryptic error didn’t make much sense at first. The problem appears to come from the Telerik UI for Blazor component library, although it’s not actually the real reason for the exception. If we take a closer look we can see the real reason t.split(...).at is not a function is the true root of the problem. But why on Android only, and what is making it happen.

The WebView

Blazor Hybrid applications rely heavily on a WebView. The WebView is a browser which is embedded in the Blazor Hybrid app. The WebView implementation can vary from device to device. For most modern Android systems the WebView is the latest version of the Chrome browser. However, for my environment I had an emulated device that was using an older version of the Android SDK, thus the WebView implementation was outdated.

Outdated WebView

The error in this case was actually caused by the outdated WebView. The WebView was too old to support the at function in JavaScript, a function that was being called by Telerik UI for Blazor’s JavaScript interop to set up a complex PDF Viewer component. If we take a quick look at CanIUse, the at function was supported in Chrome 92, which means the WebView predates 2021. To fix this issue the emulated device needs an update.

Updating the Android SDK from Visual Studio

I’m using Visual Studio for all of my development. It comes with built-in dialogs for the Android SDK Manager, and Andriod Device Manager. To update the SDK on my system, I had to follow these five simple steps.

Open the Android SDK manager from Visual Studio. TOOLS > Android > Android SDK Manager

In the Android SDKs and Tools dialog, look for a button on the lower left labeled “(n) updates” and apply all updates where (n) is the number of updates to apply, the button is not shown if updates are not available. Then choose the SDK Platform (lastest) and apply it.

Open the Android Device Manager from Visual Studio. TOOLS > Android > Android Device Manager.

Choose your Android image, from the device list.

Apply the latest SDK as the OS for that device.

One the device is updated, restart Visual Studio.

I had to restart Visual Studio after the update. Before restarting Visual Studio, I received a long list of compiler errors. My theory is that VS still had processes running during the update process and could not see any of the Android SDKs. Restarting Visual Studio reset those processes.

Conclusion

It’s probably a good idea to update your Android SDKs regularly. Even if you’re not running into immediate errors, it will help ensure your device image has the feature capabilities you’re targeting with your app, and reduce time spent troubleshooting.

Note: I had to restart Visual Studio after the update. Before restarting Visual Studio, I received a long list of compiler errors. My theory is that VS still had processes running during the update process and could not see any of the Android SDKs. Restarting Visual Studio reset those processes.

The Future of Cross Platform Blazor Stirtrek Edition

Tue, 26 Apr 2022 00:00:00 +0000

Learn Blazor

Learn More About: Build Web Apps with Blazor

Blazor Hybrid Web Apps with .NET MAUI

Read Blazor Hybrid Web Apps with .NET MAUI

Sands of MAUI

Welcome to the Sands of MAUI—newsletter-style issues dedicated to bringing together latest .NET MAUI content relevant to developers. By Sam Basu

Read Sands of MAUI

Telerik UI for Blazor

Cut development time and cost in half with the Telerik high-performing Grid and 95+ truly native, easy-to-customize UI components to cover any app scenario.

See Telerik UI for Blazor

Telerik UI for .NET MAUI

Kickstart your multiplatform application development with a Preview version of Telerik UI for .NET MAUI controls. While in Preview, they are free to download and play with!

See Telerik UI for .NET MAUI

Demos / Recording / Slides

Build for all clients with one solution. Blazor Hybrid and Web in One Solution Example

Warning, slides include video about 200mb. Don’t try this on mobile. Presentation Slides

Presentation from Stirtrek 2022 The Future of Cross Platform Blazor Stirtrek - YouTube

Setting Up Sass with Blazor

Sat, 24 Apr 2021 00:00:00 +0000

I’ve been using Sass (.scss) for web design for quite a few years now. I learned Sass from some of the best, working primarily with contributors who built the Foundation framework over at Zurb. While Foundation and Bootstrap have slowly declined in popularity, Sass holds strong and still offers features that exceed the basics of CSS. During my experience with Sass I’ve seen the framework evolve from a Ruby based tool, to libsass. With that transition the installation process has gotten shorter and simpler as well.

In this article I’ll show you how to get Sass working in your Blazor project in 3 short steps. It won’t require gulp, grunt, webpack or any additional tools, just a simple package.json file and npm script as all you need.

Setting Up Your Blazor Project for Sass

In order to install and run Sass you’ll need a package.json file. If you already have one you can skip this step. I’m going to assume you already have the Node tools as they come with most SDK’s these days.

In your Blazor application, in the root folder where the client resources are found (ex: the project where your wwwroot and css is located) run the npm init command.

npm init

Just spam the enter key as it takes you through each step until the process completes. This will produce a package.json file. The package.json file is where we will install the Sass tool and script to run it.

Installing Sass

Now that we have a package.json file in our project we can install Sass. To install the Sass compiler simply run the command npm install sass --save-dev.

npm install sass --save-dev

Alternatively, you can add the line manually to your package.json file.

  ...,
  "devDependencies": {
    "sass": "<version>"
  },

No there’s not additional steps, that’s all it takes to install Sass, now we just need to invoke the compiler to do its thing.

Compile Sass In One Step

Lastly, we need to tell the Sass compiler what to do. Open the package.json file and add an script to execute the compiler using npx (node package execute). The Sass tool takes a very simple set of arguments, input and output.

A note on npm vs. npx: Npm is a tool that use to install packages. Npx is a tool that use to execute packages.

The completed script should look like the following.

[package.json]
...
  "scripts": {
    "sass": "npx sass ./mypath/site.scss ./wwwroot/css/site.css",
  },
...

Add a Watch Script

This step is optional, but highly recommended. In this step, we’ll add an additional script that will run a watch command. If you’re not familiar with a watch command, this simply tells Sass to look for changes and execute automatically when a change is detected.

[package.json]
...
  "scripts": {
    "sass": "npx sass ./mypath/site.scss ./wwwroot/css/site.css",
    "sass:watch": "npx sass --watch ./mypath/site.scss ./wwwroot/css/site.css"
  },
...

Run the Script

With the scripts added we can return to the command line and run the npm script.

npm run sass

If you want to watch instead, simply append the watch suffix to your command.

npm run sass:watch

Bonus: MSBuild

You can further integrate the process by adding a config to your .csproj file which will initiate the npm script before MSBuild compiles the application. Note: This does not work with watch scenarios.

  <Target Name="BuildCssDev" Condition="'$(Configuration)' == 'Debug'" BeforeTargets="Build">
    <Exec Command="npm run your-script-here" />
  </Target>
  <Target Name="BuildCssProd" Condition="'$(Configuration)' == 'Release'" BeforeTargets="Build">
    <Exec Command="npm run your-script-here" />
  </Target>

This tip comes from Erwin Kuhn.

That’s All

This is really all it takes. It’s only a few simple steps with no additional tooling required (Gulp, Grunt, Webpack). You’re ready to write and compile Sass in your Blazor app now.

You might be asking yourself why every Google search turned up massive multi-step articles about Gulp, Grunt, or Webpack; well it’s my opinion that this was the way to do it, up until a point. As SPA frameworks evolved, Sass was included by default with the desired framework. Setting up Sass was well documented with Gulp, Grunt and Webpack, and remains well indexed today. As new frameworks adopted Sass and internalized it, nobody documented how to work Sass independent of a framework. The requirements and steps got easier and fewer, but this was no longer important enough to blog about. Leaving us where we are today, with Sass super easy to install, but looking for documentation turns up age old tutorials of when it used to be difficult.

But What About CSS Isolation

While I understand that people feel they have a need for CSS isolation, I still feel strongly that it’s an anti-pattern. Yep, just think about it, you’re basically taking the Cascade out of CSS. So, you wont find guidance here. I can say it should work, but I can imagine some up hill battle with generating a .css file for each .sass file, per component. (shrug)

If you’re already using Sass, and considering CSS Isolation, you may want to ask “what is isolation giving me that I don’t already have with Sass”.

TLDR

Add or merge the following package.json settings.

[package.json]
{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "sass": "npx sass ./mypath/site.scss ./wwwroot/css/site.css",
    "sass:watch": "npx sass --watch ./mypath/site.scss ./wwwroot/css/site.css"
  },
  "devDependencies": {
    "sass": "1.32.11"
  },
  "author": "",
  "license": "ISC"
}

Run the following commands.

npm install (first time only)
npm run sass
(or)
npm run sass:watch

Blazor Layout Components

Mon, 22 Feb 2021 00:00:00 +0000

I recently wrote in an article titled “10 Blazor Features You Probably Didn’t Know” that Blazor can do anything HTML/CSS can do.

One question that is often asked when approaching Blazor is regarding the use of some user interface framework, CSS library, or specific CSS feature. The answer is a resounding, YES. While Blazor uses Razor templates to create components, the result is HTML rendered in the browser. The HTML and CSS generated by Blazor is no different to the browser than any other HTML or CSS. This means all valid HTML and CSS is valid within a Blazor application.

I feel that this is something I will be repeating for the foreseeable future as more developer on-board and quickly discover that Blazor is just as much Web as it is .NET. While there are a variety of web frameworks and even components that help with layout exist, it’s ultimately important to realize that good HTML/CSS knowledge will help. Learning web standards will make these frameworks and tools easier to use and you more effective with them.

Creating layouts on the web has evolved over the years and has gotten much easier as a result. We have seen a progression from HTML table elements, to mind boggling CSS float trickery, which resulted in a sea of frameworks like Bootstrap. Today modern web development consists of two key CSS features that are all you need to create stunning application layouts: CSS Grid, and Flexbox.

Rather than write about something that has already been covered extensively by the community, we’ll break down how each of these features relates to XAML and .NET and where you can find resources to get started. I feel if you take the time to learn CSS Grid and Flexbox, you’ll find that application layout in Blazor is much less about Layout Components and more about building a layout with CSS for your Blazor Components to occupy. This should allow you to focus on problem solving with the right tools.

The following examples equate to the UWP grid layout tutorial with web friendly translations.

CSS Grid

If you’re a .NET developer coming from pretty much any background other than the web you can consider CSS Grid the web equivalent of the XAML grid. However, instead of the grid definitions being written inline, CSS will use selectors to target elements on the page.

Below is a snippet of XAML’s Grid Layout

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="5*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
</Grid>

Below is the equivalent CSS code to the XAML markup

.main-layout {
  display: grid;
  height: 100vh;
  grid-template-columns: 3fr 5fr; /* two columns template */
  grid-auto-rows: 2fr 1fr; /* use auto for infinity */
}

Below is the HTML which the CSS is applied to

<div class="main-layout">
    <div>Column three fractions wide, two tall</div>
    <div>Column five fractions wide, two tall</div>
    <div>Column three fractions wide, one tall</div>
    <div>Column five fractions wide, one tall</div>
    <div>Column three fractions wide, two tall</div>
</div>

You can see a live example of this in the codepen provided below.

See the Pen vYyeQJQ by EdCharbeneau (@EdCharbeneau) on CodePen.

This example of course is just the tip of an iceberg and not everything is a clear cut 1:1 translation. Hopefully this is enough to encourage you to learn more about CSS Grid. You can use the following links form the resources below from CSS Tricks to get you acquainted.

CSS Flexbox

Much like the CSS Grid we can draw a similar comparison for XAML’s StackPanel another beloved .NET layout tool of many longtime .NET developers. In a modern web application the CSS Flexbox has a striking resemblance to the StackPanel layout.

Below is a snippet of XAML’s StackPanel Layout

<StackPanel Grid.Column="1" Margin="40,0,0,0" VerticalAlignment="Center">
    <TextBlock Foreground="White" FontSize="25" Text="Today - 64° F"/>
    <TextBlock Foreground="White" FontSize="25" Text="Partially Cloudy"/>
    <TextBlock Foreground="White" FontSize="25" Text="Precipitation: 25%"/>
</StackPanel>
<StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal"
            HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock Foreground="White" FontSize="25" Text="High: 66°" Margin="0,0,20,0"/>
    <TextBlock Foreground="White" FontSize="25" Text="Low: 43°" Margin="0,0,20,0"/>
    <TextBlock Foreground="White" FontSize="25" Text="Feels like: 63°"/>
</StackPanel>

Below is the equivalent CSS code to the XAML markup

.stack-vertical {
  display:flex;
  flex-direction: column;
  background-color: #34ace0;
  color: white;
  align-items: center;
}

.stack-horizontal {
  display: flex;
  flex-direction: row;
  gap:20px;
  background-color: #227093;
  color: white;
  justify-content: center;
}

Below is the HTML which the CSS is applied to

<div class="stack-vertical">
  <p>Today - 64° F</p>
  <p>Partially Cloudy"</p>
  <p>Precipitation: 25%"</p>
</div>
<div class="stack-horizontal">
  <p>High: 66°</p>
  <p>Low: 43°</p>
  <p>Feels like: 63°</p>
</div>

You can see a live example of this in the codepen provided below.

See the Pen ExNwGNd by EdCharbeneau (@EdCharbeneau) on CodePen.

Again, this example of course is just the tip of an iceberg and not everything is a clear cut 1:1 translation. Hopefully this is enough to encourage you to learn more about CSS Flexbox for all your StackPanel needs.

Once again CSS Tricks is my go-to resource for details on Flexbox, their “A Complete Guide to Flexbox” article is the only Flexbox resource you’ll probably ever need.

Mixing Grid and Flexbox

Just as XAML allows .NET developers to mix Grid Layouts and StackPanels, so do their web counterparts. In fact, mixing both Grid and Flexbox provides complete set of utilities to describe almost any layout scenario in a Blazor application. Because of this there’s no need for a dedicated Blazor Layout Component, since the tools we need are already built into the browser as web standard functionality.

In these examples we’ll also use some grid positioning properties grid-column and grid-row to identify some differences between XAML and CSS. When using HTML/CSS elements generally render to the browser (grid, felxbox, etc.) in their source order, or the order in which they are expressed in markup. The opposite holds true for the XAML Grid which interprets no Grid.Row or Grid.Column property defined to Grid.Row="0" or Grid.Column="0". In CSS Grid each HTML element will render after the next unless coordinates are specified.

Below is a snippet of XAML Grid and StackPanel Layouts

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="5*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Border Background="#2f5cb6"/>
    <Border Grid.Column ="1" Background="#1f3d7a"/>
    <Border Grid.Row="1" Grid.ColumnSpan="2" Background="#152951"/>

<StackPanel Grid.Column="1" Margin="40,0,0,0" VerticalAlignment="Center">
    <TextBlock Foreground="White" FontSize="25" Text="Today - 64° F"/>
    <TextBlock Foreground="White" FontSize="25" Text="Partially Cloudy"/>
    <TextBlock Foreground="White" FontSize="25" Text="Precipitation: 25%"/>
</StackPanel>

<StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal"
            HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock Foreground="White" FontSize="25" Text="High: 66°" Margin="0,0,20,0"/>
    <TextBlock Foreground="White" FontSize="25" Text="Low: 43°" Margin="0,0,20,0"/>
    <TextBlock Foreground="White" FontSize="25" Text="Feels like: 63°"/>
</StackPanel>

<Image Margin="20" Source="Assets/partially-cloudy.png"/>

</Grid>

In HTML we can markup our code in very similar manner. A grid is used to create the overall layout of the elements, then flexbox is used within the grid cells to describe the flow of the elements within each cell.

Below is the equivalent CSS code to the XAML markup

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}
.stack-vertical {

  display:flex;
  flex-direction: column;
  background-color: #34ace0;
  color: white;
  justify-content: center;
  align-items: center;
}

.stack-horizontal {
  grid-column: 1 / span 2;
  display: flex;
  flex-direction: row;
  gap:20px;
  background-color: #227093;
  color: white;
  justify-content: center;
}

.weather-symbol {
  /* 
  Items will render to the grid in their 
  source order (order in which they are expressed in markup).
  The opposite holds true with XAML, where no grid column defiend means zero (0,0).
  */
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
  display: flex;
  font-size:5em;
  background-color: #273c75;
  color: #fbc531;
  justify-content: center;
  align-items: center;
}

Below is the HTML which the CSS is applied to

<div class="grid-container">

  <div class="stack-vertical">
    <p>Today - 64° F</p>
    <p>Partially Cloudy"</p>
    <p>Precipitation: 25%"</p>
  </div>

  <div class="stack-horizontal">
    <p>High: 66°</p>
    <p>Low: 43°</p>
    <p>Feels like: 63°</p>
  </div>

  <div class="weather-symbol">
    <p>☀</p>
  </div>
  
</div>

You can see a live example of this in the codepen provided below.

See the Pen NWbaewg by EdCharbeneau (@EdCharbeneau) on CodePen.

Conclusion

I realize many developers are coming from various .NET backgrounds because Blazor offers .NET in the browser. While Blazor does offer an intuitive component model and the ability to share .NET code, it is still very much rooted in the web. This strong reliance on web standards is what makes Blazor a solid platform. As web standards evolve Blazor will automatically inherit these abilities. When it comes to Blazor Layout Components look no further than CSS Grid and CSS Flexbox. Focus on opportunities to fill in gaps where standard UI components don’t exist and feature rich UI components truly stand out and save time / development costs.

Blazor Component Testing

Tue, 16 Feb 2021 00:00:00 +0000

Web developers are accustomed to the instant feedback the browser provides. Many frameworks even include built in mechanics for refreshing the application in real-time, or “hot reloading.” Hot reloading is often used to quickly prototype components or features for a given application. While hot reloading is certainly a tool that has its place in web development, it’s possible it is relied upon too much. Blazor has yet to provide such a tool although one is in development. An arguably better alternative is unit testing UI components. A UI component can be isolated, tested and quickly iterated upon just as application logic can be. Through unit testing we can achieve quick results without the overhead of loading the application, or even the browser. To test a Blazor component we’ll use a new framework called bUnit which is specifically designed for this purpose.

bUnit

Test Target	UI Component
Cost	Free
License	Open Source
Type	Framework
Interface: Test Runner	Visual Studio or CLI compatible

bUnit is a testing library for Blazor Components. Its goal is to make it easy to write comprehensive, stable unit tests. bUnit builds on top of existing unit testing frameworks such as xUnit, NUnit, and MSTest, which runs the Blazor components test as any normal unit test. bUnit runs a test in milliseconds, compared to browser-based UI tests, where a test usually takes seconds to run.

bUnit can setup and define components under tests using either C# or Razor syntax. bUnit includes methods to verify component rendering using a semantic HTML comparer. Parameters, cascading values and injecting services into components under are made easy with bUnit’s comprehensive helper methods. Even triggering event handlers and exercising a component’s interactive features is supported by the library.

Adding a bUnit test project to your application can be done several ways. One of the easiest solutions is to install the bUnit project template and create a new project using the command line.

dotnet new --install bunit.template
dotnet new bunit -o <NAME OF TEST PROJECT>

With the bUnit project created we’ll add our project or component library as a reference.

Now we can test individual components in isolation with bUnit. Since we’re already familiar with xUnit, we’ll continue with the xUnit [Fact] conventions and write our first bUnit test. A common component test is to ensure that a component initializes correctly and renders the appropriate HTML markup. This can be accomplished with bUnit’s RenderComponent<TComponent> method.

Component Unit Test Example: Initialization and Rendering

In the following example we’ll test the initial rendered Alert component. The component should render a styled div element with an internal close button. The expected rendered HTML is declared as the string expectedMarkup. Since bUnit relies on “semantic HTML comparison,” the expectedMarkup doesn’t need to be exact match, but rather an HTML equivalent match. Aspects that don’t affect component behavior or visual representation are ignored, such as: comments, insignificant white space, css class order, and implicit attributes, just to name a few.

// bUnit library
using Bunit;
// xUnit framework
using Xunit;
// Component library or Blazor application
using TestableBlazor.Client;

[Fact(DisplayName = "Initial Alert renders correct markup")]
public void AlertInit()
{
    // Render an Alert component
    var cut = RenderComponent<Alert>();

    // Expected HTML rendered
    string expectedMarkup = @"
    <div class=""alert alert-danger"">
        <button type=""button"" class=""close"" aria-label=""Close"">
            <span aria-hidden=""true"">&times;</span>
        </button>
    </div>";

    // Did it match?
    cut.MarkupMatches(expectedMarkup);
}

In this test an instance of the Alert component is created, and the component lifecycle is fully completed. The final rendered component markup is then checked against the expected markup.

Component Unit Test Example: Parameter Set

bUnit can go beyond initialization rendering tests and test specific sections of markup based on component parameters. In the next example we’ll assume we have a component that has two distinct color themes represented by a CSS class. We can toggle the theme by setting the IsInfo parameter to change the CSS class. The following example renders the component with the parameter set to true and checks only the CSS class attribute on the rendered component.

[Fact(DisplayName = "Alert has info theme")]
public void AlertColor()
{
    // Render the component with IsInfo = true
    var cut = RenderComponent<Alert>(parameters => 
                parameters.Add(p => p.IsInfo, true));

    // The expected CSS value
    var expectedCss = "alert alert-info";

    // The actual CSS value
    var actualCss = cut.Find("div").GetAttribute("class");

    // Did it match?
    Assert.Equal(expectedCss, actualCss);
}

In this test an instance of the Alert component is created, and the component’s IsInfo parameter set true. The rendered markup is then checked for the class attribute and the value is validated against the expected CSS class.

Simple component unit tests like these can quickly accelerate the development process. Since the application and browser are not involved the process is much faster and accurate versus manually loading the application and checking the rendered output visually.

Blazor Free E-book

Mon, 16 Mar 2020 00:00:00 +0000

At the 2017 Microsoft MVP (Most Valuable Professional) Summit I watched Steve Sanderson unveil his experimental framework to a room full of .NET developers. I watched the room fill with excitement and give rounds of standing applause. The excitement validated my own opinion that this was something .NET developers like myself have always wanted for the web. I wrote this book to help the .NET community quickly grasp what Blazor has to offer and share in the excitement we all felt at the MVP Summit.

Since that moment I have made many blog posts about the topic which have become outdated with each monthly release of Blazor. I have taken the best of those blog posts, reviewed, updated, and rewrote portions of them into the book along with a wealth of brand-new material. By compiling my best works into a single piece as an e-book, this single source of knowledge can be kept up to date with new releases.

What you’ll find in the Free Blazor e-book:

What is WebAssembly
Component Basics
Blazor Code Behind
Data Binding
JavaScript Interop
Razor Class Libraries
and much more…

If you’re interested in Blazor and would like to learn how to be productive in just a quick 120 page read, then get your free copy of the Blazor E-book from the link below.

Get the Free Blazor E-book

Blazor Workshop Code PaLOUsa Edition

Fri, 16 Aug 2019 00:00:00 +0000

Hello Code PaLOUsa workshop attendees. Thank you for purchasing tickets to my workshop “Build your first full-stack Blazor app”. We have a packed day learning about Blazor the exciting new framework from Microsoft that for the first time enables C# in the browser.

IMPORTANT Prerequisites

YOU MUST FOLLOW THESE INSTRUCTIONS TO PARTICIPATE

I can’t stress enough that you install the next 3 items in order to participate in the workshop. If you do not use the guide below, you may be pairing up with someone else who did.

1. Install Visual Studio 2019 Preview (latest update)

Install the PREVIEW edition of Visual Studio 2019. Community edition or higher is acceptable as long as it is preview. Visual Studio 2019 (RTM) does not contain all of the tooling needed and support for Visual Studio Code is spotty at best.

The installer can be found here: https://visualstudio.microsoft.com/vs/preview/

2. ASP.NET Core 3.0 Preview 8

Install the .NET Core 3.0 Preview 8 release. Blazor is also in preview and requires the latest release to work properly.

The installer for x64 and x86 can be found here: https://dotnet.microsoft.com/download/dotnet-core/3.0

If you don’t know what installer to grab, the “.NET Core Installer: x64” is most common.

3. Blazor Templates

Install the Blazor templates by running the following command in a command shell:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview8.19405.7

What to expect day of

I’m excited to teach you all about Blazor. I’ve been working closely with the ASP.NET team and Progress/Telerik teams over the past year developing the Telerik UI for Blazor product. Since Blazor was premiered a the Microsoft MVP summit last year, I have worked full time with Blazor building components, coding live on Twitch, and presenting at meetup groups, conferences, and even Channel 9. Please use the workshop as an opportunity to ask me anything you would like to know about Blazor.

We have a lot of material to cover, so plan to start promptly. I’ll begin with a short presentation explaining how Blazor is able to run .NET in the browser, then we will start working on code exercises. We will be using the Blazing Pizza Workshop designed by Steve Sanderson and Ryan Nowak (ASP.NET Team). This step by step workshop will teach the fundamentals while creating a fully functioning web application to simulate a pizza ordering service.

Developing full stack web applications using .NET tooling and C# is something that will empower .NET developers to be extremely productive on the web. I’m looking forward to guiding you through the workshop and answering your questions.

Ed Charbeneau

Integrating Blazor with Existing .NET Web Apps

Blazor from MVC, Blazor from Razor Pages

Blazor from Angular, Blazor from React

Blazor from WebForms

Blazor from Web API

Telerik UI for Blazor

.NET 8 Day 1 Support

.NET Conf for Blazor Developers

Tuesday, November 14

Wednesday, November 15

Thursday, November 16

Conclusion

The Future of Cross Platform Blazor

Learn Blazor

Blazor Hybrid Web Apps with .NET MAUI

Blazor Hybrid and Web in One Solution

Sands of MAUI

Telerik UI for Blazor

Telerik UI for .NET MAUI

Demos / Recording / Slides

Updating Android SDKs from Visual Studio

The WebView

Outdated WebView

Updating the Android SDK from Visual Studio

Conclusion

The Future of Cross Platform Blazor Stirtrek Edition

Learn Blazor

Blazor Hybrid Web Apps with .NET MAUI

Sands of MAUI

Telerik UI for Blazor

Telerik UI for .NET MAUI

Demos / Recording / Slides

Setting Up Sass with Blazor

Setting Up Your Blazor Project for Sass

Installing Sass

Compile Sass In One Step

Add a Watch Script

Run the Script

Bonus: MSBuild

That’s All

But What About CSS Isolation

TLDR

Blazor Layout Components

CSS Grid

CSS Flexbox

Mixing Grid and Flexbox

Conclusion

Blazor Component Testing

bUnit

Blazor Free E-book

Blazor Workshop Code PaLOUsa Edition

IMPORTANT Prerequisites

** YOU MUST FOLLOW THESE INSTRUCTIONS TO PARTICIPATE **

1. Install Visual Studio 2019 Preview (latest update)

2. ASP.NET Core 3.0 Preview 8

3. Blazor Templates

What to expect day of

YOU MUST FOLLOW THESE INSTRUCTIONS TO PARTICIPATE