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.
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
<div>
<input type="text" @bind="@message" />
<button @onclick="DisplayMessage">Click Here</button>
</div>
@code {
[Parameter]
public string InputParam { get; set; }
[Parameter]
public EventCallback<string> OnClickCallback { get; set; }
private string message;
private async Task DisplayMessage()
{
await OnClickCallback.InvokeAsync(message);
}
}
Parent Component code snippet
@page "/"
<PageTitle>Index</PageTitle>
<SurveyPrompt InputParam="message" OnClickCallback="@ShowMessage" />
<p>@message</p>
@code
{
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
Chandradev's Blog 