Monday, May 14, 2018

First Look at Blazor

Blazor is web UI framework based on C#, Razor, and HTML for building single-page applications. Yes, with Blazor, we can use C#, which is a server-side language and it’s going to be executed on the browser. That is done via WebAssembly (shortened wasm). Blazor provides all of the benefits of a client-side web UI framework using .NET on the client and optionally on the server.

As of today, Blazor is still in its experimental phase and the latest version is 0.3.0. Even though it’s in its early stages, you, of course, can create a basic to average size web application. So let’s see how you can get started with Blazor.

You need to have,
Once you have them, you can just fire up Visual Studio, select Create new project and select ASP.NET Core Web Application as below.
image
ASP.NET Core Web Application
Now you should be seeing something like below, two Blazor related templates. You can select either ASP.NET Core 2.0 or ASP.NET Core 2.1.
image
New Application
First template here is a standalone Blazor app which will run on the client side on the browser and it has no dependency on .NET Core in server side. Second is for running on top of ASP.NET Core host.

For this post, let’s go ahead with Blazor template. Once the project is created, you should see something like below in the Solution Explorer.
image
Solution Explorer
1: index.html

This is the only html page (That’s any way the nature of single-page applications). All the other content get rendered on this page.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <title>FirstBlazorApp</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>Loading...</app>
 
    <script type="blazor-boot"></script>
</body>
</html>

2: Program.cs

Blazor apps are built with components. This is where we are creating the root component.
using Microsoft.AspNetCore.Blazor.Browser.Rendering;
using Microsoft.AspNetCore.Blazor.Browser.Services;
 
namespace FirstBlazorApp
{
    public class Program
    {
        static void Main(string[] args)
        {
            var serviceProvider = new BrowserServiceProvider(services =>
            {
                // Add any custom services here
            });
 
            new BrowserRenderer(serviceProvider).AddComponent<App>("app");
        }
    }
}
Here we are creating the root component of type App.

3: App.cshtml

This is the root component. A component is a piece of UI, such as a page, dialog, or data entry form. Components can be nested, reused, and shared between projects.
<!--
    Configuring this here is temporary. Later we'll move the app config
    into Program.cs, and it won't be necessary to specify AppAssembly.
-->
<Router AppAssembly=typeof(Program).Assembly />

Next let's have a look at the content on Pages folder. This is where we have the pages. Pages are also components. First let’s examine _ViewImports.cshtml  file inside Pages folder.

_ViewImports.cshtml
@layout MainLayout
Here What it says is, we are using MainLayout for all the pages inside Pages folder. Technically layouts are also components. Alternatively you can specify the @layout in individual pages as well. And if you have another folder inside Pages folder, you can have a _ViewImports.cshtml  file there and place a @layout, so for all the pages in that folder, that particular @layout is being used. Basically _ViewImports.cshtml is used to place common usings.

So here the MainLayout is residing inside Shared –> MainLayout.cshtml.

MainLayout.cshtml
@inherits BlazorLayoutComponent
 
<div class="sidebar">
    <NavMenu />
</div>
 
<div class="main">
    <div class="top-row px-4">
        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
    </div>
 
    <div class="content px-4">
        @Body
    </div>
</div>
You can see it uses NavMenu component which is residing in Shared folder. When this layout is being used in pages, pages’ content will get rendered where we have @Body.

Let’s open up Index.cshtml.

Index.cshtml
@page "/"
 
<h1>Hello, world!</h1>
 
Welcome to your new app.
 
<SurveyPrompt Title="How is Blazor working for you?" />
So this is the page, which will get rendered when we hit “http://{url}/” on the browser. And you can see the page contains another component SurveyPrompt. And this component has a Parameter named Title.

SurveyPrompt.cshtml
<div class="alert alert-secondary mt-4" role="alert">
    <span class="oi oi-pencil mr-2" aria-hidden="true"></span> 
    <strong>@Title</strong>
 
    <span class="text-nowrap">
        Please take our
        <a target="_blank" class="font-weight-bold" href="https://go.microsoft.com/fwlink/?linkid=873042">
            brief survey
        </a>
    </span>
    and tell us what you think.
</div>
 
@functions {
    [Parameter]
    string Title { get; set; } // Demonstrates how a parent component can supply parameters
}
Note how the Title is exposed as a property within @functions.

Now if we examine the Counter.cshtml page, you can see the content which is getting displayed when we hit “http://{url}/counter”.

Counter.cshtml
@page "/counter"
 
<h1>Counter</h1>
 
<p>Current count: @currentCount</p>
 
<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>
 
@functions {
    int currentCount = 0;
 
    void IncrementCount()
    {
        currentCount++;
    }
}
And here we have a good use of property binding as well as calling a method. We have a C# method, and it’s getting called by HTML buttons’ onclick event.

Lastly let's look at csproj file.

csproj
<Project Sdk="Microsoft.NET.Sdk.Web">
 
  <PropertyGroup>
    <TargetFramework>netstandard2.0</TargetFramework>
    <RunCommand>dotnet</RunCommand>
    <RunArguments>blazor serve</RunArguments>
    <LangVersion>7.3</LangVersion>
  </PropertyGroup>
 
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.3.0" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.3.0" />
    <DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.3.0" />
  </ItemGroup>
 
  <ItemGroup>
    <BlazorGenerate Remove="Pages\Index.cshtml" />
  </ItemGroup>
 
  <ItemGroup>
    <BlazorGenerate Remove="App.cshtml" />
  </ItemGroup>
 
</Project>

Take a look at RunCommand and RunArguments. So when we run this, what's getting executed is dotnet blazor serve. Kind of Angular.

Isn’t this all nice, I just can’t wait to see what Microsoft will bring with Blazor in upcoming releases.

Head on to https://blazor.net/ and read more.

Happy Coding.

Regards,
Jaliya
Posted by Jaliya Udagedara at 4:16 AM

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)