How to run Blazor project everywhere using Razor Class Library ?

One of the cool features of Blazor is code reusability. Using Razor Class Library, we can use our Razor component in all blazor type project like Blazor Server, WASM and MAUI Hybrid.

If we have requirement to develop the product, that should work on all the environment, then we can take benefit of Razor Class Library. It will save 70% time and money.

I will create simple POC project for Class library using Synfussion Blazor Control and use in Blazor Server and WASM application.

Step 1: Create the Razor Class Library like this

Step 2: Create Blazor Server, Blazor WASM and Blazor MAUI Hybrid project.

Step 3: In Blazor Class Library we will add the Synfussion Controls Using Nuget package like this

Step 3: Create the Component File in Razor Class Library and write Code like to populate Grid Control

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Grids

<div class="my-component">
    <b>Synfussion Blazor Grid Demo</b> <br />
    <SfGrid DataSource="@Orders" />

@code {
     public List<Order> Orders { get; set; }

    protected override void OnInitialized()
        Orders = Enumerable.Range(1, 5).Select(x => new Order()
            OrderID = 0 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

    public class Order
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }


Step 4: Consume the Razor Class Library in All projects like Blazor Server, WASM and MAUI Hybrid project

Step 5: Do the required setup for Blazor Synfussion Controls in all Blazor project. For Blazor Server

In _Layout.cshtml page

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Step 6; Now Consume the Razor Class library Component in Blazor Server or any other project like this

Now run the application, you will see similar output in all Blazor project.

Summary: In this demo project, we saw that using Razor Class library, we can create similar Blazor UI in all Blazor type project. It will save lots of our development time and money as compared to other web technologies.

Source Code:

Hey, thanks for reading the blog post, I am in the market, looking for new freelance employment opportunities. If you need assistance on any of your ASP.NET Core Blazor projects, I am available for hire for freelance work.


How to communicate Child component to parent component in Blazor ?

If you are giving interview on Blazor, you will face this question. We can communicate child component to parent component using EventCallback.

We will create one Child Component with Textbox as Input and Button. Whenever user will pass the input on textbox and click on Button. Then input text will display on Parent Component.

Child Component code snippet

    <input type="text" @bind="@message" />
    <button @onclick="DisplayMessage">Click Here</button>

@code {

    public string InputParam { get; set; }
    public EventCallback<string> OnClickCallback { get; set; }

    private string message;
    private async Task DisplayMessage()
        await OnClickCallback.InvokeAsync(message);

Parent Component code snippet

@page "/"


<SurveyPrompt InputParam="message" OnClickCallback="@ShowMessage" />

    private string message;

    private void ShowMessage(string _message)
        message = _message;

Summary: In the above demo, we saw that using EventCallback, we can communicate from child component to parent component.

If you are looking how to trigger Parent to Child component, then please read this post

How to refresh Parent to Child Component in Blazor ?

Best laptops configuration for Dotnet Developer in 2022

If you are working as dotnet developer with Visual studio 2022 and Sql Server 2019 or 2022. Then your system requirement should be like this

Hardware requirement for Visual Studio 2022

  • 1.8 GHz or faster 64-bit processor; Quad-core or better recommended. ARM processors are not supported.
  • Minimum of 4 GB of RAM. Many factors impact resources used; we recommend 16 GB RAM for typical professional solutions.
  • Windows 365: Minimum 2 vCPU and 8 GB RAM. 4 vCPU and 16 GB of RAM recommended.
  • Hard disk space: Minimum of 850 MB up to 210 GB of available space,

Hardware requirement for Sql Server 2019

Memory *Minimum:

Express Editions: 512 MB

All other editions: 1 GB


Express Editions: 1 GB

All other editions: At least 4 GB and should be increased as database size increases to ensure optimal performance.
Processor SpeedMinimum: x64 Processor: 1.4 GHz

Recommended: 2.0 GHz or faster
Processor Typex64 Processor: AMD Opteron, AMD Athlon 64, Intel Xeon with Intel EM64T support, Intel Pentium IV with EM64T support

We need some memory for running window 10 or 11, while working on project we need also Team or Zoom Metting, we also need to open 4 to 5 tabs on browsers.

Minimum Ram Requirement

Visual Studio 20224GB
Sql Server 20191 to 4 GB
Window OS1 GB
Browser with 5 to 8 Tabs1 GB
Team/Zoom/Postman and Other utilities software (like VPN, Antivirus)1 GB

Minimum processor requirement

It should be Quad core (4 cores) with minimum processor speed 2.0 GHz with 16 GB ram and SSD Hard Disk

For me suggestion we will planning to buy new laptop, we should have to consider 8 to 10 cores processor with 16 GB Ram.

Here is the list of laptops, I have compiled for dotnet developers. I also recently purchased i7 12 gen laptop for me.

10 cores Processor with 16 GB Ram (Intel i5/i7 12 Gen)

Price Range from (45K to 70K)

Acer Aspire 3 Intel Core i5 12th Generation 15.6-inch (39.6 cms) Full HD Laptop – (16GB/512 GB SSD/Windows 11 Home/MS Office/1.7 Kg/Silver) A315-59

(Renewed) Acer Aspire 3 Intel Core i5 12th Generation 15.6-inch (39.6 cms) Full HD Laptop – (16GB/512 GB SSD/Windows 11 Home/MS Office/1.7 Kg/Silver) A315-59

Lenovo IdeaPad Slim 5 12th Gen Intel Core i7 15.6″(39.62cm) FHD IPS Laptop (16GB/512GB SSD/Win 11/Office 2021/Backlit KB/Fingerprint/FHD Camera/Alexa/3 Month Game Pass/Storm Grey/1.85Kg), 82SF004XIN

6 Cores with 16 GB (Ryzen 5 5-5625U) Laptops

Price Range from (45K to 55K)

(Renewed) HP Pavilion 15,Ryzen 5-5625U, 16GB RAM/512GB SSD 14 inch(35.6 cm) Laptop, FHD IPS Micro-Edge Display/Radeon Graphics/Backlit Keyboard/Alexa/B&O Audio/MS Office 2021,15-eh2024au, Natural Silver

HP Pavilion 15 AMD Ryzen 5-5625U, 16GB RAM/512GB SSD 15.6inch(39.6 cm) FHD IPS Micro-Edge Display/Radeon Graphics/Backlit Kb/Windows 11 Home/Alexa/B&O Audio/Office 2021,15-Eh2024au

Honor MagicBook 14, AMD Ryzen 5 5500U 14-inch (35.56 cm) FHD IPS Anti-Glare Thin and Light Laptop (16GB/512GB PCIe SSD/Windows 11/Fingerprint Login/Metal Body/Backlit KB/1.38Kg), Gray, NobelM-WFQ9AHNE

8 Cores with 16 GB (Ryzen 7 5700U)

Prices: 55K

HP 14s, Ryzen 7- 5700U 16GB RAM/512GB SSD 14-inches (35.6 cm) FHD, IPS, Micro-Edge Display/AMD Radeon Graphics/Alexa/Win 11/Backlit KB/Dual Speakers/MSO 2021/1.46 Kg, 14s- fy1005AU , Windows 11 Home

Summary: In this post, we saw that what should be minimum configuration laptops for dotnet developer in 2022. Please fill free to share your thought and input on this.

How to deploy Blazor Webassembly App as Static website on Azure ?

As you know that doing deployment as static web site on GitHub, Azure, AWS and Google Cloud is totally free. We don’t have to pay any money for it.

If we have created some demo or portfolio project using Blazor wasm and need to share with someone. we can take benefit of this service. It is totally free.

In this demo, I am going to show, one of the easiest approaches using Azure Static Web App.

Step 1: Created the Blazor web assembly app using dotnet cli command like this

dotnet new blazorwasm -n WasmTest -o app

>> In the above command, I am creating Blazor Web assembly application in app folder

Step 2: Push the code on GitHub Repo.

Step 3: Go to Azure portal and create the Static Web App like this

Step 4: Fill the mandatory field like this

Step 5: Click on Review and created button.

Step 6: Go to your resource and click on the generated URL

Now you will see your website like this

It will also create CI/CD pipeline for us on Github.

Summary: In this above demo, we saw that without writing any code, we are able to deploy our static website on Azure portal. It very simple and straight forward process.

Hey, thanks for reading the blog post, I am in the market, looking for new freelance employment opportunities. If you need assistance on any of your ASP.NET Core Blazor projects, I am available for hire for freelance work.

How to use MudBlazor in Blazor Project?

MudBlazor is one of the best open sources Blazor Controls for developing Blazor project quickly. There are lots of free controls which will help us for rapid web application development.

There are plenty of examples in the documentation, which makes understanding and learning MudBlazor very easy.

It has been created on top of Material Design, so you will get very good UI.

I have seen so many developers and architect, they will create their own Grid, dropdown, popup, Checkbox controls etc. from scratch and later they will face lots performance and other issue.

If there are already stable and mature open-source controls, then no need to create from scratch. we can save lots of development time and money.

There are two approaches i.e., using Dotnet Template and other is using manual approach using nuget package.

I will show you, using dotnet template, which is very simple and straight forward.

Step 1: Install the template like this

dotnet new –install MudBlazor.Templates

Step 2: Go to your development folder path and create wasm project using dotnet cli like this

dotnet new mudblazor –host wasm –name MyMudBlazorTest

Step 3: Now build and run the application using Visual studio or dotnet cli

MudBlazor.Templates will do all the configuration for us. Now we can work on top of this. Here is table and pager component, using these two components we can create grid like screen. There is also Grid control, but it is on preview version.

@page "/fetchdata"
@inject HttpClient Http
@using MyApplication.Shared

<PageTitle>Weather forecast</PageTitle>

<MudText Typo="Typo.h3" GutterBottom="true">Weather forecast</MudText>
<MudText Class="mb-8">This component demonstrates fetching data from the server.</MudText>
@if (forecasts == null)
    <MudProgressCircular Color="Color.Default" Indeterminate="true" />
    <MudTable Items="forecasts" Hover="true" SortLabel="Sort By" Elevation="0">
            <MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<WeatherForecast, object>(x=>x.Date)">Date</MudTableSortLabel></MudTh>
            <MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureC)">Temp. (C)</MudTableSortLabel></MudTh>
            <MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureF)">Temp. (F)</MudTableSortLabel></MudTh>
            <MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.Summary!)">Summary</MudTableSortLabel></MudTh>
            <MudTd DataLabel="Date">@context.Date</MudTd>
            <MudTd DataLabel="Temp. (C)">@context.TemperatureC</MudTd>
            <MudTd DataLabel="Temp. (F)">@context.TemperatureF</MudTd>
            <MudTd DataLabel="Summary">@context.Summary</MudTd>
            <MudTablePager PageSizeOptions="new int[]{50, 100}" />

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    public class WeatherForecast
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string? Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

To learn more about all the component, please fill free to visit official site.

Summary: In this small post, we saw that how to use MudBlazor in Blazor WASM project.

Hey, thanks for reading the blog post, I am in the market, looking for new freelance employment opportunities. If you need assistance on any of your ASP.NET Core Blazor projects, I am available for hire for freelance work.