Edi Wang

How to Set no-cache Header for index.html in Azure Static Web Apps

2026-05-05T03:46:34Z

Problem

When hosting an Angular application on Azure Static Web Apps, there is one small caching detail that can cause a surprisingly annoying issue:

index.html can be cached by the browser.

That might sound harmless at first, but for a single-page application it can prevent users from getting the latest version of the app after a deployment.

The fix is simple: tell Azure Static Web Apps to instruct the browser not to cache index.html.

Angular production builds usually generate files like this:

main.8f3a1c2d.js
polyfills.1d4a9b7e.js
styles.2c9f0a11.css

These files are fingerprinted with a hash in the file name. That is great for caching because when the content changes, the file name changes too.

So caching files like JavaScript, CSS, images, and fonts is normally fine.

The problem is index.html.

The index.html file is the entry point for the Angular app. It contains references to the generated JavaScript and CSS files.

For example:

<script src="main.8f3a1c2d.js" type="module"></script>

After a new deployment, Angular may generate a new file:

main.a91b72ff.js

But if the browser still uses an old cached version of index.html, it may keep trying to load the old JavaScript bundle.

Depending on your deployment setup, this can result in issues such as:

users not seeing the latest version of the app
old JavaScript bundles being loaded
ChunkLoadError errors
the app appearing broken until the user does a hard refresh

Not a great experience.

Solution

The solution is to configure Azure Static Web Apps to return cache headers for index.html that prevent the browser from caching it.

In Azure Static Web Apps, this is done using the staticwebapp.config.json file. Typically, you will put this file in the public folder of your Angular application.

Here is an example configuration:

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": [
      "/*.{css,scss,sass,js,mjs,map,ico,png,jpg,jpeg,gif,svg,webp,woff,woff2,ttf,eot,txt,xml}",
      "/assets/*"
    ]
  },
  "routes": [
    {
      "route": "/index.html",
      "headers": {
        "Cache-Control": "no-cache, no-store, must-revalidate"
      }
    }
  ]
}

The important part is this route:

{
  "route": "/index.html",
  "headers": {
    "Cache-Control": "no-cache, no-store, must-revalidate"
  }
}

This tells the browser that index.html should not be stored and reused without checking for a fresh version.

After deploying, you can verify the response headers using your browser dev tools or curl. You should see something like Cache-Control: no-cache, no-store, must-revalidate

edi@edi-pn61:~$ curl -I https://tools.edi.wang
HTTP/2 200
content-type: text/html
date: Tue, 05 May 2026 03:44:29 GMT
accept-ranges: bytes
cache-control: no-cache, no-store, must-revalidate
etag: "93063574"
last-modified: Mon, 04 May 2026 05:42:45 GMT
content-length: 3704
strict-transport-security: max-age=10886400; includeSubDomains; preload
referrer-policy: same-origin
x-content-type-options: nosniff
x-xss-protection: 1; mode=block
x-dns-prefetch-control: off

Adding Azure Bicep Language Support for highlight.js

2025-05-18T12:36:49Z

I am using highlight.js to render code snippets on this blog system. However, the official pack of highlight.js does not have Bicep as one of the languages. To add support for the Bicep language in highlight.js, you need to implement a Bicep language definition module. Below are the detailed steps and code examples.

Bicep Language Features

Bicep is a declarative, Azure-oriented Infrastructure-as-Code language. Its main features include:

Keywords: resource, module, param, var, output, targetScope, for, in, if, existing, import
Types: string, int, bool, object, array, any
Comments: // single-line comment, /* ... */ multi-line comment
Strings: single quotes '...' and double quotes "..."

highlight.js Language Definition

The language definitions for highlight.js are usually as follows:

export default function(hljs) {
  return {
    name: 'Bicep',
    keywords: { ... },
    contains: [ ... ]
  };
}

You can refer to this example of the cmake language definition here: https://github.com/highlightjs/highlight.js/blob/main/src/languages/cmake.js

Let's create a file with name highlight.bicep.js

