Blazor is a framework for building interactive client web UIs using .NET:
- Use C# instead of JavaScript to create rich, interactive UI.
- Share server-side and client-side app logic written in .NET.
- Render UI as HTML and CSS to support numerous browsers, including mobile browsers.
Blazor is a web framework designed to run client-side in a browser on a WebAssembly-based .NET runtime (Blazor WebAssembly) or server-side in ASP.NET Core (Blazor server). For any managed model, the app and component models are the same.
Blazor servers
Use the Blazor server hosting model to execute apps on the server from ASP.NET Core apps.UI updates, event handling, and JavaScript calls are made throughSignalRconnections to process。
The Blazor server hosting model offers the following benefits:
- The download size is significantly smaller than the Blazor WebAssembly app, and the app loads much faster.
- Apps can take full advantage of server capabilities, including using any .NET Core-compatible APIs.
- .NET Core on the server is used to run the app, so existing .NET tools like debugging work as expected.
- Thin clients are supported. For example, the Blazor server app is suitable for browsers that don't support WebAssembly and for resource-constrained devices.
- The app's .NET/C# codebase, which includes the app's component code, doesn't work on the client.
Blazor server hosting has the following disadvantages:
Latency is usually higher. Every user interaction involves a network hop.
Working offline is not supported. If the client connection fails, the app stops working.
If you have multiple users, there are challenges in app scalability. The server must manage multiple client connections and handle client state.
ASP.NET Core servers are required to serve the application. Serverless deployment scenarios are not feasible (e.g., serving applications through a CDN).
Tutorial starts:
1. First, create a new Blazor App project using vs2019, as shown below:
2. Create a new Razor component with the following code:
We need the SkiaSharp package to generate the base64 captcha and install it via nuget:
3. Start the project, visit:The hyperlink login is visible.
The generated html code looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorApp1</title>
<base href="/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
<!--Blazor:{"sequence":0,"type":"server","prerenderId":"19210eabb9054fe79ea7cc3e6f501df5","descriptor": "CfDJ8G8mpuBWCflCst2FMatPfBxQE\u002Br1dzwAAKPTr0QFhEikdvN38F\u002BP7DcVOKo\u002BPF9p1ZAgdir\u002BYdhFqRpzbwsqEap4xG3gpcMVtLX2yGCGhOnh596O6KcFICrjAZGk82Q2lVu\ u002B94jRo6qJ9JgxrjzuAOxLvrXBlFoGwTssxsHOI2qoQHGwlv\u002BA\u002BGsyaTjfxZ8DAgqAuiwaHynCg0J18d/VUh8brr9FrMe91kKCVw0OLUVRjCXK0FXGvXPYKjEIuE9FY5w3EvO17tJJ/ 9LpOKmqEeYpk6FlOPeuviBB1LhHBrzycchpZAb8eNGY51tN5Gjcqf/uNOMHZYLXoxjj6bmug/62JJvaQ62OrFNqIJw6S730"}-->
<div class="sidebar">
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href>BlazorApp1</a>
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse">
<ul class="nav flex-column">
<li class="nav-item px-3">
<a href="" class="nav-link">
<span class="oi oi-home" aria-hidden="true"></span> Home
</a>
</li>
<li class="nav-item px-3">
<a href="counter" class="nav-link">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</a>
</li>
<li class="nav-item px-3">
<a href="fetchdata" class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<div class="content px-4">
<h3>Verification</h3>
<p>
(Blazor) A sample for how to show verification code and verify it.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Renew</button>
<hr>
<div>Type the number in image</div>
<form>
<input type="text" style="padding:5px" />
<button>Check</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
An unhandled exception has occurred. See browser dev tools for details.
<a href="" class="reload">Reload</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Try clicking on the button, the button event trigger is communicated through SignalR, which is based on websocket, polling, etc., as shown in the figure below:
Reference links:
The hyperlink login is visible.
|
Posted on 4/7/2020 11:15:36 AM
|
|
|
|
Landlord|
Posted on 4/7/2020 11:45:47 AM
|
Posted on 11/15/2022 10:51:42 AM
|
