Több üzemeltetett ASP.NET Core-alkalmazás Blazor WebAssembly

Ez a cikk azt ismerteti, hogyan konfigurálhat egy üzemeltetett Blazor WebAssembly alkalmazást több Blazor WebAssembly alkalmazás üzemeltetésére.

Konfiguráció

Válassza ki a jelen cikk azon verzióját, amely megfelel az üzemeltetési követelményeknek, például port/tartomány üzemeltetése (például :5001/:5002 vagy firstapp.com/secondapp.com) vagy útvonal-alapú alútvonal üzemeltetése (például /FirstApp és /SecondApp).

A jelenlegi üzemeltetési beállítással ez a cikk a port/tartomány üzemeltetésével foglalkozik (például:5001/:5002firstapp.com/secondapp.com).

Az alábbi példákban:

• Az üzemeltetett Blazor WebAssembly alkalmazás projektneve MultipleBlazorApps egy MultipleBlazorApps nevű mappában található.
• A megoldásban a második ügyfélalkalmazás hozzáadása előtti három projekt a MultipleBlazorApps.Client mappában, Client a MultipleBlazorApps.Server mappában és Server a MultipleBlazorApps.Shared mappában találhatóShared.
• A kezdeti (első) ügyfélalkalmazás a projektsablonból létrehozott megoldás alapértelmezett ügyfélprojektje Blazor WebAssembly .
• A rendszer hozzáad egy második ügyfélalkalmazást a megoldáshoz MultipleBlazorApps.SecondClient egy nevű SecondClientmappában.
• A kiszolgálóprojekt (MultipleBlazorApps.Server) igény szerint oldalakat vagy nézeteket is kiszolgálhat Lapok vagy MVC-alkalmazásként Razor .
• Az első ügyfélalkalmazás elérhető egy böngészőben az 5001-ös porton vagy egy gazdagépen firstapp.com. A második ügyfélalkalmazás elérhető egy böngészőben az 5002-es porton vagy egy meghatározott gazdagépen secondapp.com.

Az aktuális kiválasztással ez a cikk az útvonal részútvonalának üzemeltetését (például /FirstApp és /SecondApp) ismerteti.

Az alábbi példákban:

• Az üzemeltetett Blazor WebAssembly alkalmazás projektneve MultipleBlazorApps egy MultipleBlazorApps nevű mappában található.
• A megoldásban a második ügyfélalkalmazás hozzáadása előtti három projekt a MultipleBlazorApps.Client mappában, Client a MultipleBlazorApps.Server mappában és Server a MultipleBlazorApps.Shared mappában találhatóShared.
• A kezdeti (első) ügyfélalkalmazás a projektsablonból létrehozott megoldás alapértelmezett ügyfélprojektje Blazor WebAssembly .
• A rendszer hozzáad egy második ügyfélalkalmazást a megoldáshoz MultipleBlazorApps.SecondClient egy nevű SecondClientmappában.
• A kiszolgálóprojekt (MultipleBlazorApps.Server) opcionálisan szolgálhat oldalakat vagy nézeteket formális Razor Pages vagy MVC alkalmazásként.
• Mindkét ügyfélalkalmazás a MultipleBlazorApps.Server projekt Properties/launchSettings.json fájlja által meghatározott alapértelmezett portot használja annak applicationUrl értékében. Az első ügyfélalkalmazás egy böngészőben érhető el a /FirstApp mellékúton. A második ügyfélalkalmazás egy böngészőben érhető el a /SecondApp mellékúton.

A cikkben bemutatott példák további konfigurációt igényelnek a következőhöz:

• Az alkalmazások közvetlen elérése a példagazda-tartományoknál: firstapp.com és secondapp.com.
• Az ügyfélalkalmazások tanúsítványai a TLS/HTTPS-biztonság engedélyezéséhez.
• A kiszolgálóalkalmazás konfigurálása Pages-alkalmazásként Razor az alábbi funkciókhoz:
  • Razor Összetevők integrálása lapokba vagy nézetekbe.
  • Összetevők előrenderelése Razor.

Az előző konfigurációk túlmutatnak a jelen cikk hatókörén. További információt a következő források tartalmaznak:

• ASP.NET Core tárhely létrehozása és üzembe helyezése
• HTTPS érvényesítése az ASP.NET Core-ban
• ASP.NET Core-összetevők Razor integrálása az MVC-vel vagy Razor a Pages szolgáltatással üzemeltetett Blazor WebAssembly megoldásokban

Használjon meglévő üzemeltetett Blazor WebAssemblymegoldást vagy hozzon létre egy új üzemeltetett Blazor WebAssembly megoldást a Blazor WebAssembly projektsablonból a -ho|--hosted opció megadásával, ha a .NET CLI-t használja, vagy válassza az ASP.NET Core Hosted jelölőnégyzetet a Visual Studióban, amikor a projektet az IDE-ben hozzák létre.

Használjon egy mappát a megoldáshoz, MultipleBlazorApps és nevezze el a projektet MultipleBlazorApps.

Hozzon létre egy új mappát a megoldásban SecondClient. Az új mappában adjon hozzá egy második Blazor WebAssembly ügyfélalkalmazást.MultipleBlazorApps.SecondClient Adja hozzá a projektet önálló Blazor WebAssembly alkalmazásként. Önálló Blazor WebAssembly alkalmazás létrehozásához ne adja meg a -ho|--hosted lehetőséget, ha a .NET CLI-t használja, vagy ha a Visual Studiót használja, ne használja a ASP.NET Core Hosted jelölőnégyzetet.

Végezze el a következő módosításokat a projekten MultipleBlazorApps.SecondClient :

• Másolja az FetchData összetevőt (Pages/FetchData.razor) a Client/Pages mappából a SecondClient/Pages mappába. Erre a lépésre azért van szükség, mert egy önálló Blazor WebAssembly alkalmazás nem hívja meg a Server projekt vezérlőjét időjárási adatokhoz, hanem statikus adatfájlt használ. Ha az összetevőt FetchData a hozzáadott projektbe másolja, a második ügyfélalkalmazás webes API-hívást is kezdeményez a kiszolgáló API-hoz az időjárási adatokért.
• Törölje a SecondClient/wwwroot/sample-data mappát, mivel a weather.json mappában lévő fájl nincs használatban.

Az alábbi táblázat a mappa és a projekt hozzáadása után ismerteti a SecondClient megoldás mappáit és MultipleBlazorApps.SecondClient projektneveit.

Fizikai mappa	Projekt neve	Leírás
Client	MultipleBlazorApps.Client	Blazor WebAssembly ügyfélalkalmazás
SecondClient	MultipleBlazorApps.SecondClient	Blazor WebAssembly ügyfélalkalmazás
Server	MultipleBlazorApps.Server	ASP.NET Core-kiszolgálóalkalmazás
Shared	MultipleBlazorApps.Shared	Megosztott erőforrások projekt

A MultipleBlazorApps.Server projekt a két Blazor WebAssembly ügyfélalkalmazást szolgálja ki, és időjárási adatokat biztosít az ügyfélalkalmazások FetchData összetevőinek egy MVC-vezérlőn keresztül. MultipleBlazorApps.Server A projekt emellett lapokat vagy nézeteket is kiszolgálhat hagyományos Razor Lapok vagy MVC-alkalmazásként. A lapok vagy nézetek kiszolgálásának engedélyezéséhez szükséges lépéseket a cikk későbbi részében találhatja meg.

Megjegyzés

A jelen cikkben ismertetett bemutató a FirstApp statikus webes eszközútvonalneveket használja a MultipleBlazorApps.Client projekthez és a SecondApp a MultipleBlazorApps.SecondClient projekthez. A "FirstApp" és "SecondApp" nevek csupán bemutatási célokra szolgálnak. Más nevek elfogadhatók az ügyfélalkalmazások megkülönböztetéséhez, például App1/App2, Client1/Client2, 1/2 vagy bármilyen hasonló elnevezési séma.

Ha a kéréseket port vagy tartomány alapján irányítja át az ügyfélalkalmazásoknak, a rendszer FirstApp a "SecondApp" és a "" parancsot használja a kérések átirányítására és a statikus objektumok válaszainak kiszolgálására, és nem látható a böngésző címsorában.