export default function (hljs) {
    return {
        name: 'Bicep',
        keywords: {
            keyword:
                'resource module param var output targetScope for in if existing import',
            type:
                'string int bool object array any',
            literal:
                'true false null'
        },
        contains: [
            hljs.COMMENT('//', '$'),
            hljs.COMMENT('/\\*', '\\*/'),
            {
                className: 'string',
                variants: [
                    hljs.QUOTE_STRING_MODE,
                    hljs.APOS_STRING_MODE
                ]
            },
            {
                className: 'number',
                begin: '\\b\\d+(\\.\\d+)?\\b'
            }
        ]
    };
}

Register Bicep Language and Example Usage

To register Bicep language, call hljs.registerLanguage('bicep', bicep) before rendering your code.

import bicep from './highlight.bicep.js';

hljs.registerLanguage('bicep', bicep);
hljs.highlightAll();

You can refer to the official document here: https://highlightjs.readthedocs.io/en/latest/api.html#registerlanguage

In my case, my blog use a slightly complicated way to render code in my blog post.

import bicep from '../3rd/highlight.bicep.js'

export function renderCodeHighlighter() {
    const pres = document.querySelectorAll('pre');
    pres.forEach(pre => {
        // Find <pre> that doesn't have a <code> inside it.
        if (!pre.querySelector('code')) {
            const code = document.createElement('code');
            while (pre.firstChild) {
                code.appendChild(pre.firstChild);
            }
            pre.appendChild(code);
        }

        // For code that can't be automatically detected, fall back to use XML
        if (pre.classList.contains('language-markup')) {
            pre.querySelector('code').classList.add('lang-xml');
        }
    });

    hljs.registerLanguage('bicep', bicep);

    const codeBlocks = document.querySelectorAll('pre code');
    codeBlocks.forEach(block => {
        hljs.highlightElement(block);
    });
}

That's all. Now we can test the example code:

<pre><code class="bicep">
param location string = resourceGroup().location
resource storage 'Microsoft.Storage/storageAccounts@2022-09-01' = {
  name: 'mystorage'
  location: location
}
</code></pre>

If everything goes well, you will see this result:

param location string = resourceGroup().location
resource storage 'Microsoft.Storage/storageAccounts@2022-09-01' = {
  name: 'mystorage'
  location: location
}

Add X-Content-Type-Options Header to Resources in Azure Storage Account

2024-05-11T01:14:12Z

Problem

By default, resources served from an Azure Storage Account do not include the X-Content-Type-Options header in their responses. This omission can pose a security risk. According to webhint:

"Sometimes the metadata browsers need to know how to interpret the content of a resource is either incorrect, not reliable, or absent. In those cases, browsers use contextual clues that inspect the bytes of the response to detect the file format. This is known as MIME sniffing and it is done regardless of the specified Content-Type HTTP header sent by servers."

Solution

To address this issue, you need to integrate a Content Delivery Network (CDN) with your storage account. Follow the steps outlined in this official Azure documentation to set up a CDN.

Once the CDN is in place, go to "Rules engine" section of the CDN, under Global rule, add an action to "Modify Response Header".

With values:

Action: Append
HTTP header name: X-Content-Type-Options
HTTP header value: nosniff

After saving the rule, allow a few moments for the changes to take effect. In some cases, you might also need to purge the CDN endpoint to ensure that the new settings are applied immediately.

With these changes, all outgoing requests from your Azure Storage Account via the CDN will include the X-Content-Type-Options: nosniff header in the response, enhancing the security of your served resources.

Call API with Windows Authentication from Blazor Web Assembly

2023-10-20T07:17:07Z

Problem

I was rewriting an old Angular application to Blazor Web Assembly a couple of days ago. The App is an internal tool, which uses a backend API that has Windows Authentication. In Angular, we used to add withCredentials: true to HTTP interceptor to make it work. The most equivalent method in .NET is typically adding UseDefaultCredentials = true in HttpClient. However, Blazor WASM will gives you an exception for this as indicated in this StackOverflow thread: WASM: System.PlatformNotSupportedException: System.Net.Http.HttpClientHandler is not supported on the current platform.

The majority of internet search result so far tell you it's not possible to call Windows Authentication API from Blazor. Really? Let's see how to make it work with a few lines of code.

Solution

Approach A

