While working on a Blazor project, so many times we will use plain HTML dropdown. In this scenario, we will get a requirement to trigger the event and reset the selection item to the initial state.
Here are some code snippets for completing this task.
Approach 1:
@page "/counter"
<select @onchange="OptionChanged" value="@selectedOption">
<option value="-1">Select Option</option>
@foreach (var option in options)
{
<option value="@option">@option</option>
}
</select>
<button @onclick="ClearSelection">Clear Selection</button>
@code {
private List<string> options = new List<string> { "Option 1", "Option 2", "Option 3" };
private string selectedOption { get; set; } = "-1"; // Set default value to "-1"
private void OptionChanged(ChangeEventArgs e)
{
// Extract the selected value from the event argument
string selectedValue = e.Value.ToString();
Console.WriteLine($"Selected option: {selectedValue}");
// Assign the selected value to the selectedOption variable
selectedOption = selectedValue;
}
private void ClearSelection()
{
// Clear the selected option
selectedOption = "-1"; // Reset to default value "-1"
StateHasChanged(); // Trigger a UI update
}
}
Approach 2:
@page "/"
<PageTitle>Home</PageTitle>
<select @onchange="OptionChanged" value="@selectedOption">
<option value="">Select Option</option>
@foreach (var option in options)
{
<option value="@option">@option</option>
}
</select>
<button @onclick="ClearSelection">Clear Selection</button>
@code {
private List<string> options = new List<string> { "Option 1", "Option 2", "Option 3" };
private string selectedOption { get; set; } = "";
private void OptionChanged(ChangeEventArgs e)
{
// Extract the selected value from the event argument
string selectedValue = e.Value.ToString();
Console.WriteLine($"Selected option: {selectedValue}");
// Assign the selected value to the selectedOption variable
selectedOption = selectedValue;
}
private void ClearSelection()
{
// Clear the selected option
selectedOption = "";
// Trigger a UI update
StateHasChanged();
}
}
Summary:
In this code snippet, we demonstrate how to handle various scenarios using an HTML dropdown in Blazor.
For creating CICD pipeline on azure portal for Blazor or Asp.net Core Project is very simple and straight forward. In this short demo post, we will see how do it.
Step 1: Create the App Service like this.
Step 2: Do the required mandatory setting like
Step 3: Do the configuration for GitHub Action setting like given below image. This will help us to create CICD pipeline for us.
Step 4: Now click on create web app.
If you will come to github repo, you will see that azure webapp deployment wizard has already added yaml file for us. which will trigger the deployment process for us.
Step 5: Now change the code on source code and push to GitHub repo. then CICD process will trigger.
Step 7: Now run the created web app. we will see output like this
Summary:
In the above demo, we saw that without writing single line of code azure portal is creating CICD pipeline for us. It will hardly take 5 to 10 min to create CICD pipeline.
But this approach will not work for docker image or deployment on Linux.
Since a long time, I am working directly with end clients as independent consultant. My maximum clients will be startup product based companies owners.
Thier main intension will be deliver high quality product with in very less time and with in budget. I will suggest to use Blazor for web application development.
But they will ask so many questions before selecting the Blazor. These are the frequently asked questions on Blazor
what are the advantages of Blazor as compared to other Clients side frameworks?
1.Improved Performance:
Blazor Web Assembly uses ahead-of-time (AOT) compilation, which allows it to load and run faster than traditional JavaScript-based web applications. It also has smaller file sizes than many JavaScript frameworks, resulting in faster load times.
2. Seamless Integration with .NET:
Since Blazor is built on top of .NET, It offers seamless integration with other .NET technologies, such as ASP.NET Core and Entity Framework Core. Developers can use the same language and tools across the entire stack, making it easier to develop and maintain complex applications.
3. Increased Security:
Blazor Web Assembly offers improved security over traditional JavaScript-based web applications. Because the code runs in a sandboxed environment, it is much harder for malicious code to access sensitive data or perform unauthorized actions.
4. Familiar Development Experience:
Blazor Web Assembly offers a familiar development experience for .NET developers, making it easier for them to transition to building web applications. The syntax is similar to other .NET languages, and the development environment is similar to other Visual Studio tools.
5. Code Reusability:
Since Blazor Web Assembly is built on top of .NET, developers can reuse existing .NET libraries and components in their web applications. This can significantly reduce development time and improve code quality.
6. It is supported by all stream browsers like Chrome, Edge, Firefox, Opera, Safari along with the ability to run on old (non-Web Assembly) ones using asm.js
7. It will compile to static files, which can be deployed anywhere (AWS, Azure or GitHub) like an html page. which will save lots of deployment cost.
8. Blazor web assembly does also support PWA (Progressive web app)
9. It also supports offline behavior which means You can run the application without the internet.
10. It will save lots of development time and cost as compared to other JavaScript frameworks like angular, react and vueJs etc.
Blazor Server VS Blazor Web Assembly
There are the following differences
Feature
Blazor Server
Blazor WebAssembly
Offline Mode Support
Does Not support
Support
PWA application
Does Not support
Support
Initial Page Load
Fast
Slow
Static web Deployment
Does Not support
Support
Development time and cost
Less
Little bit more, since we need to create separate api layer
For Intranet application.
It is more suitable
Not suitable
For public facing large web portal
Not suitable
More Suitable
Is Asp.net Core web Api 7.0 faster than NodeJS?
>> Yes, It is 11 time faster than NodeJS. As per as TechEmpower website benchmark result, .Net 7.0 is super-fast as compared to other competitor.
Is Blazor WebAssembly open source ?
>> Yes
Is Blazor Web Assembly production ready now?
>> Yes, it is very much stable and mature now. It is there in market, since from 2020.
Is Web Assembly faster than JavaScript ?
>> Yes, It is faster than JavaScript in certain scenarios. In general, web assembly (WASM) is faster than JavaScript when it comes to performance-critical tasks, such as mathematical calculations or complex algorithms.
WebAssembly (Wasm) is designed to provide a low-level, efficient way to run code on the web. JavaScript, on the other hand, is a high-level language that needs to be interpreted by the browser’s JavaScript engine.
Wasm is designed to be executed by a virtual machine that runs directly on the computer’s processor, which makes it faster and more efficient than JavaScript in some cases.
Wasm code is also compiled ahead of time, which means that it can be optimized before it is executed, leading to faster performance.
However, it’s important to note that the performance benefits of WebAssembly over JavaScript depend on the specific use case and the type of application you are building.
For some types of applications, JavaScript may be just as fast or even faster than Wasm like DOM manipulation and event handling task.
Additionally, Wasm and JavaScript can work together to create high-performance applications. For example, you can use Wasm to implement performance-critical parts of an application, while using JavaScript for other parts that do not require the same level of performance.
Can I use my same razor component source code to Blazor Server, Blazor WebAssembly,Desktop App,Android and IOS Mobile Application?
Yes, Using Razor Class Library approach using Blazor MAUI hybrid App.
will the future of Blazor application like Silverlight ?
No, Blazor is not dependent on any plugin based on technologies. By default, all modern browsers are supporting wasm. So, Web development future will be on WASM based technologies.
are there any open-source free controls for Blazor application development ?
Yes, there are so many open-source controls.
MudBlazor – a set of more than 30 components that includes buttons, grids, forms, inputs, and more.
Syncfusion Blazor – a set of more than 65 components that includes data grids, charts, navigations, and more.
Blazorise – a component library that provides a set of components for building responsive and mobile-friendly web applications.
Ant Design Blazor – a set of more than 50 components that includes layouts, inputs, buttons, modals, and more.
MatBlazor – a set of more than 60 Material Design components for Blazor.
Radzen Blazor Components
Paid Controls
1.Telerik UI for Blazor – a collection of more than 65 UI components that includes charts, grids, inputs, and more.
After going through all above points, Blazor is very cool, modern and latest web development framework from Microsoft. It will save lots of time and development cost for any companies.
Chandradev's Blog 