Creating a page

In Blazor, a page is a top-level view that can be reached via a URL. In this exercise we'll recreate the Counter.razor page from scratch.

• In the Solution Explorer window, expand the MyFirstBlazorApp.Client project.
• Expand the Pages folder.
• Right-click Counter.razor and delete it.
• Right-click the Pages folder.
• Select Add->Razor Page and create a new page named Counter.razor. If you receive a "scaffolding" error, you can instead select another file format and give it a .razor file extension.

A Razor page is a self-contained view. We can include both the HTML and Razor view mark-up, and also any C# methods required for events etc. Start your new razor page with the following.

@page "/counter"

<h1>Counter</h1>
<p>The counter value is @currentCount</p>

@code {
     private int currentCount= 42;
}

The first line identifies the URL required to render the content of this page. More advanced routing techniques will be covered in the Routing section.

This is followed by some standard HTML, a H1 with a page title and a paragraph with some content. Just as with a standard ASP.NET Razor page, it is possible to insert programmable content by escaping it with the @ symbol. In this case we are displaying the value of the currentCount private member.

Finally, the @code section of the page is declared. This is where we write our properties / methods, event handlers, or whatever else we need. Here is where our currentCount private member is declared and its initial value set. Run the application, click the Counter link on the left of the page, and you should see something like the following:

Interacting with the page

So far we've bound a private member of the page so that its value is output as HTML when the Razor view is rendered. Next we'll update the value as a response to a user action.

Change the razor view to include the following Button mark-up.

<button class="btn btn-primary" @onclick=IncrementCounter>Increment counter

This will add a HTML button and use some Bootstrap styles to make it look pretty. It also sets its onclick event to execute a method named IncrementCounter. The method implementation is very simple, and should be placed within the @code section.

@page "/counter"

<h1>Counter</h1>
<p>The counter value is @currentCount</p>
<button class="btn btn-primary" @onclick=IncrementCounter>Increment counter</button>

@code {
  private int currentCount = 42;

  private void IncrementCounter()
  {
    currentCount++;
  }
}

Now run the application again, navigate to the Counter page, and click the button to see the value on the page update.