The original StackOverflow thread has 2 answers currently. The answer by ca8msm works, but the cost is not to use HttpClient, that we need to do everything manually in order to add BrowserRequestCredentials.Include to the request header. This approach sacrifices what we love about the HttpClient, but gives you ultimate control over the http request details.

string APIURL = "https://localhost:44390/api/models";

// create request object and pass windows authentication credentials
var request = new HttpRequestMessage(HttpMethod.Get, APIURL);
request.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);

// send the request and convert the results to a list
var httpResponse = await Http.SendAsync(request);
models = await httpResponse.Content.ReadFromJsonAsync<myModel[]>();

Approach B

I come up with a better approach, which can keep the HttpClient we already like.

First, add a custom DelegatingHandler, this is used for adding BrowserRequestCredentials.Include to each request.

using Microsoft.AspNetCore.Components.WebAssembly.Http;

public class CredentialsMessageHandler : DelegatingHandler
{
    protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
    {
        request.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);
        return base.SendAsync(request, cancellationToken);
    }
}

Second, create your typed client as usual. I prefer typed client, you may also use HttpClientFactory, it doesn't matter. You can find more information about how to make http request in best practice in this document.

public class CardClient
{
    private readonly HttpClient http;

    public CardClient(HttpClient http)
    {
        // ...
        this.http = http;
    }

    // ...
}

Finally, register the client in DI, with the CredentialsMessageHandler we wrote in the first step.

builder.Services.AddHttpClient<CardClient>(client => client.BaseAddress = new Uri(ApiEndpoint.FullUrl)).AddHttpMessageHandler<CredentialsMessageHandler>();

Now, you can still use the HttpClient the way you always been using it with Windows Authentication enabled API!

BTW, Why I am not answering this in StackOverflow? Because I lost access to my account years ago :(

Solving "npm install" ECONNRESET Error on Azure DevOps

2023-08-16T13:34:49Z

Problem

A few months ago, my Angular project on Azure DevOps started to have build failure very often. Error message is "npm ERR! network read ECONNRESET", which indicates npm can't connect to internet. This problem does not happen every time, usually re-run failed jobs several times can produce a good build. But still, this is very annoying. So, I took some time to investigate and solve it.

Root Cause

First, I thought it was a IP rate limit by npm that reject Azure pipeline's agent. So I set up a VM on Azure as a self-host build agent. However, the problem continues.

Then, I setup the same build agent on my laptop, which is outside of Azure environment, the build succeed every time. It seems to be npm rejecting the entire Azure IP address. But I can open https://registry.npmjs.org/ without any problem on my Azure VM, how come the IP limit?

Finally, I added verbose log to the npm install task in my pipeline yaml file like this:

jobs:
- job: Angular
  pool:
    vmImage: 'ubuntu-latest'
  steps:

  - task: Npm@1
    displayName: 'npm install'
    inputs:
      workingDir: '$(System.DefaultWorkingDirectory)/src'
      command: 'install'
      verbose: true

Run the build again, check it's output

The log indicates that some packages are being fetched from Tencent registry instead of the official registry.npmjs.org

Azure has problems communicating with Tencent server, this is why the build will fail very often.

The reason why these packages are going to use Tencent server is because the URLs are written in package-lock.json file. This file is automatically modified when developers run npm install on their machines. A typical developer in China would have setup thier npm to use Tencent or Taobao source, due to the national firewall usually block official npm registry.

npm config set registry https://mirrors.cloud.tencent.com/npm/

And when the developer submit the code, package-lock.json will have this URL inside it.

Fix

First, let all developers in the team use official npm registry.

npm config set registry https://registry.npmjs.org/

Then, delete node_modules folder and package-lock.json under the project directory

Then, run npm install on the dev machine again.

Now, all packages will be updated to use the official npm registry.

Now, submit the code, Azure DevOps now runs npm install without network error!

How to Activate Kendo UI License in Azure Static Web Apps Without Exposing Secret Value

2023-01-08T09:59:23Z

Problem

I have an open-source project that uses Kendo UI for Angular. I have my own license to use legally, and I wish end users to bring their own licenses. So, I could not include the license file in my public repository. This typically is not a problem because CI/CD can read license values from repository secret. Kendo UI document also have example of setting up license in GitHub Actions.

However, I am using Azure Static Web Apps. There is no example of how to activate Kendo license during SWA build process. I worked 996 for 1 hour and finally figured out how to activate Kendo UI license during the build process of Azure Static Web Apps without including the license itself in repository. Let's see how to do it.

Solution

Create Repository Secret

In your GitHub repository. Go to Settings, Secrets, Actions, and set the name of the secret to KENDO_UI_LICENSE and paste the contents of the license file as a value.

Modify SWA YAML file

Open your SWA YAML file, it is located at .\.github\workflows with different names. For me, it's "azure-static-web-apps-nice-ocean-0afdf4600.yml"

Find "Build And Deploy" step, it is typically using "Azure/static-web-apps-deploy@v1".

Our goal is to run "npx kendo-ui-license activate" before "ng build" or "npm run build". Azure document has a description for how to use custom build commands, but it's example only runs one command, it didn't tell you how to run multiple commands. To run commands in sequence, use &&.

So, we will add a new parameter under "with: " statement.

app_build_command: "npx kendo-ui-license activate && npm run build"

Add environment variable for referencing Kendo UI license we setup in the first step.

env:
  KENDO_UI_LICENSE: ${{ secrets.KENDO_UI_LICENSE }}

The whole section now looks like this

- name: Build And Deploy
  id: builddeploy
  uses: Azure/static-web-apps-deploy@v1
  with:
    azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_OCEAN_0AFDF4600 }}
    repo_token: ${{ secrets.GITHUB_TOKEN }}
    action: "upload"
    app_location: "/src/Admin/elf-admin" 
    api_location: ""
    output_location: "dist/elf-admin"
    app_build_command: "npx kendo-ui-license activate && npm run build"
  env:
    KENDO_UI_LICENSE: ${{ secrets.KENDO_UI_LICENSE }}

