Sep 7

Written by: Michael Washington
9/7/2019 8:57 AM  RssIcon

image

In this article we will create a default Blazor project and explore the components and features.

To get started creating applications using Microsoft Blazor, the following are required:


Note:
It is possible to develop Blazor applications using other methods. See this link for more information: https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started.

 

Create The Default Project

image

Open Visual Studio.

 

image

Select Create a new Project.

 

image

Select Blazor App and click Next.

 

image

Give it a name and click Create.

 

image

Select Blazor Server App.

Click Create.

 

image

This will create the default project, and the application will open in Visual Studio.

 

Explore The Default Application

image

Select Debug, then Start Debugging to run the application.

 

image

Your web browser will open, and the application will load.

 

image

  1. You can click on the Counter link to navigate to the Counter page
  2. You will see that the url in your web browser changes to the /counter address
  3. You can click the Click me button
  4. The number next to the Current Count label will increase

 

image

  1. You can click on the Fetch data link to navigate to the Weather forecast page
  2. You will see that the url in your web browser changes to the /fetchdata address
  3. A table of random weather forecasts will display

 

image

Return to Visual Studio, and select Debug then Stop Debugging.

 

Examine The Project Files

image

The Solution Explorer in Visual Studio allows us to see all the project files of the application.

The preceding diagram shows the order that the code is executed in (starting with the Program.cs file), to display the first page of the application (the default page of the application, that is contained in the Index.razor file).

image

The initial code that is loaded in the user’s web browser is contained in the _Host.cshtml file. This creates a HTML document that loads the initial .css style sheets and JavaScript files, including the Blazor.server.js file that sets up the SignalR communication with the server.

This loads the application root inside the <app></app> tags.

The application root, is contained in the App.razor control. This  control sets up the cascading parameters used for security (covered in Blazor Binding, Events and Parameters) and the routing.

 

Routing and Layouts

image

Every routable Blazor control must have a @page Razor directive with a unique route.

In this example, the Counter control, contained in the Counter.razor file, is configured by the @page directive to have the /counter route.

 

image

When the user navigates to the /counter route in their web browser, the Counter control is loaded, however, the RouteView in the App.razor file defines a layout control called MainLayout. This layout will be the layout for that RouteView.

This MainLayout control is a template that defines the overall structure of the page that is returned.

It contains a @Body Razor directive that indicates where the content will go, in this case the Counter control.

The MainLayout control also loads other controls such as the NavMenu control (contained in the NavMenu.razor file), that contains the navigation menu that displays on the left-hand side of the resulting page.

 

Dependency Injection

image

Services contained in classes, can be registered in the Startup.cs file so that they are available to be consumed in Blazor components and classes using Dependency Injection.

For example, the WeatherForecastService class, contained in the WeatherForecastService.cs code file, is registered in the ConfigureServices section of the Startup.cs code file. 

In this example, the service is registered as a Singleton (using AddSingleton - all requests use the same instance), however, in many cases, such as services that provide data for a single user, you will want to register your services as Scoped (using AddScoped - an instance of the service is created once per connection or client request).

 

image

Also note that we are securely calling the GetForecastAsync method directly because we are using a server side Blazor application.

 

image

If we instead created a Blazor WebAssembly App that is ASP.NET Core hosted

 

image

…we would have a different project structure that separates the code that runs in the client web browser (the BlazorClientApp.Client project), from the code that runs on the server (in the BlazorClientApp.Server project).

 

image

Because the client code is no longer running on the server, that version of the FetchData.razor page has to make a http request, using the GetJasonAsync method of the HttpClient (that was registered as a service in the startup.cs file), to the method running on the server, that then returns the weather forecast data.

 

Next Step

Creating A Step-By-Step End-To-End Database Server-Side Blazor Application

Tags: Blazor
Categories:

1 comment(s) so far...


Gravatar

Re: Getting Started With Blazor

Very nice job explaining and having the patient to draw all those connections to make it visually easy!
That helps a lot.
Thank you!

By Armando Costa on   9/3/2019 3:02 PM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation