If we are going to keep progress bar in Blazor then method should be Asynchronous otherwise it will not work.
If your code is Synchronous, then we need to convert Asynchronous code like given below
In Blazor Telerik Grid, we can easily achieve using DetailTemplate. We donot have to keep grid inside another grid.
Here is the code snippet.
@page "/grid"
<h3>GridDemo</h3>
<TelerikGrid Data="salesTeamMembers"
OnRowCollapse="@OnRowCollapseHandler">
<DetailTemplate>
@{
var employee = context as MainModel;
<TelerikGrid Data="employee.Orders" Pageable="true" PageSize="5">
<GridColumns>
<GridColumn Field="OrderId"></GridColumn>
<GridColumn Field="DealSize"></GridColumn>
</GridColumns>
</TelerikGrid>
}
</DetailTemplate>
<GridColumns>
<GridColumn Field="Id"></GridColumn>
<GridColumn Field="Name"></GridColumn>
</GridColumns>
</TelerikGrid>
<br />
@code {
void OnRowCollapseHandler(GridRowCollapseEventArgs args)
{
MainModel item = args.Item as MainModel;
}
List<MainModel> salesTeamMembers { get; set; }
protected override void OnInitialized()
{
salesTeamMembers = GenerateData();
}
private List<MainModel> GenerateData()
{
List<MainModel> data = new List<MainModel>();
for (int i = 0; i < 5; i++)
{
MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
mdl.Orders = Enumerable.Range(1, 15).Select(x => new DetailsModel { OrderId = x, DealSize = x ^ i }).ToList();
data.Add(mdl);
}
return data;
}
public class MainModel
{
public int Id { get; set; }
public string Name { get; set; }
public List<DetailsModel> Orders { get; set; }
}
public class DetailsModel
{
public int OrderId { get; set; }
public double DealSize { get; set; }
}
}
If we are working on asp.net core web api or Blazor application, so many time we will get requirement to change the port number. but on dotnet 6.0 and 7.0, they have changed the approach to change port number. Now we cannot do using right click and properties options.
For this we need to do
Step 1: Go to debug properties
Step 2: Select https >> Change in App URL
Now run the application
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" />
</div>
@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)],
}).ToList();
}
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:
https://github.com/Chandradev819/BlazorServerDemo/tree/master
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.
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" />
}
else
{
<MudTable Items="forecasts" Hover="true" SortLabel="Sort By" Elevation="0">
<HeaderContent>
<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>
</HeaderContent>
<RowTemplate>
<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>
</RowTemplate>
<PagerContent>
<MudTablePager PageSizeOptions="new int[]{50, 100}" />
</PagerContent>
</MudTable>
}
@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.
https://www.mudblazor.com/docs/overview
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.
Chandradev's Blog 