Run build

Now, run your build again, Kendo UI license will be successfully activated.

Deploy to Azure Static Web App from Local Machine without GitHub Action

2022-11-17T08:29:50Z

Problem

When creating Azure Static Web App in Azure portal. The deployment options did not provide clear instructions for how to deploy without creating a project and CI/CD pipeline on GitHub or Azure DevOps. Many times, we just want to deploy a simple one-time project from local computer. Let's see how to do this.

Solution

Install SWA CLI Tool

We need to use Microsoft official tool "Static Web Apps CLI" to deploy from local machine. First, install it from npm.

npm install -g @azure/static-web-apps-cli

Build Your App

This step is only required when you are using a front-end framework that requires build, such as Angular.

In my case, I am using Angular. I run "ng build" and generate the website content files in ./dist/test996. This is the folder to deploy to Azure Static Web App.

Now, inside `dist` folder. Open a terminal and run:

swa deploy ./test996 --env production

SWA CLI will let you login to Azure, then choose or create the target instance of Azure Static Web App, then zip the website folder and upload to Azure.

After it is done, we can browse the website in a second.

Bug or feature?

There seems to be a bug that you cannot deploy the current directory to Azure Static Web App. It won't throw errors, but your website will have empty content deployed. So, we must specify a directory for now.

For example, you have your index.html and other stuff inside `C:\your-project`.

DO NOT use this

C:\your-project\> swa deploy

Move your files to "build" folder and use this

C:\your-project\> swa deploy ./build

2024/12 Update

The latest SWA CLI seems to having difficulties finding existing Static Web App instances in Azure. If you meet this problem, you need to workaround it by:

Run swa --config . under project root directory and create a config file. Make sure your appName and the node name under configurations section are the same as your existing app's name in Azure, like this (testapp1 is my existing Azure Static Web App name):

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "testapp1": {
      "appLocation": ".",
      "outputLocation": "build",
      "appBuildCommand": "npm run build",
      "run": "npm start",
      "appDevserverUrl": "http://localhost:3000",
      "appName": "testapp1",
      "resourceGroup": "test-rg"
    }
  }
}

swa login --subscription-id ******* --resource-group test-rg --app-name testapp1

Then, under the project root directory (where swa-cli.config.json file exists) run:

swa deploy --env production