Megjegyzés

A jelen cikkben ismertetett bemutató a FirstApp statikus webes eszközútvonalneveket használja a MultipleBlazorApps.Client projekthez és a SecondApp a MultipleBlazorApps.SecondClient projekthez. A "FirstApp" és "SecondApp" nevek csupán bemutatási célokra szolgálnak. Más nevek elfogadhatók az ügyfélalkalmazások megkülönböztetéséhez, például App1/App2, Client1/Client2, 1/2 vagy bármilyen hasonló elnevezési séma.

A "FirstApp" és a "SecondApp" is megjelenik a böngésző címsorában, mert a kérések a két ügyfélalkalmazáshoz vannak irányítva ezekkel a névvel. Más érvényes URL-útvonalszegmensek is támogatottak, és az útvonalszegmenseknek nem kell szigorúan egyeznie a statikus webes objektumok belső irányításához használt névvel. A "FirstApp" és a "SecondApp" használata mind a belső statikus objektum útválasztásánál, mind az alkalmazáskérések útválasztásánál csupán kényelmi szempontból szerepel a jelen cikk példáiban.

Az első ügyfélalkalmazás projektfájljában (MultipleBlazorApps.Client.csproj) adjon hozzá egy <StaticWebAssetBasePath> elemhez egy <PropertyGroup> értékkel, amely beállítja a projekt statikus eszközeinek alap elérési útját.

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

MultipleBlazorApps.SecondClient Az alkalmazás projektfájljában (MultipleBlazorApps.SecondClient.csproj):

• Adjon hozzá egy <StaticWebAssetBasePath> tulajdonságot egy <PropertyGroup> következő értékkel SecondApprendelkezőhöz:

  <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
  

• Adjon hozzá egy projekthivatkozást a MultipleBlazorApps.Shared projekthez egy <ItemGroup> projekthez.

  <ItemGroup>
    <ProjectReference Include="..\Shared\MultipleBlazorApps.Shared.csproj" />
  </ItemGroup>
  

A kiszolgálóalkalmazás projektfájljában (Server/MultipleBlazorApps.Server.csproj) hozzon létre egy projekthivatkozást a hozzáadott MultipleBlazorApps.SecondClient ügyfélalkalmazáshoz a <ItemGroup>következőben:

<ProjectReference Include="..\SecondClient\MultipleBlazorApps.SecondClient.csproj" />

A kiszolgálóalkalmazás Properties/launchSettings.json fájljában konfigurálja a applicationUrlKestrel profilt (MultipleBlazorApps.Server) az ügyfélalkalmazások eléréséhez az 5001-es és 5002-es portokon. Ha a helyi környezetet a példatartományok használatára konfigurálja, akkor az URL-eknél használhatja a applicationUrl és firstapp.com, és nem szükséges portokat használni.

Megjegyzés

A portok használata ebben a bemutatóban lehetővé teszi az ügyfélprojektek elérését egy helyi böngészőben anélkül, hogy helyi üzemeltetési környezetet kellene konfigurálnia, hogy a webböngészők a gazdagépkonfigurációkon keresztül férhessenek hozzá az ügyfélalkalmazásokhoz, firstapp.com és secondapp.com. Éles helyzetekben jellemzően altartományok használatával kell megkülönböztetni az ügyfélalkalmazásokat.

Például:

• A portok el lesznek távolítva a bemutató konfigurációjából.
• A gazdagépeket úgy módosítják, hogy altartományokat használjanak, például www.contoso.com a webhelylátogatók számára és admin.contoso.com a rendszergazdák számára.
• További gazdagépek hozzáadhatók további ügyfélalkalmazásokhoz. Legalább egy további gazdagépre van szükség, ha a kiszolgálóalkalmazás oldalakat vagy nézeteket kiszolgáló Pages vagy MVC alkalmazás is.

Ha oldalakat vagy nézeteket szeretne kiszolgálni a kiszolgálóalkalmazásból, használja a fájlban az applicationUrl alábbi Properties/launchSettings.json beállítást, amely a következő hozzáférést teszi lehetővé:

• A Pages vagy az Razor MVC alkalmazás (MultipleBlazorApps.Server projekt) igény szerint az 5000-s porton válaszol a kérelmekre.
• Az első ügyfél (MultipleBlazorApps.Client projekt) kérésére adott válaszok az 5001-s porton találhatók.
• A második ügyfél (MultipleBlazorApps.SecondClient projekt) kéréseire érkező válaszok a 5002-es porton találhatók.

"applicationUrl": "https://localhost:5000;https://localhost:5001;https://localhost:5002",

Ha nem tervezi, hogy a kiszolgálóalkalmazás oldalakat vagy nézeteket szolgál ki, és csak az Blazor WebAssembly ügyfélalkalmazásokat szolgálja ki, használja az alábbi beállítást, amely a következő hozzáférést teszi lehetővé:

• Az első ügyfélalkalmazás az 5001-s porton válaszol.
• A második ügyfélalkalmazás az 5002-s porton válaszol.

"applicationUrl": "https://localhost:5001;https://localhost:5002",

A kiszolgálóalkalmazás fájljában Program.cs távolítsa el a következő kódot, amely a következő hívás UseHttpsRedirectionután jelenik meg:

• Ha oldalakat vagy nézeteket szeretne kiszolgálni a kiszolgálóalkalmazásból, törölje a következő kódsorokat:

  - app.UseBlazorFrameworkFiles();
  

  - app.MapFallbackToFile("index.html");
  

• Ha azt tervezi, hogy a kiszolgálóalkalmazás csak az Blazor WebAssembly ügyfélalkalmazásokat szolgálja ki, törölje a következő kódot:

  - app.UseBlazorFrameworkFiles();
  
  ...
  
  - app.UseRouting();
  
  - app.MapRazorPages();
  - app.MapControllers();
  - app.MapFallbackToFile("index.html");
  

  Hagyja a statikus fájl köztes szoftverét a helyén:

  app.UseStaticFiles();
  

• Köztes szoftver hozzáadása, amely a kéréseket a kliens alkalmazásokhoz irányítja. Az alábbi példa a köztes szoftver futtatását konfigurálja úgy, hogy az első ügyfélalkalmazás esetében a kérelem portja 5001, a második ügyfélalkalmazás esetében pedig 5002 legyen, vagy a kérés gazdagépe az első ügyfélalkalmazáshoz firstapp.com, a második ügyfélalkalmazáshoz secondapp.com tartozzon.

  Megjegyzés

  A gazdagépek (firstapp.com/secondapp.com) helyi rendszeren való használata helyi böngészővel további konfigurációt igényel, amelyek nem tartoznak a jelen cikk hatókörébe. A forgatókönyv helyi teszteléséhez javasoljuk a portok használatát. A gyakran használt alkalmazások altartományok használatára vannak konfigurálva, például www.contoso.com a webhelylátogatók és admin.contoso.com a rendszergazdák részére. A megfelelő DNS- és kiszolgálókonfigurációval, amely túlmutat a jelen cikk hatókörén, és a használt technológiáktól függ, az alkalmazás válaszol a következő kódban megnevezett bármely gazdagépre vonatkozó kérésekre.

  Ott, ahol eltávolította a app.UseBlazorFrameworkFiles(); sort Program.cs-ból, helyezze el a következő kódot:

  app.MapWhen(ctx => ctx.Request.Host.Port == 5001 || 
      ctx.Request.Host.Equals("firstapp.com"), first =>
  {
      first.Use((ctx, nxt) =>
      {
          ctx.Request.Path = "/FirstApp" + ctx.Request.Path;
          return nxt();
      });
  
      first.UseBlazorFrameworkFiles("/FirstApp");
      first.UseStaticFiles();
      first.UseStaticFiles("/FirstApp");
      first.UseRouting();
  
      first.UseEndpoints(endpoints =>
      {
          endpoints.MapControllers();
          endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}", 
              "FirstApp/index.html");
      });
  });
  
  app.MapWhen(ctx => ctx.Request.Host.Port == 5002 || 
      ctx.Request.Host.Equals("secondapp.com"), second =>
  {
      second.Use((ctx, nxt) =>
      {
          ctx.Request.Path = "/SecondApp" + ctx.Request.Path;
          return nxt();
      });
  
      second.UseBlazorFrameworkFiles("/SecondApp");
      second.UseStaticFiles();
      second.UseStaticFiles("/SecondApp");
      second.UseRouting();
  
      second.UseEndpoints(endpoints =>
      {
          endpoints.MapControllers();
          endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}", 
              "SecondApp/index.html");
      });
  });
  

  Figyelmeztetés

  A gazdagép fejléc-re támaszkodó API-k, mint például HttpRequest.Host és RequireHost, potenciális hamisításnak vannak kitéve az ügyfelek által.

  A gazda- és porthamisítás megakadályozása érdekében használja az alábbi módszerek egyikét:

  • Használja HttpContext.Connection (ConnectionInfo.LocalPort) ott, ahol a portok ellenőrzésre kerülnek.
  • Hosztszűrés alkalmazása.

