Eszközkészlet ASP.NET Core Blazor

• Telepítse a Visual Studio legújabb verzióját a ASP.NET és webfejlesztési számítási feladattal.

• Hozzon létre egy új projektet az elérhető Blazor sablonok egyikével:

  • Blazor Web App: Létrehoz egy Blazor webalkalmazást, amely támogatja az interaktív kiszolgálóoldali renderelést (interaktív SSR) és az ügyféloldali renderelést (CSR). A Blazor Web App-sablon ajánlott a Blazor használatának megkezdéséhez, hogy megismerkedjen a kiszolgálóoldali és ügyféloldali Blazor funkciókkal.
  • Blazor WebAssembly önálló alkalmazás: Létrehoz egy különálló ügyfél-webalkalmazást, amely statikus helyként telepíthető.

Válassza Következőlehetőséget.

• Telepítse a Visual Studio legújabb verzióját a ASP.NET és webfejlesztési számítási feladattal.

• Új projekt létrehozása:

  • A Blazor Server élmény érdekében válassza az Blazor Server Alkalmazás sablont, amely tartalmazza a bemutatókódot és a Bootstrap-t, vagy válassza az Blazor Server Alkalmazás üres sablont, amely nem tartalmaz bemutatókódot és Bootstrapet. Válassza Következőlehetőséget.
  • Az önálló Blazor WebAssembly felhasználói élmény érdekében válassza az Blazor WebAssembly alkalmazás sablont, amely tartalmazza a bemutatókódot és a Bootstrap-t, vagy a bemutatókód és a Bootstrap nélküli Blazor WebAssembly Alkalmazás üres sablont. Válassza Következőlehetőséget.

• Telepítse a Visual Studio legújabb verzióját a ASP.NET és webfejlesztési számítási feladattal.

• Új projekt létrehozása:

  • A Blazor Server élmény érdekében válassza a Blazor Server App sablont. Válassza Következő.
  • A Blazor WebAssembly élmény érdekében válassza az Blazor WebAssembly alkalmazás sablonját. Válassza Következő.

• üzemeltetettBlazor WebAssembly-alkalmazások esetében jelölje be az ASP.NET Core üzemeltetésű jelölőnégyzetet a További információk párbeszédpanelen.

üzemeltetett Blazor WebAssembly indítási és feladatkonfigurációs

Üzemeltetett Blazor WebAssemblymegoldások esetén, adja hozzá (vagy helyezze át) a .vscode mappát launch.json és tasks.json fájlokkal a megoldás szülőmappájába, amely a tipikus projektmappákat tartalmazza: Client, Serverés Shared. Frissítse vagy erősítse meg, hogy a launch.json és tasks.json fájlok konfigurációja futtat egy üzemeltetett Blazor WebAssembly alkalmazást a Server projektből.

Vizsgálja meg a Properties/launchSettings.json fájlt, és határozza meg az alkalmazás URL-címét a applicationUrl tulajdonságból. A keretrendszer verziójától függően az URL-protokoll biztonságos (HTTPS) https://localhost:{PORT} vagy nem biztonságos (HTTP) http://localhost:{PORT}, ahol a {PORT} helyőrző egy hozzárendelt port. Jegyezze fel a launch.json fájlban használható URL-címet.

A .vscode/launch.json fájl indítási konfigurációjában:

• Állítsa az aktuális munkakönyvtárat (cwd) a Server projekt mappára.
• Adja meg az alkalmazás URL-címét a url tulajdonsággal. Használja a Properties/launchSettings.json fájlból korábban rögzített értéket.

"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
"url": "{URL}"

Az előző konfigurációban:

• A {SERVER APP FOLDER} helyőrző a Server projekt mappája, általában Server.
• A {URL} helyőrző az alkalmazás URL-címe, amely az alkalmazás Properties/launchSettings.json fájljában van megadva a applicationUrl tulajdonságban.

Ha a Microsoft Edge-hez a Google Chrome-ot részesíti előnyben, frissítsen vagy adjon hozzá egy további "browser": "chrome" tulajdonságot a konfigurációhoz.

A következő példa .vscode/launch.json fájlra:

• Az aktuális munkakönyvtárat a Server mappára állítja.
• Beállítja az alkalmazás URL-címét http://localhost:7268.
• Módosítja az alapértelmezett böngészőt a Microsoft Edge-ről a Google Chrome-ra.

"cwd": "${workspaceFolder}/Server",
"url": "http://localhost:7268",
"browser": "chrome"

A teljes .vscode/launch.json fájl:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "blazorwasm",
      "name": "Launch and Debug Blazor WebAssembly Application",
      "request": "launch",
      "cwd": "${workspaceFolder}/Server",
      "url": "http://localhost:7268",
      "browser": "chrome"
    }
  ]
}

A .vscode/tasks.jsonadjon hozzá egy build argumentumot, amely meghatározza a Server alkalmazás projektfájljának elérési útját:

"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",

Az előző argumentumban:

• A {SERVER APP FOLDER} helyőrző a Server projekt mappája, általában Server.
• A {PROJECT NAME} helyőrző az alkalmazás neve, amely általában a megoldás neve alapján jön létre, majd .Server következik egy Blazor WebAssembly projektsablonból generált alkalmazásban.

