Building First Blazor WebAssembly Application (part — 1 )

Steps to create a Blazor WebAssemly project

  1. Download and install Visual Studio with the ASP.NET
  2. Create a new project
[Figure: create new project]

3. Select Blazor app from the template

[Figure: Select Blazor app]

4. Configuring the project

[Figure: configure project]

5. Choose Blazor WebAssembly App

[Figure: Choose Blazor WebAssembly App]

Razor components

Blazor WebAssembly is a framework based on components. Razor components are the foundation of a Blazor WebAssembly application. The name of a Razor component must be in title case. They are classes that are built with a mix of C#, HTML, and Razor markup. HTML element syntax is used to connect one component to another.The markup appears to be an HTML tag, with the name of the tag being the component type.

Parameters

Component parameters allow components to be made dynamic. Parameters are public properties of the component that are marked with the Parameter or CascadingParameter attributes. Simple types, complex types, functions, RenderFragments, and event callbacks are all examples of parameters.

The following code for a HelloWorld component includes a Text parameter:

<p>Hello @Text!<p/>@code{[Parameter] public string Text { get; set; }}

Include the following HTML syntax in another component to use the HelloWorld component:

<HelloWorld Text=”World” />

Component life cycle

Razor components inherit from the ComponentBase class. The ComponentBase class contains both asynchronous and synchronous methods for managing a component’s life cycle.

  1. SetParameterAsync: This method sets the render tree parameters supplied by the component’s parent.
  2. OnInitializedAsync: This method is called after the component has been rendered for the first time.
  3. OnParametersSetAsync: This method is called after the component initializes and every time it re-renders.
  4. OnAfterRenderAsync: After the component has finished rendering, this method is called. This method is used when working with JavaScript, because JavaScript requires the Document Object Model (DOM) elements to be rendered before they can do anything.

Component structure

  1. Directives: Directives are used to extend the functionality of a program, such as routing, layout, and dependency injection. They are predefined by Razor, and you cannot create your own directives.
  • @page: @page directive is used for routing.
  • @attribute: adds a class-level attribute to the component.
  • @code: adds class members to the component.
  • @implements: implements the specified class.
  • @inherits: provides full control of the class that the view inherits.
  • @inject: used for dependency injection
  • @layout: specify a layout for the Razor component
  • @namespace: sets the component’s namespace
  • @typeparam: sets a type parameter for the component.
  • @using: controls the components that are in scope.

2. Markup: This is HTML written in the Razor syntax. The Razor syntax can be used to render text and allows C# to be included in the markup.

3. Code block: The logic for the page is contained in the code block. It all starts with the @code directive. The @code directive is usually found at the bottom of the page. It’s the only file-level directive that does not appear at the top of the page. We add C# fields, properties, and methods to the component in the code block.

Routing in Blazor WebAssembly

Routing is handled on the client rather than the server in Blazor WebAssembly. Blazor intercepts navigation in the browser and renders the component with the matching route. URLs are resolved in relation to the base path specified in the wwwroot/index.html file. Unlike other frameworks, the route is not inferred from the file’s location.

Route parameters

Route parameters are used by the Router component to populate the parameters of the corresponding component. Both the component and the route parameters must have the same name, but they are not case sensitive. we can provide more than one @page directive to a component to simulate optional parameters because optional route parameters are not supported in Blazor webAssembly.

@page “/routing”@page “/routing/{text}”<p>Blazor is @Text.</p>@code {[Parameter] public string Text { get; set; }protected override void OnInitialized() {Text = Text ?? “framework based on components”;}}

The first @page directive in the preceding code allows navigation to the component without a parameter, while the second @page directive allows a route parameter. If a text value is provided, it is assigned to the component’s Text property. If the component’s Text property is null, it is set to ‘framework based on components’.

Catch-all route parameters

Catch-all route parameters are used to capture paths across multiple folder boundaries. This route parameter is a string and can only be added at the end of the URL.

@page “/{*path}”<p>Route: @Path</p>@code {[Parameter] public string Path { get; set; }}

The preceding code will set the Path parameter to /catch-all/1 for the /catch-all/1 URL.

In the second blog of this blog series we will talk about razor syntax.

--

--

--

Associate Software Engineer | Software Engineering Undergraduate | Full Stack Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Create thumbnail of video in Firebase cloud functions

Typescript vs JavaScript

7 Reasons Why You Should Marry a Programmer

IIFE’s Will Change The Way You Use React Hooks

How to split PDF file or PDF stream data using HummusJS and Node.JS ? — Part 1

The Advanced Way to Style with Styled Components

Categorization of React Components

How to build sliders with d3.js

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
yasith wimukthi

yasith wimukthi

Associate Software Engineer | Software Engineering Undergraduate | Full Stack Developer

More from Medium

This is a blog post for my video https://www.youtube.com/watch?v=XEHR-AVou4U

How to make a Section optional in ASP.NET Core MVC

C#: How to set the current year as maximum with data annotations

C# String comparisons