• Köztes szoftver hozzáadása, amely a kéréseket a kliens alkalmazásokhoz irányítja. Az alábbi példa konfigurálja a köztes szoftver futtatását, ha a kérelem alútvonala /FirstApp az első ügyfélalkalmazáshoz vagy /SecondApp a második ügyfélalkalmazáshoz tartozik.

  Ott, ahol eltávolította a app.UseBlazorFrameworkFiles(); sort Program.cs-ból, helyezze el a következő kódot:

  app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/FirstApp", 
      StringComparison.OrdinalIgnoreCase), first =>
  {
      first.UseBlazorFrameworkFiles("/FirstApp");
      first.UseStaticFiles();
      first.UseStaticFiles("/FirstApp");
      first.UseRouting();
  
      first.UseEndpoints(endpoints =>
      {
          endpoints.MapControllers();
          endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}",
              "FirstApp/index.html");
      });
  });
  
  app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/SecondApp", 
      StringComparison.OrdinalIgnoreCase), second =>
  {
      second.UseBlazorFrameworkFiles("/SecondApp");
      second.UseStaticFiles();
      second.UseStaticFiles("/SecondApp");
      second.UseRouting();
  
      second.UseEndpoints(endpoints =>
      {
          endpoints.MapControllers();
          endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}",
              "SecondApp/index.html");
      });
  });
  

• Állítsa be az alap elérési utat az egyes ügyfélalkalmazásokban:

  Az első ügyfélalkalmazás fájljában index.html (Client/wwwroot/index.html) frissítse a <base> címke értékét, hogy tükrözze a mellékútot. A záró perjelre van szükség:

  <base href="/FirstApp/" />
  

  A második ügyfélalkalmazás fájljában index.html (SecondClient/wwwroot/index.html) frissítse a <base> címke értékét, hogy az tükrözze a mellékútot. A záró perjelre van szükség:

  <base href="/SecondApp/" />
  

További információ: UseStaticFilesASP.NET Core Blazor statikus fájlok.

További információkért UseBlazorFrameworkFiles és MapFallbackToFile lásd a következő forrásokat:

• Microsoft.AspNetCore.Builder.ComponentsWebAssemblyApplicationBuilderExtensions.UseBlazorFrameworkFiles (referenciaforrás)
• Microsoft.AspNetCore.Builder.StaticFilesEndpointRouteBuilderExtensions.MapFallbackToFile (referenciaforrás)

Megjegyzés

