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
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
https://learn.microsoft.com/en-us/visualstudio/releases/2022/system-requirements
Hardware requirement for Sql Server 2019
| Memory * | Minimum: Express Editions: 512 MB All other editions: 1 GB Recommended: Express Editions: 1 GB All other editions: At least 4 GB and should be increased as database size increases to ensure optimal performance. |
| Processor Speed | Minimum: x64 Processor: 1.4 GHz Recommended: 2.0 GHz or faster |
| Processor Type | x64 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 2022 | 4GB |
| Sql Server 2019 | 1 to 4 GB |
| Window OS | 1 GB |
| Browser with 5 to 8 Tabs | 1 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)
6 Cores with 16 GB (Ryzen 5 5-5625U) Laptops
Price Range from (45K to 55K)
8 Cores with 16 GB (Ryzen 7 5700U)
Prices: 55K
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.
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.
Chandradev's Blog 