36 热度

AuthenticationStateProvider in Blazor WebAssembly

After all the knowledge, we have been collecting during this series, it is time to learn about authentication and authorization in Blazor WebAssembly. In this article, we are going to explore how to accomplish these actions by inspecting the AuthenticationStateProvider. We are going to create a test AuthenticationStateProvider to inspect how it works and how to protect our components. Furthermore, we are going to hide UI from unauthorized users and read the authentication state in the C# code. Later on in the series, we are going to replace the test one with the real AuthenticationStateProvider class.

收录时间: 2020-08-04
分类: Blazor
贡献者: Rector
31 热度

Creating a Progressive Web App with Blazor WebAssembly

When people talk about a Progressive Web App (PWA) they typically refer to an app that can (a) run in the browser but (b) can also function as a desktop app, even in (c) offline mode, and do that while (d) looking as much like a native app as possible. Blazor WebAssembly (formerly Client Side Blazor) makes creating a running PWA that hits most of those marks relatively easy. But, of course, just creating something that runs isn't enough: You have to create something useful which, if you want to support running offline, can be ... challenging.

收录时间: 2020-08-04
分类: Blazor
贡献者: Rector
54 热度

File Upload with Blazor WebAssembly and ASP.NET Core Web API

In the previous article, we have created a form where we had to manually type the image URL. But of course, this is not a solution we are aiming for. In this article, we are going to modify that and learn about file upload with Blazor WebAssembly. But let’s go step by step. We are going to add the server logic first and then we are going to implement the client-side upload functionality.

收录时间: 2020-07-28
分类: Blazor
贡献者: Rector
55 热度

Hybrid Blazor apps in the Mobile Blazor Bindings July update

I’m excited to announce we are releasing the Mobile Blazor Bindings July update! This release adds support for building Hybrid Blazor apps, which contain both native and web UI.

收录时间: 2020-07-23
分类: Blazor
贡献者: Rector
54 热度

Blazor WebAssembly Forms, Form Validation, and @ref Directive

Sending a GET request to the server-side application and showing the data on the page is just a part of any application. In addition to that, we have to create our data and send POST requests as well. While creating forms, we have to provide validation for a user on that form. So, creating Blazor WebAssembly forms and their validation is going to be the topic of this article. Additionally, we are going to learn how to use the modal window as a component to display a success message after the create action finishes successfully.

收录时间: 2020-07-23
分类: Blazor
贡献者: Rector
44 热度

Conway's Game of Life (With Emojis!) in C# and Blazor WebAssembly

I've been looking for new games to include in my project site BlazorGames.net, and Khalid Abuhakmeh had a perfect one in a post of his from a few weeks ago: Conway's Game of Life.

收录时间: 2020-07-23
分类: Blazor
贡献者: Rector
AD 友情赞助
49 热度

Sorting in Blazor WebAssembly and ASP.NET Core Web API

Sorting in Blazor WebAssembly, as in any other type of application, is a common functionality when we show the data fetched from the server-side application. Of course, it is not enough to implement only the client-side (Blazor WebAssembly side) sorting functionality, we have to do the same for the Web API part. And that’s exactly what we are going to do in this article.

收录时间: 2020-07-21
分类: Blazor
贡献者: Rector
68 热度

Blazor WebAssembly Searching with ASP.NET Core Web API

In this part of the series, we are going to explain how to create the Blazor WebAssembly Searching Functionality. In this example, we are going to implement a search by product name, but later on, you can modify it to your needs. As we did in a previous part with Paging, we are going to implement the Web API side first and then continue with the Blazor WebAssembly client-side application. We won’t dive deep into the searching logic because we already have a great article on that topic, so if you want to learn more, feel free to read it.

收录时间: 2020-07-15
分类: Blazor
贡献者: Rector
60 热度

ReactiveUI - ReactiveUI On The Web with Blazor

I hope by now people are starting to learn about the existence of the ReactiveUI.Blazor package. Blazor means "writing Single Page Apps like Angular or Vue in C#" and it has all the potential in the world. And ReactiveUI supports it. The official samples are here but I don't feel that they really sell the reason why you'd want to do web work with ReactiveUI, and I should know, I wrote them.

收录时间: 2020-07-14
分类: Blazor
贡献者: Rector
59 热度

Blazor WebAssembly Pagination with ASP.NET Core Web API

In this article, we are going to learn how to create a Blazor WebAssembly Pagination by consuming data from our Web API server project. We already have the server-side logic to provide the data to the client, but now, we are going to modify it to fit the pagination purpose. After the server-side mod...

