Το Blazor είναι ένα πλαίσιο για τη δημιουργία διαδραστικών διεπαφών ιστού πελατών χρησιμοποιώντας .NET:
- Χρησιμοποιήστε C# αντί για JavaScript για να δημιουργήσετε πλούσια, διαδραστική διεπαφή χρήστη.
- Κοινή χρήση λογικής εφαρμογών από την πλευρά του διακομιστή και του προγράμματος-πελάτη γραμμένη σε .NET.
- Αποδώστε τη διεπαφή χρήστη ως HTML και CSS για να υποστηρίξετε πολλά προγράμματα περιήγησης, συμπεριλαμβανομένων των προγραμμάτων περιήγησης για κινητά.
Το Blazor είναι ένα πλαίσιο ιστού που έχει σχεδιαστεί για να εκτελείται από την πλευρά του πελάτη σε ένα πρόγραμμα περιήγησης σε χρόνο εκτέλεσης .NET που βασίζεται σε WebAssembly (Blazor WebAssembly) ή από την πλευρά του διακομιστή στο ASP.NET Core (διακομιστής Blazor). Για οποιοδήποτε διαχειριζόμενο μοντέλο, τα μοντέλα εφαρμογών και στοιχείων είναι τα ίδια.
Διακομιστές Blazor
Χρησιμοποιήστε το μοντέλο φιλοξενίας διακομιστή Blazor για να εκτελέσετε εφαρμογές στον διακομιστή από εφαρμογές ASP.NET Core.Οι ενημερώσεις διεπαφής χρήστη, ο χειρισμός συμβάντων και οι κλήσεις JavaScript πραγματοποιούνται μέσωΣήμα RΣυνδέσεις στη διαδικασία。
Το μοντέλο φιλοξενίας διακομιστή Blazor προσφέρει τα ακόλουθα πλεονεκτήματα:
- Το μέγεθος λήψης είναι σημαντικά μικρότερο από την εφαρμογή Blazor WebAssembly και η εφαρμογή φορτώνει πολύ πιο γρήγορα.
- Οι εφαρμογές μπορούν να επωφεληθούν πλήρως από τις δυνατότητες του διακομιστή, συμπεριλαμβανομένης της χρήσης οποιωνδήποτε API συμβατών με .NET Core.
- Το .NET Core στον διακομιστή χρησιμοποιείται για την εκτέλεση της εφαρμογής, επομένως τα υπάρχοντα εργαλεία .NET όπως ο εντοπισμός σφαλμάτων λειτουργούν όπως αναμένεται.
- Υποστηρίζονται thin clients. Για παράδειγμα, η εφαρμογή διακομιστή Blazor είναι κατάλληλη για προγράμματα περιήγησης που δεν υποστηρίζουν WebAssembly και για συσκευές με περιορισμένους πόρους.
- Η βάση κώδικα .NET/C# της εφαρμογής, η οποία περιλαμβάνει τον κώδικα στοιχείων της εφαρμογής, δεν λειτουργεί στον πελάτη.
Η φιλοξενία διακομιστή Blazor έχει τα ακόλουθα μειονεκτήματα:
Η καθυστέρηση είναι συνήθως υψηλότερη. Κάθε αλληλεπίδραση χρήστη περιλαμβάνει ένα άλμα δικτύου.
Η εργασία χωρίς σύνδεση δεν υποστηρίζεται. Εάν η σύνδεση πελάτη αποτύχει, η εφαρμογή σταματά να λειτουργεί.
Εάν έχετε πολλούς χρήστες, υπάρχουν προκλήσεις στην επεκτασιμότητα της εφαρμογής. Ο διακομιστής πρέπει να διαχειρίζεται πολλές συνδέσεις πελατών και να χειρίζεται την κατάσταση του υπολογιστή-πελάτη.
Απαιτούνται διακομιστές ASP.NET Core για την εξυπηρέτηση της εφαρμογής. Τα σενάρια ανάπτυξης χωρίς διακομιστή δεν είναι εφικτά (π.χ. εξυπηρέτηση εφαρμογών μέσω CDN).
Το σεμινάριο ξεκινά:
1. Αρχικά, δημιουργήστε ένα νέο έργο Blazor App χρησιμοποιώντας το vs2019, όπως φαίνεται παρακάτω:
2. Δημιουργήστε ένα νέο στοιχείο Razor με τον ακόλουθο κώδικα:
Χρειαζόμαστε το πακέτο SkiaSharp για να δημιουργήσουμε το base64 captcha και να το εγκαταστήσουμε μέσω nuget:
3. Ξεκινήστε το έργο, επισκεφθείτε:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Ο κώδικας html που δημιουργείται μοιάζει με αυτό:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Εφαρμογή Blazor1</title>
<βάση href="/" />
<link rel="φύλλο στυλ" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="φύλλο στυλ" />
</head>
<body>
<app>
<!--Blazor:{"sequence":0,"type":"διακομιστής","prerenderId":"19210eabb9054fe79ea7cc3e6f501df5","περιγραφέας": "CfDJ8G8mpuBWCflCst2FMatPfBxQE\u002Br1dzwAAKPTr0QFhEikdvN38F\u002BP7DcVOKo\u002BPF9p1ZAgdir\u002BYdhFqRpzbwsqEap4xG3gpcMVtLX2yGCGhOnh596O6KcFICrjAZGk82Q2lVu\ u002B94jRo6qJ9JgxrjzuAOxLvrXBlFoGwTssxsHOI2qoQHGwlv\u002BA\u002BGsyaTjfxZ8DAgqAuiwaHynCg0J18d/VUh8brr9FrMe91kKCVw0OLUVRjCXK0FXGvXPYKjEIuE9FY5w3EvO17tJJ/ 9LpOKmqEeYpk6FlOPeuviBB1LhHBrzycchpZAb8eNGY51tN5Gjcqf/uNOMHZYLXoxjj6bmug/62JJvaQ62OrFNqIJw6S730"}-->
<div class="πλευρική γραμμή">
<div class="γραμμή πλοήγησης PL-4 στην κορυφή της σειράς>
<a class="navbar-brand" href>BlazorApp1</a>
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse">
<ul class="ευέλικτη στήλη πλοήγησης">
<li class="nav-item px-3">
<a href="" class="nav-link">
<span class="oi oi-home" aria-hidden="true"></span> Αρχική σελίδα
</a>
</li>
<li class="nav-item px-3">
<a href="μετρητής" class="nav-link">
<span class="oi oi-plus" aria-hidden="true"></span> Μετρητής
</a>
</li>
<li class="nav-item px-3">
<a href="fetchdata" class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true"></span> Λήψη δεδομένων
</a>
</li>
</ul>
</div>
</div>
<div class="κύρια">
<div class="επάνω σειρά px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">Σχετικά</a>
</div>
<div class="περιεχόμενο px-4">
<h3>Επαλήθευση</h3>
<p>
(Μπλάζορ) Ένα δείγμα για τον τρόπο εμφάνισης του κωδικού επαλήθευσης και την επαλήθευσή του.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Ανανέωση</button>
<hr>
<div>Πληκτρολογήστε τον αριθμό στην εικόνα</div>
<form>
<input type="text" style="padding:5px" />
<button>Έλεγχος</button>
</form>
<hr>
<button>Κάντε κλικ στο TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
Παρουσιάστηκε μια ανεπίλυτη εξαίρεση. Δείτε τα εργαλεία προγραμματισμού του προγράμματος περιήγησης για λεπτομέρειες.
<a href="" class="επαναφόρτωση">Επαναφόρτωση</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Δοκιμάστε να κάνετε κλικ στο κουμπί, η ενεργοποίηση συμβάντος κουμπιού κοινοποιείται μέσω του SignalR, το οποίο βασίζεται σε websocket, polling κ.λπ., όπως φαίνεται στο παρακάτω σχήμα:
Σύνδεσμοι αναφοράς:
Η σύνδεση με υπερσύνδεσμο είναι ορατή.
|
Δημοσιεύτηκε στις 7/4/2020 11:15:36 π.μ.
|
|
|
|
Σπιτονοικοκύρης|
Δημοσιεύτηκε στις 7/4/2020 11:45:47 π.μ.
|
Δημοσιεύτηκε στις 15/11/2022 10:51:42 π.μ.
|
