Bagaimana untuk membuat aplikasi Blazor WebAssembly dengan C#?

Running dotnet new blazorwasm scaffolds a client-side Blazor WebAssembly app with default routing and runtime; use --hosted for an API backend, ensure correct NuGet references and target framework, and deploy via static hosting.

Use dotnet new blazorwasm to scaffold the app

You get a working Blazor WebAssembly app immediately with this single command. It sets up the project structure, client-side runtime, and default routing — no manual config needed for basic use.

Run it like this:

dotnet new blazorwasm -n MyBlazorApp
cd MyBlazorApp
dotnet run

The generated app runs on https://localhost:5001 (HTTPS) and http://localhost:5000 (HTTP). If you see certificate errors in browser, trust the dev cert with dotnet dev-certs https --trust.

Understand the difference between blazorwasm and blazorwasm-hosted

The default blazorwasm template produces a purely client-side app: all C# code compiles to WebAssembly and runs in the browser. No server dependency beyond static file hosting.

If you need a backend API (e.g., for database access or auth), use the hosted variant:

dotnet new blazorwasm --hosted -n MyHostedApp

• Creates three projects: Client, Server, and Shared
• Server is an ASP.NET Core API project that serves the client and hosts controllers
• Client still runs as WebAssembly but calls Server via HTTP (e.g., HttpClient.GetAsync("weatherforecast"))
• Don’t confuse this with Blazor Server — there’s no SignalR connection or server-side rendering here

Reference NuGet packages correctly in .csproj

Your Client project must reference Microsoft.AspNetCore.Components.Web and Microsoft.AspNetCore.Components.WebAssembly. The SDK-style project file does this automatically — but if you add custom targets or migrate manually, missing or outdated versions break compilation.

Check these lines exist in your MyBlazorApp.Client.csproj:

<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />

Also ensure <TargetFramework>net8.0</TargetFramework> matches your SDK version. Mismatched TFMs cause cryptic errors like The type or namespace name 'WebAssembly' does not exist.

Deploying requires static hosting — no .NET runtime on server

After dotnet publish -c Release, output goes to bin/Release/net8.0/publish/wwwroot. That folder contains HTML, JS, DLLs, and dotnet.wasm — everything needed to run.

You can serve it with any static host (NGINX, GitHub Pages, Azure Static Web Apps), but remember:

• No server-side C# execution — all logic lives in the browser
• Initial load time depends on total DLL size; trim unused assemblies with <PublishTrimmed>true</PublishTrimmed>
• Browser security restrictions apply: no direct file system access, limited threading, no System.Drawing support
• CORS matters only when calling external APIs — same-origin requests to your own /api/* endpoints work fine if the backend is co-hosted or properly configured

The biggest gotcha isn’t setup — it’s assuming WebAssembly behaves like .NET on Windows. It doesn’t. Things like reflection, dynamic code generation, or synchronous I/O are either restricted or behave differently.

Atas ialah kandungan terperinci Bagaimana untuk membuat aplikasi Blazor WebAssembly dengan C#?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!