DO NOT cd to your ./build or ./dist folder, because the outputLocation in the swa-cli.config.json is already telling SWA CLI where your files are. If you cd to ./build or ./dist folder, then SWA CLI won't find your existing app!

Make NPM Install with Legacy Peer Deps in Azure Static Web Apps Builds

2022-11-16T06:20:29Z

Problem

After upgrading a JS library, GitHub Action for build and deploy Azure Static Web Apps blows up sky high. According to the error message. npm install command need to run with --legacy-peer-deps. However, there is no step of npm install in Azure Static Web Apps's yml file. How can we tell npm to use legacy peer deps?

Solution

Although there is no way to change the npm step details for Oryx build engine, there is an environment variable to control npm install behaviour.

Set NPM_CONFIG_LEGACY_PEER_DEPS to true has the same effect with npm install --legacy-peer-deps

To set environment variables in yml, we can use env: keyword. In this case, it will be

env:
  NPM_CONFIG_LEGACY_PEER_DEPS: true

The full build and deploy job will now look like this

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_OCEAN_0AFDF4600 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/src/Admin/elf-admin" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "dist/elf-admin" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env:
          NPM_CONFIG_LEGACY_PEER_DEPS: true

Now, we can have a happy build!

Reference: https://github.com/Azure/static-web-apps/issues/989

How to Add Parameters for 'npm install' in Azure DevOps

2022-07-07T05:25:31Z

Recently my Azure DevOps build pipeline failed because Azure is using npm 8.x, which will have issue for angular projects when running `npm install`. This is a known issue which can be solved by using `--legacy-peer-deps` or `--force` for the `npm install` command. However, Azure DevOps's npm task does not take parameters by default. Let's see how we can use these parameters in Azure DevOps.

Old YAML file

  - task: Npm@1
    displayName: 'npm install'
    inputs:
      workingDir: '$(System.DefaultWorkingDirectory)/src/Web/work996'
      command: 'install'

It produces error:

Custom Command

To solve this issue. We need to use custom command for the npm task.

  - task: Npm@1
    displayName: 'npm install with legacy-peer-deps'
    inputs:
      workingDir: '$(System.DefaultWorkingDirectory)/src/Web/work996'
      command: 'custom'
      customCommand: 'install --legacy-peer-deps'

Now the build will work fine.

How to Specify Node.js Version When Building Azure Static Web App

2022-01-27T04:15:05Z

Problem

Azure Static Web App creates a GitHub Action that uses Oryx to build your web app. I have a React App that uses node.js to build. However, the default version of node Oryx is using is currently 14.x. I would like to use version 16.x for building my App.

In the build log of GitHub Action, you can see node version 14.x is being used.

Solution

Unlike what you usually do with YAML build definitions. There's no parameter for node versions in Azure/static-web-apps-deploy@v1 action currently.

We must edit our project's package.json to specify a node version. Add the following code into your package.json file.

"engines": {
    "node": ">=16.0.0"
}

Now, the build will use Node.js 16.x.

RMB capitalization converter in Blazor WASM

2021-03-01T06:19:39Z

.NET 5 正式发布已经有一段时间了，其中 Blazor 技术是该版本的亮点之一。作为微软技术的被坑者，年少的我曾经以为 SilverLight 能血虐 Flash，Zune 能团灭 iPod，WP 能吊打 iPhone，UWP 能统一全平台…… 可是后…… 最终步入大龄程序员的我发现，只有陪伴了我将近 20 年的 ASP.NET 还没有完蛋。于是我这两天花了点时间，尝试将我的一个 UWP 小工具用 Blazor 重写，分享给大家。

无法抢救的 UWP

“人民币大写转换器” 是我年少无知时开发的小工具之一，它的主要功能有：

- 将数字金额转化为大写中文

- 复制结果

- 使用中文语音朗读结果

- 显示参照表

可惜 UWP 不论是充满 Bug 的 SDK，Runtime，还是微软的龟速更新与混乱的规划，都已经无可救药了，是时候给应用找个新家了。

Blazor

Blazor 是 .NET Core 时代微软推出的用于 Web 应用开发的新框架，它可以运行在服务器端，也可使用 WASM 运行在客户端，即浏览器中。

