Building First Blazor WebAssembly Application (part — 1 )

  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]

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.

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:

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

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.
  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 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 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.

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 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.

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.



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