A .NET referenciaforrásra mutató dokumentációs hivatkozások általában betöltik az adattár alapértelmezett ágát, amely a .NET következő kiadásának aktuális fejlesztését jelöli. Egy adott kiadás címkéjének kiválasztásához használja az Ágak vagy címkék közötti váltás legördülő listát. További információ: A ASP.NET Core-forráskód (dotnet/AspNetCore.Docs #26205) verziócímkéjének kiválasztása.

Az ügyfélalkalmazásoktól a kiszolgálói API-ra /WeatherForecast irányuló kérések vagy az ügyfélalkalmazástól függenek /FirstApp/WeatherForecast , vagy /SecondApp/WeatherForecast attól függően, hogy melyik ügyfélalkalmazás küldi el a kérést. Ezért szükséges módosítani azokat az útvonalakat a vezérlőben, amelyek időjárási adatokat küldenek vissza a kiszolgáló API-ból, hogy ezek tartalmazzák az elérésiút-szegmenseket.

A kiszolgálóalkalmazás időjárás-előrejelzési vezérlőjében (Controllers/WeatherForecastController.cs) cserélje le a meglévő útvonalat ([Route("[controller]")]) WeatherForecastController a következő útvonalakra, amelyek figyelembe veszik az ügyfélkérési útvonalakat:

[Route("FirstApp/[controller]")]
[Route("SecondApp/[controller]")]

Ha oldalakat szeretne kiszolgálni a kiszolgálóalkalmazásból, vegyen fel egy IndexRazor lapot a Pages kiszolgálóalkalmazás mappájába:

Pages/Index.cshtml:

@page
@model MultipleBlazorApps.Server.Pages.IndexModel
@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from Razor Pages!</p>
            </div>
        </div>
    </div>
</body>
</html>

Pages/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MultipleBlazorApps.Server.Pages;

public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
}

Megjegyzés

Az előző Index oldal csupán szemléltetési célokra egy minimális példa. Ha az alkalmazás további Razor Pages-objektumokat, például elrendezést, stílusokat, szkripteket és importálásokat igényel, szerezze be őket a Razor Pages projektsablonból létrehozott alkalmazásból. További információ: Razor Pages architektúra és fogalmak a ASP.NET Core-ban.

Ha MVC-nézeteket szeretne kiszolgálni a kiszolgálóalkalmazásból, adjon hozzá egy nézetet Index és egy vezérlőt Home :

Views/Home/Index.cshtml:

@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from MVC!</p>
            </div>
        </div>
    </div>
</body>
</html>

Controllers/HomeController.cs:

using Microsoft.AspNetCore.Mvc;

namespace MultipleBlazorApps.Server.Controllers;

public class HomeController : Controller
{
    public IActionResult Index() => View();
}

Megjegyzés

Az előző Index nézet csupán szemléltetési célokra egy minimális példa. Ha az alkalmazás további MVC-objektumokat, például elrendezést, stílusokat, szkripteket és importálásokat igényel, szerezze be őket az MVC-projektsablonból létrehozott alkalmazásból. További információt a ASP.NET Core MVC használatának első lépéseit ismertető cikkben talál.

A kiszolgálóalkalmazás lapjaiban vagy nézeteiben található ügyfélalkalmazások összetevőinek használatáról Razor további információt a ASP.NET Core-összetevők Razor integrálása az MVC-vel vagy Razor a Pages szolgáltatással üzemeltetett Blazor WebAssembly megoldásokban című témakörben talál.

Az alkalmazás futtatása

A MultipleBlazorApps.Server projekt futtatása:

• A kezdeti ügyfélalkalmazás elérése a következő címen https://localhost:5001: .
• A hozzáadott ügyfélalkalmazás elérése a következő címen https://localhost:5002: .
• Ha a kiszolgálóalkalmazás úgy van konfigurálva, hogy lapokat vagy nézeteket szolgáljon ki, lépjen a lapra vagy a Index nézetre a következő helyen https://localhost:5000: .

• A kezdeti ügyfélalkalmazás elérése a következő címen https://localhost:{DEFAULT PORT}/FirstApp: .
• A hozzáadott ügyfélalkalmazás elérése a következő címen https://localhost:{DEFAULT PORT}/SecondApp: .
• Ha a kiszolgálóalkalmazás úgy van konfigurálva, hogy lapokat vagy nézeteket szolgáljon ki, lépjen a lapra vagy a Index nézetre a következő helyen https://localhost:{DEFAULT PORT}: .

Az előző példákban szereplő URL-ekben a {DEFAULT PORT} helyőrző az alapértelmezett portot jelöli, amelyet a MultipleBlazorApps.Server projekt Properties/launchSettings.json fájlja határoz meg az applicationUrl értékében.

Fontos

