Outline

  1. Setting Things Up
    1. Getting Started
      1. Installing SDK
      2. Installing Visual Studio
      3. Installing Blazor Services Extensions
  2. Create Project
    1. Components
    2. Calling a JavaScript function from C#
    3. Running The Blazor Application

This is the second blog post of the Blazor series, to understand what Blazor is and how it works visit the previous post Blazor: Introduction

Setting things up

Hello, guys in the previous post we learn what Blazor is and how it works today we are gonna build our first Hello World in Blazor. Building your first app is easier than you think, we will be installing Blazor dependency, creating a Blazor project and see it run. Also, we will test how easy it is to use Razor syntax in order to put some logic in the HTML code, we will create a Blazor page and use JavaScript interop to manipulate an HTML element lets dive in, shall we?

Disclaimer:
Blazor is an experimental project. It changes frequently and evolves rapidly. Therefore, it is possible that some content on this website is already outdated.

We need a couple of things before we can run Blazor, we will be using Visual Studio Community Edition, now let’s install the dependencies

Getting Started

We need to take a few steps before creating our first Blazor application:

  1. . Install the latest Visual Studio preview with the ASP.NET and web development workload.

  2.  Install the latest Blazor extension from the Visual Studio Marketplace. This step makes Blazor templates available to Visual Studio.
  3.  Create a new project.
  4.  Select ASP.NET Core Web Application. Select Next.
  5.  Provide a project name in the Project name field or accept the default project name. Confirm the Location entry is correct or provide a location for the project. Select Create.
  6. . In the Create a new ASP.NET Core Web Application dialog, confirm that .NET Core and ASP.NET Core 3.0 are selected.
  7.  For a Blazor client-side experience, choose the Blazor (client-side) template. For a Blazor server-side experience, choose the Blazor Server App template. Select Create. For information on the two Blazor hosting models, server-side and client-side, see ASP.NET Core Blazor hosting models.
  8.  Press F5 to run the app.

Nice! You just ran your first Blazor App!

That was pretty easy, right? You can notice that the Blazor template application have three pages: Home, Counter, and Fetch data.

These three pages are implemented by the three Razor files in the Pages folder: Index.cshtml, Counter.cshtml, and FetchData.cshtml. Each of these files implements a Blazor component that’s compiled and executed client-side in the browser. Let’s see how it all works together.

Components

Blazor apps are built using components. A component is a self-contained chunk of user interface (UI), such as a page, dialog, or form. A component includes both the HTML markup to render along with the processing logic needed to inject data or respond to UI events. Components are flexible and lightweight, and they can be nested, reused, and shared between projects.

  1. Select the button on the Counter page
  2. Each time the button is selected, the counter is incremented without a page refresh. Normally, this kind of client-side behavior is handled in JavaScript; but here, it’s implemented in C# and .NET by the Counter component.

Take a look at the implementation of the Counter component in the Counter.cshtml file:

The UI for the Counter component is defined using normal HTML. Dynamic rendering logic (for example, loops, conditionals, expressions) is added using an embedded C# syntax called Razor. The HTML markup and C# rendering logic are converted into a component class at build time. The name of the generated .NET class matches the name of the file.

Members of the component class are defined in a @code block. In the @code block, component state (properties, fields) and methods can be specified for event handling or for defining other component logic. These members can then be used as part of the component’s rendering logic and for handling events.

When the button is selected, the Counter component’s registered onclick handler is called (the IncrementCount method) and the Counter component regenerates its render tree. Blazor compares the new render tree against the previous one and applies any modifications to the browser Document Object Model (DOM). The displayed count is updated.

5. Refresh the counter page in the browser to see the changes.

Using Components

After a component is defined, the component can be used to implement other components. The markup for using a component looks like an HTML tag where the name of the tag is the component type.

2. Refresh the home page in the browser. Note the separate instance of the Counter component on the Home page.

Adding the Razor Page to our application

You can observe the folder structure in Solution Explorer, as shown in the below image.

We will add our Razor page in the Pages folder.

Create a new file by right-clicking on the Pages folder and select New File. Name the file Nativo.cshtml. This file will contain HTML code to handle the UI of our application.

Similarly, add one more file nativo.cshtml.cs. This file will contain the C# code to handle our business logic.

Now our Pages folder will have the following structure:

Calling a JavaScript function from C#

Let’s do something interesting, we are gonna inject a Javascript library and make a Call to a Javascript function from C#, sounds good?. We are gonna change some attribute of an HTML Element, Blazor support Javascript interop, we can call a Javascript function from a C# method I will show you how to change some text from an HTML tag with Blazor

First, we will write our JavaScript functions in index.html file. Open the wwwroot/index.html file and put in the following code:

Here we have included the CDN reference to the JQuery library inside the <head> section so that we can handle the DOM manipulation.

Inside the <body> section, we are registering the function on the JavaScript side using “Blazor.registerFunction”. The function name is JSMethod, and it doesn’t accept any arguments. When triggered, it will set the text of a <p> tag having id “demop” to “JavaScript Method invoked”.

Important Note

  1. Do not write your JS code in the .cshtml file. This is not allowed in Blazor and the compiler will throw an error. Always put your JS code in the wwwroot/index.html file.
  2. Always add your custom <script> tag after “<script type=”blazor-boot”></script>” in the <body> section of index.html file. This is to ensure that your custom script will execute after loading the “blazor-boot” script.

The method CallJSMethod will call our JS function “JSMethod” by using “RegisteredFunction.Invoke”. RegisteredFunction.Invoke can take two parameters — the registered JS function name and any parameter that needed to be supplied to the JS function. In this case, we are not passing any parameter to the JS function.

Here we have defined the route of the page at the top. So, in this application, if we append “/nativo” to the base URL, then we will be redirected to this page. We are also inheriting the nativo class, which is defined in the nativo.cshtml.cs file. This will allow us to use the methods defined in the nativo class.

After this, we have defined a button. This button will invoke the “CallJSMethod” method when clicked. The <p> element with id “demop” is also defined, and its value will be set by the JS function “JSMethod”.

That’s all folks

You have install dependency, created a Blazor project, injected a JavaScript library and call a JS function from C#. This is just the tip of the iceberg. Practice what you have learned and share your results in the comments, in the next post we will start diving deeper into Blazor.