Posts

学习Blazor

这是一个根据 Awesome 翻译并重新整理了资源了的Blazor学习网站,我会优先手机那些中文,然后是翻译了的资料,其次是英文的资料!同时非常欢迎大家一起为Blzaor添砖加瓦。

Blazor 是一个 .NET 的Web框架, 它使用C#/Razor 和 HTML通过WebAssembly运行在浏览器里.

Awesome Blazor

介绍

什么是 Blazor

Blazor is a .NET web framework to build client web apps with C#.

Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries. More information on the official Blazor website.

Get started

To get started with Blazor, follow the instructions in the Blazor Get Started documentation.

To open Blazor projects in Visual Studio, you must have Visual Studio 2019 16.3 or later and the .NET Core 3.0 SDK.

Note: the Blazor Visual Studio extension is no longer required since .NET Core 3.0 Preview 7. Uninstall the extension if you still have it installed.

General

Sample Projects

Authentication

  • BlazorBoilerplate - GitHub stars GitHub stars Real World Admin Dashboard / Starter kit with IdentityServer4 Material Design. Demo.
  • BlazorWithIdentity - GitHub stars GitHub stars A sample project showcasing a Blazor app using EF Core with Identity authentication.
  • Blazor.JWTTest - GitHub stars GitHub stars JWT authentication for a Blazor hosted (Client/Server-side) app with API and Authentication.
  • BlazorAuthenticationSample - GitHub stars GitHub stars A sample showing some of the ASP.NET Core Blazor authentication features (also some testing…).
  • Blazor.OpenId - Easy authentication and client refresh using OpenId.
  • Blazor.Msal - Sample implementation for MSAL in Blazor, it shows how to integrate a Single Page Web Application made in Blazor WebAssembly with Azure Active Directory. It allows to authenticate the user and then acquire an access token to make a secure call to an external API. The code internally uses MSAL.js to implement the OpenID Connect and OAuth2 flows.

    Cloud

  • BlazorAzure.WebApp - Blazor Azure web app.
  • BlazorAzure.Functions - Azure function with Blazor.
  • BlazorFile2Azure - Upload a file from Blazor WebAssembly to Azure Blob Storage.

    CMS

  • BlogCore - GitHub stars GitHub stars Modern CMS on Domain-driven Design and Clean Architecture patterns.
  • WordDaze - GitHub stars GitHub stars Blogging application written using Blazor with a WebAPI backend.
  • RapidCMS - GitHub stars GitHub stars A code-first, extensible Blazor app that generates a CMS for your own database.

    Games

  • AsteroidsWasm - GitHub stars GitHub stars A mixed bag of C# projects to see if a single .NET Standard base can run across all common platforms include WebAssembly. Demo.
  • BlazorQuiz - GitHub stars GitHub stars Simple quiz using Blazor.NET and WebAssembly.
  • Blagario - GitHub stars GitHub stars Experimental lab to test Blazor server side as multiplayer game engine.
  • BlazorChess - GitHub stars GitHub stars Chess engine implemented with Blazor. Demo.
  • Flappy Blazor Bird - GitHub stars GitHub stars Blazor Flappy Bird’s port. [Wasm Demo] [Multiplayer Demo].
  • Tzaar - Implementation of the board game Tzaar with Blazor and SignalR. Demo.
  • BlazorGameSnake - 2D game snake with customizations, path finding algorithm, and sound effects using SVG. Demo.
  • Blazor20Questions - Client/Server game using Websockets (SignalR) & MongoDB API, with Docker (docker-compose).
  • BlazorDestinationGame - Quiz about places in the world. Demo.
  • BlazorDice - Roll the dice.
  • BlazorPong - Pong in Blazor server side using SignalR Core. Demo.
  • BlazorTictactoe - Tic-tac-toe in Blazor WebAssembly. Demo.
  • DiabloBlazor - Blazor port of DiabloWeb, making it a double WebAssembly app: a WebAssembly (C#) PWA hosting a WebAssembly (C++) game. Demo.
  • BlazorConnectFour - Classic childhood game ConnectFour in Blazor.

    Machine Learning

  • Scalable sentiment analysis - GitHub stars GitHub stars A sample ables to make sentiment analysis prediction/detection of what the user is writing in a very UI interactive app (Blazor based) in the client side and running an ML.NET model (Sentiment analysis based on binary-classification) in the server side.
  • PropertyPrices - A blazor front-end site that provides analysis and ensemble learning predictions (through SharpLearning) of property prices in the UK.

    ToDos

  • BlazorTasks - GitHub stars GitHub stars To-Do App.
  • Bolero.TodoMVC - GitHub stars GitHub stars A TodoMVC clone using Bolero.
  • BlazorAdvancedTodo - A Blazor to-do app with state and undo function.

    Others

  • Flight Finder - GitHub stars GitHub stars Flight Finder.
  • Oqtane Framework - GitHub stars GitHub stars Modular Application Framework for Blazor.
  • BlazorElectronExperiment - GitHub stars GitHub stars Status Exploring how a Blazor could be used to build a cross-platform desktop application using Electron.
  • BlazorFileReader - GitHub stars GitHub stars Read-only File streams in Blazor. Demo.
  • BlazorDesktop - GitHub stars GitHub stars Native desktop Blazor app which not using Electron, by Steve Sanderson.
  • Toss.Blazor - GitHub stars GitHub stars Twitter-like web application using Blazor.
  • BlazeDown - GitHub stars GitHub stars BlazeDown, online Markdown editor. Demo.
  • Blazor.Toaster - GitHub stars GitHub stars A Blazor port of Toastr.js.
  • BlazorChatSample - stars last commit Blazor chat demo using SignalR JS client with interop.
  • Money - GitHub stars GitHub stars A money manager implemented using CQRS+ES. Demo.
  • Tour of Heroes - GitHub stars GitHub stars Blazor implementation of Angular Tour of Heroes.
  • Runny - GitHub stars GitHub stars Prototype of running roslyn in the browser via Blazor. Demo.
  • Blazor Weather - GitHub stars GitHub stars A Blazor Weather sample app that shows the current weather for your current location and a collection of pinned locations. Demonstrated at .NET Conf 2019 by Daniel Roth. Demo.
  • Gitter - GitHub stars GitHub stars A Blazor Gitter client.
  • NethereumBlazor - GitHub stars GitHub stars Ethereum blockchain explorer and simple wallet.
  • BlazorGrpc - GitHub stars GitHub stars Sample project that demonstrates how you can use the power of Blazor, ASP.NET Core, and gRPC to create a web application which can communicate with a backend that uses gRPC.
  • BlazePort - GitHub stars GitHub stars A futuristic ride share app for space travel written in full stack .NET with Blazor.
  • BlazingPizza (server side) - GitHub stars GitHub stars A server side Blazor version of the Blazing Pizza project from the Blazor - app building workshop GitHub stars.
  • BlazorGraphExample - stars last commit Example application for connecting to Graph API from Blazor.
  • BlazorDynamicList - GitHub stars GitHub stars Dynamic component binding for a generic list. Demo.
  • Try F# on WebAssembly - GitHub stars GitHub stars The F# compiler running in WebAssembly with Bolero.
  • StarshipTraveler - GitHub stars GitHub stars A starship traveler demo app built with Blazor for the DevOne 2019 conference.
  • Blazor + Sitecore - GitHub stars GitHub stars Example of dynamic pages and routes with SiteCore and Helix.
  • BlazorServerTree - GitHub stars GitHub stars A simple Server-Side Blazor sample app to deal with hierarchical data.
  • eShopOnBlazor - GitHub stars GitHub stars Migration of a traditional ASP.NET Web Forms app to Blazor.
  • BlazorBinding - GitHub stars GitHub stars Sample Blazor App demonstrating various data binding scenarios.
  • Blazor FIRE Calculators - GitHub stars GitHub stars Client-side financial calculators built using Blazor WebAssembly. Demonstrates custom number formatting and offline Progressive Web App (PWA) functionality. Demo.
  • WebSocketPage - GitHub stars GitHub stars Web Socket in Blazor. demo.
  • Blazor Survey - GitHub stars GitHub stars A hybrid F#/C# Blazor sample app to kick the tyres of
  • Beam - A social network demo application. This is the source code of the LinkedIn course “Blazor First Look”.
  • C# Minifer A client-side Blazor application demonstrating live minification of C# code using the C# Minifier library. Demo.
  • BlazorClockCanvas - Complex clock based on Canvas. Demo.
  • Blazor Spreadsheet - Spreadsheet app developed in Blazor. Demo.
  • Client-side RealWorld - RealWorld implementation of Blazor Client-Side. Demo.
  • BlazorClockSVG - Complex clock based on SVG. Demo.
  • Server-side RealWorld - RealWorld implementation of Blazor Server-Side. Demo.
  • BlazorPasswordPattern - Password pattern based on SVG. Demo.
  • BlazorRawHtmlRenderer - Raw HTML rendering with Blazor. Demo.
  • BlazorBeerCalculator - Offline beer alc. vol. calculator built on Blazor. Demo.
  • BlazorCalculator - Simple calculator with history and ability to use previous results in new calculations. Demo.
  • Blazor calculator with expressions - A sample numerical expression evaluator in Blazor utilizing an F# library that uses FsLex and FsYacc to parse expressions. Demo.
  • Blazor Charts - Chart components for Blazor.
  • Blazor Converters - Blazor Converters is simple converter app written using Blazor, influenced by Windows 10 Calculator.
  • BlazorCRUD - Sample line of business application that illustrates key features of Blazor. Demo.
  • BlazorFormsValidation - Blazor form validation sample.
  • BlazorPaint - A paint sample with Blazor (demo).
  • BlazorPages - A sample client-side Blazor app showcasing automatic deployment to GitHub Pages via Azure Pipelines.
  • BlazorServiceWorker - A client-side Blazor template with service worker caching.
  • Blazor Summernote - Wrapper for the new MS Blazor framework, allowing the use of the Summernote WYSIWYG editor in a form.
  • Blazor Tree CRUD - CRUD operations with hierarchical data. Blazor Server + GraphQL + EF.
  • Blazor.Universal - Example of using Blazor to build Xamarin based UWP application without WebAssembly.
  • BlazorUnmarshalledCanvas - Unmarshalled invoking of Canvas 2d context from Blazor.
  • BlazorValidationControls - Blazor validation controls.
  • Blazor + Electron sample - Explore how a Blazor app can be used to build a cross-platform desktop app.
  • Data Driven Layout - Two ways of driving the layout based on data in the page.
  • Pattern Maker - C# code transformation demo that uses Roslyn and Monaco Editor. Demo.
  • Rudder Example - Sample application using Rudder state container for Blazor.
  • TaxiFareBlazorServer - ML.NET TaxiFare Prediction Model with Blazor Server-Side front end.
  • Tulsa .NET User Group website - Tulsa .NET User Group website.
  • ZoraGen Blazor - PWA capable Blazor UI for the ZoraSharp library.
  • Planning Poker – An app to play Planning Poker for distributed teams. The app is implemented using Blazor and shows how to switch between client-side and server-side mode with a configuration change. Demo.
  • Gjallarhorn - Compare packages on different NuGet-sources. Demonstrating Client-Side Blazor MVVM-style.
  • C# Regex Tester online - Online tool for verify .Net regex syntax. (Demo).
  • CssBuilder – A clean code approach to conditional CSS classes for Razor components in Blazor.
  • EncFS over Google Drive - Online tool written in Blazor for encrypt/decrypt files in Google Drive.
  • BlazorPoint - Sample App to help you get started with hosting Blazor on SharePoint Pages, Completely Client Side.
  • Return - Realtime retrospective tool built in ASP.NET Core and Blazor.
  • Blazor Tour of Heroes - Blazor Tour of Heroes, using Blazor-State(State Management architecture utilizing the MediatR pipeline) for the Redux style state.
  • Blazor.Console - last commit A simple component to mock CLI for ASP.NET Core 3.0 Blazor applications to execute some custom commands for an application.
  • Cognitive Services Explorer - last commit PWA enabled app used to showcase what Cognitive Services can do, built-in client-side Blazor. Demo.

Tutorials

Libraries & Extensions

Components

Reusable components like buttons, inputs, grids and more.

Tools & Utilities

Libraries and extensions for state management, cookies, local storage and other specific tools.

Videos

Articles

Podcasts

Presentations slides

Tooling

Books

E-Books

Courses

Community

Other Languages

License

CC0

To the extent possible under law, Adrien Torris has waived all copyright and related or neighboring rights to this work.

subscribe via RSS