Blazor 拖放上传文件转换格式并推送到浏览器下载
昨天有个小伙伴发了一个老外java编写的小工具给我,功能是转换西班牙邮局快递Coreeos express的单据格式成Amazon格式,他的需求是改一下程序为匹配转换另一个快递公司MRW格式到Amazon格式,然而我堂堂一个Blazor发烧友,怎么可能去反编译人家的java修改呢?必须直接撸一个Blazor的啊.分析需求原始MRW文件...
Use a recursive Blazor component to render a TreeView
I recently ran into a requirement to show a nested list of items in a menu for a “code explorer” component. here’s no concrete limit to how deep this list can go (each item can have its own list of items and so on and so forth).
Copy To Clipboard in Blazor WebAssembly
In this article, we are going to learn how we can Copy to Clipboard in a Blazor WebAssembly Project.
Blazor和Vue对比学习（基础1.6）：祖孙传值，联级和注入
前面章节，我们实现了父子组件之间的数据传递。大多数时候，我们以组件形式来构建页面的区块，会涉及到组件嵌套的问题，一层套一层。这种情况，很大概率需要将祖先的数据，传递给子孙后代去使用。我们当然可以使用父传子的方式，使用属性一级级往下传，但这样真得很麻烦。所以在Vue和Blazor都提供了祖孙传值的方案。插个话题：有人会问，子传父是不是也可以一级级往上传？当然可以，但你绝不要这么去做。子传父就已经够绕了，不要为难自己。如果有这种需求，应该考虑数据状态从组件中剥离出来，我们将在进阶章节，一起学习“状态管理”。Vue中使用provide/inject这两个API来实现祖孙传值（这个概念被翻译为依赖注入...
Blazor和Vue对比学习（基础1.4）：事件和子传父
Blazor和Vue的组件事件，都使用事件订阅者模式。相对于上一章的组件属性，需要多绕一个弯，无论Blazor还是Vue，都是入门的第一个难点。要突破这个难点，一是要熟悉事件订阅模式<其实不难>；二是多练几次、熟悉套路。接下面，我们开始学习以下几个知识点
Introduction to Testing Blazor WebAssembly With bUnit
In this article, we are going to learn about unit testing a Blazor WebAssembly Project using the bUnit testing library. If you find some of the concepts we are testing hard to understand, we have a great Blazor WebAssembly Series that is worth checking out.
Upload Files With Drag & Drop or Paste in Blazor
In this article, we are going to look at how we can upload files to a Blazor Server application using Drag & Drop, as well as Copy/Paste functionality. We will be making use of the JavaScript Interop to invoke JavaScript functions from our C# code. Therefore, we recommend having a basic knowledge of the JSInterop in Blazor.
Using Blazor with a YARP downstream API protected using certificate authentication
This article shows how to use a downstream API protected with certificate authentication using Microsoft YARP reverse proxy from a Blazor application. The Blazor WASM HTTP requests are sent to a secured backend which uses YARP to forward the requests to the API protected with the certificate authentication. The Blazor application authenticates using the OpenIddict identity provider using the BFF security architecture. The downstream API which is protected using the certificate authentication is deployed to an Azure App Service and requires a known client certificate to use the API.
How I organise my Blazor components
When you come to a web project how do you know where to find its components? After a few years working on Blazor projects I’ve settled on a fairly consistent approach for organising my components.
Custom deployment layout for Blazor WebAssembly apps
Some environments block the download and execution of DLLs from the network to prevent the potential spread of malware, which can also block downloading Blazor WebAssembly apps. To enable Blazor WebAssembly in these environments, we introduced in .NET 6 new extensibility points that allows developers to customize the published files and packaging of Blazor WebAssembly apps. These customizations can then be packaged as a reusable NuGet package.
Improving application security in Blazor using HTTP headers – Part 2
This article shows how to improve the security of an ASP.NET Core Blazor application by adding security headers to all HTTP Razor Page responses (Blazor WASM hosted in a ASP.NET Core hosted backend). The security headers are added using the NetEscapades.AspNetCore.SecurityHeaders Nuget package from Andrew Lock. The headers are used to protect the session, not for authentication. The application is authenticated using OpenID Connect, the security headers are used to protected the session. The authentication is implemented in the Blazor application using the BFF pattern. The WASM client part is just a view of the server rendered trusted backend and cookies are used in the browser. All API calls are same domain only and protected with a cookie and same site.
Upload files with drag & drop or paste from clipboard in Blazor
To upload a file you can use the FileUpload control. This control generates a input type="file" element and allows you to upload a file. To get a good user experience, you also need to support dropping files from the explorer or pasting images from the clipboard. The final result should look like this...
Using App Roles with Azure Active Directory and Blazor WebAssembly Hosted Apps
In the previous article, we’ve talked about securing our Blazor WebAssembly Hosted application with Azure Active Directory. So in this article, as a continuation, we are going to learn how to use App Roles from Azure Active Directory to provide a greater level of security for our apps.
Solitaire in Blazor Part 1 - Overview
Yep, you read that right! We're going to code up a new game in Blazor WebAssembly, and I'm proud to announce that it is quite possibly the single biggest time-waster in all computer history: solitaire!
10 Blazor Features You Probably Didn't Know
Blazor is still a relatively young technology, yet it has gained incredible momentum since its release in 2018. Originally an experimental project, Blazor now ships as part of .NET 5 and is considered production-ready. Its main attraction for .NET developers is that they can use their favorite languages like C# to write single-page applications, reusing existing .NET libraries and frameworks. Like most modern web technologies, Blazor is evolving rapidly. Every few months, its developers release previews packed with new features.
Building Contextual Experiences w/ Blazor
Hi there! My name is Hassan Habib, I’m a Sr. Engineering Manager @ Microsoft. This is my very first blog post on the ASP.NET team blog. You may know me from my OData posts. Few weeks ago I reached out to Daniel Roth wondering if it would be a good idea to share how Microsoft engineers use Microsoft products to build our own systems. It’s a little something we call “Run Microsoft on Microsoft” – Daniel was very supportive and we worked together to make it possible, and for that I’m very grateful.
Blazor Material Form Creation with File Upload and Dialogs
In the previous article, we have created our interactive product details page using different MudBlazor components (Panel, Chart, Rating, etc). As a continuation, in this article, we are going to use the Blazor Material Form component, to create a form that handles product creation logic. We are going to add a file upload functionality to our form and show some messages using Dialog and Snackbar components. Of course, we are going to utilize our Web API project to handle POST requests (product creation and file upload) that we send from the client application.
ASP.NET Blazor Server call Web Api return IEnumerable
This blog article shows you one of the possible way for ASP.NET Blazor Server to call ASP.NET Web Api with the return of IEnumerable. First, both side is having the below object.
Securing Blazor Web assembly using Cookies and Auth0
The article shows how an ASP.NET Core Blazor web assembly UI hosted in an ASP.NET Core application can be secured using cookies. Auth0 is used as the identity provider. The trusted application is protected using the Open ID Connect code flow with a secret and using PKCE. The API calls are protected using the secure cookie and anti-forgery tokens to protect against CSRF. This architecture is also known as the Backends for Frontends (BFF) Pattern.
Tetris in Blazor Part 4: Displaying the Grid and a Falling Tetromino
At this point in our series, we have the entire C# model of our Tetris game ready. What we're going to do now is create a set of Blazor components to actually display the game grid and a falling tetromino.