对我来说，这个技术最吸引人的，就是 WASM。像我这种已经30多岁，学不了新东西的 .NET 程序员，根本搞不定 Angular、Vue、React 这些花里胡哨的框架，而 Blazor WASM 是把 .NET 运行时搬到了浏览器端，和 SilverLight 类似，但这次是以WASM标准的形式运行，不需要安装插件，并且也能跨平台。

于是我可以继续使用熟悉的 .NET 和 C# 开发 SPA Web 应用。更重要的是，既然是原汁原味的 .NET，就可以很方便的重用以前的代码，以及现成的成千上万个 NuGet 包，而不用像一个新发明的框架那样从0开始积累生态。

我 996 了 2 小时，成功将“人民币大写转换器”重写到 Blazor WASM，效果如下：

Demo | 源代码

由于篇幅关系，本文不叙述重写的每处细节，只参数关键点。其他细节大家可到 GitHub 阅读源代码了解。

创建 Blazor WASM 工程

我们可以使用 Visual Studio 2019 创建 Blazor WASM 工程。

选择 Blazor WebAssembly App 就可以了

工程结构

一个 Blazor WASM 项目的典型结构如上图。Program.cs 包含应用如何启动与承载的逻辑。

wwwroot 中的文件为纯 HTML/CSS/JS 文件，不包含.NET的逻辑。其中 index.html 为承载应用的默认页面，和 Angular 等 SPA 框架非常类似，它将会把应用页面加载到 <div id="app"> 中。

MainLayout.razor 是整个应用的布局页面，如果你有多个页面和视图，那么通常这里会放 Header，Footer 等内容。

Index.razor 为应用的默认主页。我这个应用只有一个页面，所以一切逻辑都在这里实现就可以了。

可重用的代码

人民币大写的转换类与框架和平台无关，因此完全可以直接复制到Blazor工程里用，即 RMBConverter.cs。

UWP 应用的视图通常采用 MVVM 模式开发，这些逻辑可以很方便的迁移到 Blazor。

Index.razor

就像写 MVC 的 cshtml 一样，使用熟悉的 Razor 语法，就能绑定数据和事件。

对于 input，简单的双向数据绑定可以直接用 @bind="属性" 实现。但我这个应用里要求用户一边输入金额一边进行实时计算，所以只能写成事件绑定。

<div>
    <h3> @Result </h3>
</div>
<div>
    <div>
        <input type="text" @bind-value="InputAmount" @bind-value:event="oninput" />
    </div>
    <div>
        <button @onclick="CopyResult">复制</button>
        <button @onclick="ReadAloud">朗读</button>
        <button @onclick="Clear">清除</button>
    </div>
</div>

对于有参数的事件处理函数，要注意它和正常 C# 写事件一样，是个 Lambda 表达式，如果放在循环里的话要注意变量的值是在循环里被修改。

下面的代码必须使用 var num = i 来存储 i 的值，如果直接使用 KeyPadClicked(i)，那么 i 一定永远等于1。

<div class="row">
    @for (int i = 1; i <= 9; i++)
    {
        var num = i;
        <div class="col-4">
           <button class="btn btn-light key" @onclick="() => KeyPadClicked(num.ToString())">@i</button>
        </div>
    }
</div>
<div class="row">
    <div class="col-8">
        <button class="btn btn-light key" @onclick='() => KeyPadClicked("0")'>0</button>
    </div>
    <div class="col">
        <button class="btn btn-light key" @onclick='() => KeyPadClicked(".")'>.</button>
    </div>
</div>

和 XAML 的 MVVM 以及 Angular 稍有不同的是，处理逻辑不是在 code behind 文件里写的，而是可以在 razor 页面本身写。你也可以自己新建 Index.razor.cs 作为部分类来达到HTML与C#相分离的目的。

@code {
    private string _inputAmount;
    public string InputAmount
    {
        get => _inputAmount;
        set
        {
            _inputAmount = value;

            // 验证和处理逻辑...
            Result = string.IsNullOrWhiteSpace(_inputAmount) ?
                    string.Empty :
                    RMBConverter.GetCapitalizedRmb(InputAmount);
        }
    }

    public string Result { get; set; }

    private async Task CopyResult()
    {
        // ...
    }

    private async Task ReadAloud()
    {
        // ...
    }

    private void Clear()
    {
        InputAmount = string.Empty;
    }

    private void KeyPadClicked(string value)
    {
        InputAmount += value switch
        {
            "0" when InputAmount != "0" => 0,
            "." when !InputAmount.Contains(".") => ".",
            _ => value
        };
    }
}