Példa egy .vscode/tasks.json fájlra a megoldás Server mappájában lévő BlazorHosted nevű Server projektben:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
        "args": [
          "build",
          "${workspaceFolder}/Server/BlazorHosted.Server.csproj",
          "/property:GenerateFullPaths=true",
          "/consoleloggerparameters:NoSummary",
        ],
        "group": "build",
        "presentation": {
          "reveal": "silent"
        },
        "problemMatcher": "$msCompile"
    }
  ]
}

.vscode/launch.json (launch konfiguráció):

...
"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
...

Az aktuális munkakönyvtár (cwd) előző konfigurációjában a {SERVER APP FOLDER} helyőrző a Server projekt mappája, általában "Server".

Ha a Microsoft Edge-t használja, és a Google Chrome nincs telepítve a rendszeren, adjon hozzá egy további "browser": "edge" tulajdonságot a konfigurációhoz.

Példa egy Server projektmappára, amely a Microsoft Edge-et a hibakereséshez használt böngészőként futtatja az alapértelmezett Google Chrome böngésző helyett:

...
"cwd": "${workspaceFolder}/Server",
"browser": "edge"
...

.vscode/tasks.json (dotnet parancs argumentumok):

...
"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",
...

Az előző argumentumban:

• A {SERVER APP FOLDER} helyőrző a Server projekt mappája, általában "Server".
• A {PROJECT NAME} helyőrző az alkalmazás neve, amely általában a megoldás nevéből és a „.Server”-ből áll, a Blazor projektsablonalapján létrehozott alkalmazásban.

Az alábbi példa az oktatóanyagból, amely Blazor WebAssembly alkalmazással való SignalR használatát ismerteti, a Server projektmappájának nevét és a BlazorWebAssemblySignalRApp.Serverprojektnevét használja:

...
"args": [
  "build",
    "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
    ...
],
...

Új projekt létrehozása:

• Váltson a könyvtárra a cd paranccsal arra a helyre, ahol létre szeretné hozni a projektmappát (például cd c:/users/Bernie_Kopell/Documents).

• Az alapértelmezett interaktív kiszolgálóoldali renderelés (interaktív SSR) Blazor Web App esetén hajtsa végre a következő parancsot:

  dotnet new blazor -o BlazorApp
  

• Önálló Blazor WebAssembly-élmény érdekében hajtsa végre a következő parancsot egy olyan parancshéjban, amely a blazorwasm sablont használja:

  dotnet new blazorwasm -o BlazorApp
  

Új projekt létrehozása:

• Váltson a könyvtárra a cd paranccsal arra a helyre, ahol létre szeretné hozni a projektmappát (például cd c:/users/Bernie_Kopell/Documents).

• A Blazor Server élményhez a bemutatókóddal és a Bootstrap-vel hajtsa végre a következő parancsot:

  dotnet new blazorserver -o BlazorApp
  

• Az önálló Blazor WebAssembly élmény érdekében, bemutatókóddal és Bootstrap-pel, hajtsa végre a következő parancsot:

  dotnet new blazorwasm -o BlazorApp
  

• A bemutató kóddal és a Bootstrap elemekkel ellátott üzemeltetett Blazor WebAssembly élményhez adja hozzá az üzemeltetett opciót (-ho/--hosted) a parancshoz:

  dotnet new blazorwasm -o BlazorApp -ho
  

  Jegyzet

  A üzemeltetett Blazor WebAssembly projektsablon nem érhető el ASP.NET Core 8.0-s vagy újabb verziójában. Üzemeltetett Blazor WebAssembly-alkalmazás .NET 8.0-s vagy újabb SDK-val való létrehozásához adja meg a -f|--framework lehetőséget egy 7.0-s célkerettel (net7.0):

  dotnet new blazorwasm -o BlazorApp -ho -f net7.0
  

Új projekt létrehozása:

• Váltson a könyvtárra a cd paranccsal arra a helyre, ahol létre szeretné hozni a projektmappát (például cd c:/users/Bernie_Kopell/Documents).

• Egy Blazor WebAssembly élmény érdekében hajtsa végre a következő parancsot:

  dotnet new blazorwasm -o BlazorApp
  

• Üzemeltetett Blazor WebAssembly élményhez adja hozzá a parancshoz az üzemeltetési lehetőséget (-ho vagy --hosted):

  dotnet new blazorwasm -o BlazorApp -ho
  

  Jegyzet

  A üzemeltetett Blazor WebAssembly projektsablon nem érhető el ASP.NET Core 8.0-s vagy újabb verziójában. Üzemeltetett Blazor WebAssembly-alkalmazás .NET 8.0-s vagy újabb SDK-val való létrehozásához adja meg a -f|--framework lehetőséget a cél keretrendszer-monikerrel (például net6.0):

  dotnet new blazorwasm -o BlazorApp -ho -f net6.0
  

• Egy Blazor Server élmény érdekében hajtsa végre a következő parancsot:

  dotnet new blazorserver -o BlazorApp