收录时间: 2020-07-14
分类: Blazor
贡献者: Rector
61 热度

V-Drum Explorer: Blazor and the Web MIDI API

Yesterday, speaking to the NE:Tech user group about V-Drum Explorer, someone mentioned the Web MIDI API– a way of accessing local MIDI devices from a browser. Now my grasp of JavaScript is tenuous at best… but that’s okay, because I can write C# using Blazor. So in theory, I could build an equivalent to V-Drum Explorer, but running entirely in the browser using WebAssembly. That means I’d never have to worry about the installer again…

收录时间: 2020-07-14
分类: Blazor
贡献者: Rector
56 热度

Custom validation logic on client AND server with Blazor?

Blazor has some pretty handy built-in support for validating your forms. You can use the DataAnnotations validator and decorate your model classes with attributes like [Required] or go a step further and wire up more involved validation rules using tools like FluentValidation.

收录时间: 2020-07-08
分类: Blazor
贡献者: Rector
66 热度

Setting the Page Title in a Blazor App

This post is gonna be a short one (hence the Tips tag), but it implements something I wish was natively supported in Blazor: setting the page title! That's right, we're going to see how to take something that used to be a single line of code and make it... *counts on fingers*... 17 lines of code! Progress! OK, joking aside, I think this is a useful component, and I hope you do too, dear readers.

收录时间: 2020-07-07
分类: Blazor
贡献者: Rector
78 热度

Blazor WebAssembly HttpClient – Consuming Web API

In this article, we are going to learn more about Blazor WebAssembly HttpClient and how to use it to fetch data from the ASP.NET Core Web API server. The HttpClient service is preconfigured in BlazorWebAssembly applications, but since we are working with the API project on a different domain (Cross-origin resource sharing), we are going to create our custom HTTP logic and handle the results accordingly.

收录时间: 2020-07-07
分类: Blazor
贡献者: Rector
59 热度

Blazor带我重玩前端(二)

概览Blazor目前有两种托管模式,一种是Server-Side模式,一种是WebAssembly模式。官方首先支持的是Service-Side模式,使用WebAssembly模式,需要更新到最新版VS2019。 小编目前的精力是更多的专注于Blazor-WebAssembly模式的研究,所以本系列文章只会对Server-Side模式做简要说明。WebAssemblyWebAssembly模式(也可叫做Client-Side模式),WebAssembly前文已经说了很多了,本文不再做额外讨论。我们主要来看一下ASP.NET Core Blazor是如何实现WebAssembly模式的...

收录时间: 2020-07-06
分类: Blazor
贡献者: Rector
AD 友情赞助
73 热度

Minesweeper in Blazor WebAssembly Part 2: The Blazor Component

In our previous post, we demonstrated how to model the classic computer game Minesweeper as a C# program. In this post, we're going to take that model and use Blazor WebAssembly to create a working game. Plus I've got a very special announcement near the end of this post that you don't want to miss. Let's go!

收录时间: 2020-07-03
分类: Blazor
贡献者: Rector
73 热度

Go faster with your own re-usable Blazor components

Take a look at any web application these days and you’ll notice something…No matter what the sector, design or purpose, the “modern web app” generally consists of a few key UI elements or components. Even the most unusual, complex, visually interesting designs have some degree of consistent UI, with specific elements or components used and re-used throughout the application. Take the BBC homepage for example.

收录时间: 2020-07-01
分类: Blazor
贡献者: Rector
73 热度

Creating a Custom Validation Message Component for Blazor Forms

In this post, I'm going to show how you can create a ValidationMessage component with customisable UI. I'll start by showing a more simplistic approach and then show a more robust and reusable solution.

收录时间: 2020-07-01
分类: Blazor
贡献者: Rector
72 热度

Minesweeper in Blazor WebAssembly Part 1: C# Implementation

Let's build the computer game Minesweeper using C# and Blazor WebAssembly! Sample project included.

收录时间: 2020-07-01
分类: Blazor
贡献者: Rector
58 热度

Blazor Routing – Page Directive, Navigation Manager, Nav Links

In this article, we are going to learn about the Blazor Routing and how to enable navigation between different sections in our application. We are going to explain how to use the @page directive to support routing and how to create dynamic navigation from the code. Additionally, we are going to learn about parameters in routes and how/when to use the NavLinks components.

收录时间: 2020-06-30
分类: Blazor
贡献者: Rector
AD 友情赞助