需要重新实现的功能

在 UWP 中，复制可以调用 Windows 的 Clipboard API 来完成。但是在浏览器端，没有 Windows 的 API，Blazor 也没有封装剪切板 API，因此我们只能借用 JS 来完成。

index.html

window.clipboardCopy = {
    copyText: function (text) {
        navigator.clipboard.writeText(text).then(function () {
            console.log(text);
        })
            .catch(function (error) {
                alert(error);
            });
    }
};

Index.razor

使用依赖注入，引入 IJSRuntime 的实例。这是 Blazor 用于和 JavaScript 交互的接口。

@inject IJSRuntime JavaScriptRuntime

然后就可以调用 JS 进行复制

private async Task CopyResult()
{
    if (!string.IsNullOrWhiteSpace(Result))
    {
        await JavaScriptRuntime.InvokeVoidAsync("clipboardCopy.copyText", Result);
    }
}

类似的，在 UWP 里，朗读使用的是 Windows 的 SpeechSynthesizer API。浏览器端也有个类似的 SpeechSynthesisUtterance。

index.html

window.readAloud = {
    readText: function (text) {
        let utterance = new SpeechSynthesisUtterance(text);
        utterance.lang = 'zh-CN';
        speechSynthesis.speak(utterance);
    }
}

Index.razor

private async Task ReadAloud()
{
    if (!string.IsNullOrWhiteSpace(Result))
    {
        await JavaScriptRuntime.InvokeVoidAsync("readAloud.readText", Result);
    }
}

本地应用

目前 Blazor WASM 还没有本地应用的官方支持，必须打开浏览器才能使用，现有的版本只能使用PWA完成一部分本地应用化操作。但在今年即将发布的 .NET 6 版本中，Blazor 会迎来官方最纯正的本地应用支持。只要不出自 SilverLight、Zune、WP、WinRT、UWP 团队之手，就不会被坑！

现存的问题

Blazor WASM 虽然看着香，但目前有一些痛点还有待解决。

首先，框架本身的体积依然较大，由于众所周知而不可描述的原因，如果服务器部署在海外，那么我国网络加载 Blazor 应用会比较慢。

另外，不是所有版本的浏览器都可以跑 WASM，尤其是手机端。Blazor 的兼容性相比 Angular，Vue，React 等，还有些差距。

总结

使用 Blazor WASM 开发 Web 应用能够让 .NET 程序员充分利用既有的知识和技能快速上手，结合 Web 的强大生态与 .NET 的高效生产力，成就不凡。而 UWP 只能哭晕在厕所也没人听见……

JQuery搞定SyntaxHighlighter v3.x长代码自动换行

2012-09-12T06:12:30Z

长代码换行是SyntaxHighlighter3.0版本之前的功能，但3.0之后就木了，本人认为主要猿因是gutter（代码行号指示器）的换行难做。因为3.x版是将代码行号和代码部分分开生成HTML的，猿来的老版本是在一起的。这样做是便于直接复制代码，而不会复制到行号上去。

很多人都在想办法让它实现换行，但都卡在代码行号的问题上。我关注这个问题已经差不多一年了，今天终于有了个比较漂亮的解决办法。

首先，强制给代码部分换行的CSS还是要写的：

body .syntaxhighlighter .line
{
    white-space: pre-wrap !important;
}

这段CSS换行的前提是，pre标签的外边一定要有一个固定宽度的容器对象。比如一个600px宽度的div就可以。

然后，我们需要一段JQuery，用来计算被换行的代码显示在页面上的高度，然后赋值给它的行标。这段代码是国外一个论坛上找的，但我测试的时候发现它有点小问题，我的环境是JQuery1.7+Firefox15，我顺便做了一个修正，全部代码如下：