Ha az alkalmazást a dotnet watch (vagy dotnet run) paranccsal (.NET CLI) futtatja, győződjön meg arról, hogy a parancshéj meg van nyitva a Server megoldás mappájában.

Ha a Visual Studio start gombját használja az alkalmazás futtatásához, győződjön meg arról, hogy a MultipleBlazorApps.Server projekt indítási projektként van beállítva (a Megoldáskezelőben kiemelve).

Statikus eszközök

Ha egy objektum egy ügyfélalkalmazás mappájában wwwroot található, adja meg az összetevők statikus eszközkérelmének elérési útját:

<img alt="..." src="{PATH AND FILE NAME}" />

A {PATH AND FILE NAME} helyőrző a wwwroot alatti elérési út és fájlnév.

Például egy Jeep-rendszerkép forrása (jeep-yj.png) a vehicle következő mappában wwwroot:

<img alt="Jeep Wrangler YJ" src="vehicle/jeep-yj.png" />

Razor osztálykódtár (RCL) támogatása

Adja hozzá az Razor osztálytárat (RCL) a megoldáshoz új projektként:

• Kattintson a jobb gombbal a megoldásra a Megoldáskezelőben, és válassza azÚj projekt>.
• A projekt létrehozásához használja az Razor Osztálytár projektsablont. Az ebben a szakaszban szereplő példák a projekt nevét ComponentLibraryhasználják, amely egyben az RCL szerelvényneve is. Ne jelölje be a Támogatási lapok és nézetek jelölőnégyzetet.

Minden üzemeltetett Blazor WebAssembly ügyfélalkalmazáshoz hozzon létre egy projekthivatkozást az RCL-projekthez, ha a jobb gombbal az egyes ügyfélprojektekre kattint a Megoldáskezelőben, és válassza aProjekthivatkozás>.

Használja az RCL összetevőit az ügyfélalkalmazásokban az alábbi módszerek valamelyikével:

• Helyezzen egy @using direktívát az RCL névterének összetevőjének tetejére, és adja hozzá Razor az összetevő szintaxisát. Az alábbi példa egy szerelvénynévvel ComponentLibraryrendelkező RCL-hez készült:

  @using ComponentLibrary
  
  ...
  
  <Component1 />
  

• Adja meg az RCL névterét az Razor összetevő szintaxisával együtt. Ehhez a megközelítéshez nincs szükség irányelvre @using az összetevőfájl tetején. Az alábbi példa egy szerelvénynévvel ComponentLibraryrendelkező RCL-hez készült:

  <ComponentLibrary.Component1 />
  

Megjegyzés

Az egyes ügyfélalkalmazások @using fájljába is elhelyezhető egy _Import.razor direktíva, amely a projekt összetevői számára globálisan elérhetővé teszi az RCL névterét.

Ha bármely más statikus objektum egy RCL mappájában wwwroot található, hivatkozzon az ügyfélalkalmazás statikus objektumára az ASP.NET Core-val rendelkező osztálykódtárak újrafelhasználható Razor felhasználói felületén található útmutató alapján:

<img alt="..." src="_content/{PACKAGE ID}/{PATH AND FILE NAME}" />

A {PACKAGE ID} helyőrző az RCL csomagazonosítója. A csomagazonosító alapértelmezés szerint a projekt összeállítási neve lesz, ha <PackageId> nincs megadva a projektfájlban. A {PATH AND FILE NAME} helyőrző az elérési út és a fájl neve, amely az wwwrootalatt található.

Az alábbi példa bemutatja a Jeep kép jelölését (jeep-yj.png) az RCL vehicle mappájának wwwroot mappájában. Az alábbi példa egy szerelvénynévvel ComponentLibraryrendelkező RCL-hez készült:

<img alt="Jeep Wrangler YJ" src="_content/ComponentLibrary/vehicle/jeep-yj.png" />

További erőforrások

• ASP.NET Core Razor összetevőinek felhasználása egy Razor osztálykódtárból (RCL)
• Újrahasználható Razor felhasználói felület osztálykönyvtárakban az ASP.NET Core segítségével
• ASP.NET Core Blazor CSS elkülönítés