Posts Tagged :

blazorWASM

Components on Blazor 1024 557 mezo

Components on Blazor

Hi my fellow Padawans

Blazor is a frontend framework like Angular or React but mostly like React and it has components for create pages and reusable objects functionalities.

But how can we create a component and use it on the pages in our Blazor application?

First Read this Article and create your first Blazor application 🙂

Then on your Solution Explorer find Pages and right click on it and Add -> Razor Component

On Add New Item windows write your components name and create it

I decided to make something different and I created Todo.Razor file and I add these codes on the page

@page "/todo"
@using BlazorApp1.Data;

<h3>Todo</h3>

<ul>
    @foreach (var todo in todos)
    {
            <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();
    private string? newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

And find NavMenu.razor file inside of the Shared folder on your Solution Explorer. Find the last item of menu divs and Add this code:

  <div class="nav-item px-3">
            <NavLink class="nav-link" href="todo">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
            </NavLink>
        </div>

You will have a NavMenu.Razor page like this:

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorApp1</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="todo">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
            </NavLink>
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

When you open the webpage you will see the Todo on your left navigation menu and then you will see your amazing Todo application like below:

If you want to use this component in other pages for example add this component on the home page. Go to your Index.Razor inside of the Pages folder and add this code :

<Todo/>

Your index.Razor will look like this

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, Everyone!</h1>

Welcome to your new app. Hello 

<SurveyPrompt Title="How is Blazor working for you?" />




<Todo/>

Then we RUN our app oooorrr we can Hot Reload and we will see the result like below:

That is easy isn’t it ?

I hope that is helpful

May the knowledge be with you

Create Your First Blazor Application 1024 557 mezo

Create Your First Blazor Application

Hello My Fellow Padawans 🙂

Today I will tell you about a new Frontend Technology called “Blazor”. It sounds similar from somewhere… Yes Razor and yes its a Microsoft technology.

Ok but lets remember what is RAZOR first: Razor is a format for generating text-based content, like HTML. Razor files have cshtml or a razor file extension, and contain a mix of C# code along with HTML.

What is Blazor

Blazor is a user-interface framework built on .NET and Razor. Blazor applications can run on a server as part of an ASP.NET application or can be deployed to run in the browser on a user’s machine similar to a single-page application. It comes with 2 different app styles.

Blazor Server: is an implementation of the Blazor user-interface framework as part of the ASP.NET Core web development framework, deployed to a web server. Developing an application with Blazor Server generates HTML on a web server as it is requested by web site visitors, typically using a web browser. That HTML is then delivered to the visitor’s browser, and a two-way communication pipeline is maintained using ASP.NET Core SignalR and preferring a Web Sockets connection.

Users that click buttons, navigate, and perform other interactions with a Blazor Server application have their actions transmitted on this SignalR connection, and the server responds with user-interface updates using the same connection. The Blazor Server framework automatically updates the browser with the content generated on the web server.

Blazor WebAssembly: Shortened to Blazor WASM, is an implementation of the Blazor user-interface framework that runs on the HTML 5 standard WebAssembly runtime present in all modern browsers. The binary output of your application, the DLL files, are transmitted to the browser and run with a version of .NET that has been optimized to work with the WebAssembly runtime regardless of the underlying operating system of the device browsing to the website.

Since WebAssembly is a technology that runs entirely in the browser, it’s possible to deploy this model of the Blazor application using files that a web server doesn’t parse or interact with. This type of “static” approach reduces the requirements for a web server and shifts all processing for the application to the user’s machine.

Advanced processing and logic can take place in the browser. When the application needs data or to interact with other services, it can use standard web technologies to communicate with HTTP services.

How to build an application with Blazor

Start your Visual Studio 2022

Then create Blazor Server App and in the Configure your new project window, enter BlazorApp as the project name and select Next.

In the Additional information window, select .NET 7.0 (Standard Term Support) in the Framework drop-down if not already selected and click the Create button.

Your project is created and loaded in Visual Studio. Take a look at the contents of your project using Solution Explorer.

Several files were created to give you a simple Blazor app that is ready to run.

  • Program.cs is the entry point for the app that starts the server and where you configure the app services and middleware.
  • App.razor is the root component of the app.
  • The Pages directory contains some example web pages for the app.
  • BlazorApp.csproj defines the app project and its dependencies and can be viewed by double-clicking the BlazorApp project node in the Solution Explorer.
  • The launchSettings.json file inside the Properties directory defines different profile settings for the local development environment. A port number is automatically assigned at project creation and saved on this file.

To run your application basically click the Run button.

When you made some changes and you want to see your changes on the browser you need to click the Hot Reload button

If you want to make “Hot Reload” every time you save your changes then you need to click the menu button next to “Hot Reload” and select “Hot Reload on File Save” Then VS will watch your file save and refresh your web app on the browser to show your changes.

After you run your app you will see the default app of the Blazor.

Congrats you made your first Blazor App and make it run!

Last thing I want to show is how Blazor files and pages look like

_Host.cshtml This holds our application and renders page components.

@page "/"
@namespace BlazorApp1.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

<component type="typeof(App)" render-mode="ServerPrerendered" />

Index.razor : This is the Home page that you see on the screenshot below.

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, Everyone!</h1>

Welcome to your new app. Hello 

<SurveyPrompt Title="How is Blazor working for you?" />

Counter.razor and this is the counter component as a page. It’s easy to render and reuse.

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

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

Congrats 🙂 you open the new Blazor App and make that work

I will keep continuing to write about it coz I probably will use it for my company.

I hope that is helpful

May the knowledge be with you

    Join our Newsletter

    We'll send you newsletters with news, tips & tricks. No spams here.