$(function () {
    // Line wrap back
    var shLineWrap = function () {
        $('.syntaxhighlighter').each(function () {
            // Fetch
            var $sh = $(this),
                $gutter = $sh.find('td.gutter'),
                $code = $sh.find('td.code')
                ;
            // Cycle through lines
            $gutter.children('.line').each(function (i) {
                // Fetch
                var $gutterLine = $(this),
                    $codeLine = $code.find('.line:nth-child(' + (i + 1) + ')')
                    ;
                //alert($gutterLine);
                // Fetch height
                var height = $codeLine.height() || 0;
                if (!height) {
                    height = 'auto';
                }
                else {
                    height = height += 'px';
                    //alert(height);
                }
                // Copy height over
                $gutterLine.attr('style', 'height: ' + height + ' !important'); // fix by Edi, for JQuery 1.7+ under Firefox 15.0
                console.debug($gutterLine.height(), height, $gutterLine.text(), $codeLine);
            });
        });
    };

    // Line wrap back when syntax highlighter has done it's stuff
    var shLineWrapWhenReady = function () {
        if ($('.syntaxhighlighter').length === 0) {
            setTimeout(shLineWrapWhenReady, 10);
        }
        else {
            shLineWrap();
        }
    };

    // Fire
    shLineWrapWhenReady();
});

现在，行号的高度就能和代码的高度保持一致了。

JQuery文本框自动完成，通过AJAX调用ASP.NET WebService

2012-05-23T01:41:32Z

最近在搞博客搜索框的自动完成功能，用的是JQuery UI里的autocomplete插件。插件的数据源是用AJAX调用一个WebService，网站后台有个标签库，WebService返回的是符合条件的标签。最终效果如下：

我们先来看WebService的代码，方法很简单：

[WebMethod]
public List<EdiBlog.Core.DataModel.TagCloud> GetAllTagsForAutoComplete(string tagName)
{
    return optTag.GetModelList().Where(p => p.Name.ToLower().StartsWith(tagName.ToLower())).ToList();
}

这个方法的作用是根据输入的内容，检索所有以tagName开头的标签。我没有返回全部标签，是因为autocomplete插件的默认行为不符合我的需求。在默认情况下，如果我输入“as”，则"ascx"和"javascript"都会被显示。所以我做的这个WebService进行了一定的处理，只返回StartsWith关键词的标签。

这个TagCloud类型很简单，仅仅只有2个属性。一个是Name，表示名称，另一个是Count，表示出现次数。这里我们只需要Name。

public class TagCloud
{
    public string Name { get; set; }
    public int Count { get; set; }
}

另外，别忘了把“[System.Web.Script.Services.ScriptService] ”取消注释。不然脚本调用不了WebService。

我们再来看看脚本和HTML部分。

需要引用的除了JQuery库，还要JQuery UI库，我用的版本是“jquery-ui-1.8.16.custom.min.js”。

HTML代码（ASPX）：

<asp:TextBox ID="txtSearch" CssClass="searchtext" MaxLength="30" runat="server" ToolTip="Search"></asp:TextBox>

它最后表现在网页上，是一个input type="text"的搜索框。

JQuery代码：

$(function () {
    $(".searchtext").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/API/BlogService.asmx/GetAllTagsForAutoComplete",
                data: "{ 'tagName': '" + request.term + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function (data) {
                    return data;
                },
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            value: item.Name
                        }
                    }))
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus + ": " + errorThrown);
                }
            })
        },
        minLength: 1
    });
});

这段代码里，

data: "{ 'tagName': '" + request.term + "'}"

是给GetAllTagsForAutoComplete方法传参数，参数是用户输入的内容。

minLength: 1

表示至少输入一个字符时，开始自动完成。

value: item.Name

是访问Name属性，这个Name就是TagCloud类型里的Name，因为被解析成了JSON，我们可以直接用"."来访问，不用["Name"]去访问了。

如果你没有引用JQuery UI的CSS库，可以自己做一些样式，比如本人博客的：

ul.ui-autocomplete
{
    border: 1px solid #DDD;
    background-color: #FFF;
    width: 280px;
}

ul.ui-autocomplete li a
{
    padding: 5px;
    display: block;
}

.ui-state-hover
{
    background-color: #D8DFEA;
}