Serving Industries Worldwide

Innovative Ways - Satisfied Clientele

Web Application Development Using ASP.NET Blazor Framework

Web Application Development Using ASP.NET Blazor Framework

Table of Content

Overview:

  • Blazor is a free and open-source web structure that empowers engineers to make web applications utilizing C# and HTML. It is being created by Microsoft.
  • If you need the interactivity of a single-page app in your .NET app, then at that point Blazor Server is an extraordinary arrangement.
  • Blazor server can be utilized to compose totally new applications or to supplement existing MVC and Razor Pages applications. There's no compelling reason to rework the existing application rationale.
  • Blazor Web Assembly is due for release around May 2020.

  • Blazor also supports features of a SPA framework such as:
    • Routing
    • Layouts
    • Forms and validation
    • JavaScript interop
    • Build on save during development
    • Server-side rendering
    • Dependency Injection

What is Blazor?

  • Blazor is the latest .NET web framework that enables us to create client-side applications using C#/Razor and HTML that runs in the browser with WebAssembly. It can simplify the process of creating a single page application (SPA) and at the same time enables full-stack web development using .NET.

Advantages:

  • Leverage the current .NET biological system of .NET libraries.
  • Share application rationale across server and customer.
  • Benefit from .NET's exhibition, unwavering quality, and security.
  • Stay gainful with Visual Studio on Windows, Linux, and macOS.
  • Build on a typical arrangement of dialects, systems, and instruments that are steady, highlight-rich, and simple to utilize.

Blazor hosting models:

  • Blazor is a web-based framework designed to run client-side ASP.NET Core (Blazor WebAssembly) or server-side ASP.NET Core (Blazor Server) runtime in the browser. The app and the component models are the same, whatever the hosting model.

  • Blazor Server
    • With the Blazor Server facilitating model, the application is executed on the server from inside an ASP.NET Core application. UI refreshes, occasion taking care of, and JavaScript brings are dealt with over a SignalR association.
      Blazor Server Model
    • To make a Blazor application utilizing the Blazor Server facilitating model, utilize the ASP.NET Core Blazor Server App layout (detent new blazorserver). The ASP.NET Core application has the Blazor Server application and makes the SignalR endpoint with customers interface.
    • The blazor.server.js script establishes the client connection. It's the app's responsibility to persist and restore the app state as required (for example, in the event of a lost network connection). The blazor.server.js script is served from an embedded resource in the ASP.NET Core shared framework.

  • Blazor WebAssembly
    • The chief facilitating model for Blazor is running customer side in the program on WebAssembly. The Blazor application, its conditions, and the .NET runtime are downloaded to the program. The application is executed straightforwardly on the program UI string. UI updates and occasions taking care of happening inside a similar procedure. The app's assets are deployed as static files to a web server or service capable of serving static content to clients.
      Blazor WebAssembly
    • To make a Blazor application utilizing the customer side facilitating model, utilize the Blazor WebAssembly App layout.
    • In the wake of choosing the Blazor WebAssembly App layout, you have the choice of designing the application to utilize an ASP.NET Core backend by choosing the ASP.NET Core facilitated checkbox (dot net new blazorwasm - facilitated). The ASP.NET Core application serves the Blazor application to customers. The Blazor WebAssembly application can interface with the server over the system utilizing web API calls or SignalR (Use ASP.NET Core SignalR with Blazor WebAssembly).
    • The templates include the blazor.webassembly.js script that handles:
      • Downloading the .NET runtime, the app, and the app's dependencies.
      • Initialization of the runtime to run the app.

Blazor Prerequisites:

  • .NET Core 3.0
  • Visual Studio 2017 v15.7 and below versions do not support the Blazor.
  • Microsoft Internet Explorer not supported blazor WebAssembly
  • Microsoft Internet Explorer 11+ for blazor server

Components:

  • Components are .NET classes built into .NET assemblies that:
    • Define adaptable UI rendering rationale.
    • Handle client occasions.
    • Can be settled and reused.
    • Can be shared and conveyed as Razor class libraries or NuGet bundles.
  • The component class is generally written as a Razor mark-up page with a razor document augmentation. Segments in Blazor are officially alluded to as Razor segments. Razor is a language structure for joining HTML markup with C# code intended for designer efficiency. Razor permits you to switch between HTML markup and C# in a similar document with IntelliSense support. Razor Pages and MVC likewise use Razor. Dissimilar to Razor Pages and MVC, which are worked around a solicitation/reaction model, parts are utilized explicitly for customer side UI rationale and organization.

Example:

  • This is the demo example of basic calculation using blazor.
     
      
    page "/calculator"  
    

    Basic calculation Demo Using Blazor


    Number 1

     

    Number 2

     

    Result

     
    Add
    Subtract
    Multiply
    Divide
    @functions { string num1; string num2; string finalresult; void Addition() { finalresult = (Convert.ToDouble(num1) + Convert.ToDouble(num2)).ToString(); } void Subtraction() { finalresult = (Convert.ToDouble(num1) - Convert.ToDouble(num2)).ToString(); } void Multiplication() { finalresult = (Convert.ToDouble(num1) * Convert.ToDouble(num2)).ToString(); } void Divition() { if (Convert.ToDouble(num2) != 0) { finalresult = (Convert.ToDouble(num1) / Convert.ToDouble(num2)).ToString(); } else { finalresult = "Cannot Divide by Zero"; } } }

Conclusion:

Blazor made another framework for building UI, which is not bad at all. The idea is brilliant and all of these modern things are also there (e.g. WASM). Unfortunately, it will be used only by the .net community, and probably by developers who are struggling with JS. Hence, it will never be used with a broad audience, consequently, there will be fewer developers who want to take this path.