Újrafelhasználható felhasználói felület létrehozása a Razor osztálykódtár-projekttel a ASP.NET Core-ban

Készítette: Rick Anderson

Razor nézetek, oldalak, vezérlők, oldalmodellek, Razor összetevők, nézetösszetevőkés adatmodellek egy Razor osztálykönyvtárba (RCL) építhetők be. Az RCL csomagolható és újra felhasználható. Az alkalmazások tartalmazhatják az RCL-t, és felülbírálhatják a benne található nézeteket és lapokat. Ha egy nézet, részleges nézet vagy Razor lap a webalkalmazásban és az RCL-ben is megtalálható, a webalkalmazásban a Razor korrektúra (.cshtml fájl) elsőbbséget élvez.

Az RCL esetében az npm és a webpack buildfolyamatba való integrálásáról bővebb információkat a "Kliensoldali webes eszközök összeállítása az osztálykönyvtáradhoz" című témakörben talál.

Razor felhasználói felületet tartalmazó osztálytár létrehozása

Visual Studio

• A Visual Studióból válassza az Új projekt létrehozása lehetőséget .
• Válassza a Razor Osztálykönyvtár>Következő lehetőséget.
• Nevezze el a kódtárat (például "RazorClassLib"), >Létrehozás. A fájlnév és a létrehozott nézetkönyvtár ütközésének elkerülése érdekében győződjön meg arról, hogy a könyvtár neve nem végződik .Views-ra.
• Válassza a támogatási lapokat és nézeteket, amennyiben szüksége van olyan könyvtárra, amely lapokat és/vagy nézeteket tartalmaz. Alapértelmezés szerint csak Razor összetevők támogatottak. Válassza a Create gombot.

A Razor osztálykönyvtár sablon alapértelmezés szerint a Razor összetevő-fejlesztéshez használatos. A Támogatási lapok és nézetek beállítás támogatja a lapokat és a nézeteket. A BlazorRCL-támogatásával kapcsolatos további információkért lásd: ASP.NET Core Razor összetevőinek felhasználása Razor osztálykódtárból (RCL).

.NET CLI

A parancssorból futtassa a dotnet new razorclasslib. Például:

dotnet new razorclasslib -o RazorUIClassLib

A Razor osztálykönyvtár sablon alapértelmezés szerint a Razor összetevő-fejlesztéshez használatos. Adja át a --support-pages-and-views lehetőséget (dotnet new razorclasslib --support-pages-and-views) a lapok és nézetek támogatásához.

További információ: dotnet new. A fájlnév és a létrehozott nézetkönyvtár ütközésének elkerülése érdekében győződjön meg arról, hogy a könyvtár neve nem végződik .Views-ra.

Adjon hozzá Razor fájlokat az RCL-hez.

A ASP.NET Core-sablonok feltételezik, hogy az RCL-tartalom a Areas mappában található. Az alábbi RCL-oldalak elrendezésénél hozzunk létre egy RCL-t, amely a tartalmat ~/Pages teszi elérhetővé, nem pedig ~/Areas/Pages.

RCL-referencia tartalom

Az RCL-re a következő hivatkozással hivatkozhat:

• NuGet-csomag. Lásd: NuGet-csomagok létrehozása és dotnet-csomag hozzáadása és NuGet-csomag létrehozása és közzététele.
• {ProjectName}.csproj. Nézze meg a dotnet-add reference.

Nézetek, részleges nézetek és lapok felülírása

Ha egy nézet, részleges nézet vagy Razor lap a webalkalmazásban és az RCL-ben is megtalálható, a webalkalmazásban a Razor korrektúra (.cshtml fájl) elsőbbséget élvez. Például adja hozzá a WebApp1/Areas/MyFeature/Pages/Page1.cshtml-t a WebApp1-hez, és a WebApp1-en található Lap1 elsőbbséget élvez majd az RCL-en található Lap1 felett.

A mintafájlban nevezze át WebApp1/Areas/MyFeature2-t WebApp1/Areas/MyFeature-re, hogy tesztelje az elsőbbséget.

Másolja a RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml részleges nézetet a WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml-be. Frissítse a jelölést az új hely jelzésére. Építse fel és futtassa az alkalmazást, hogy ellenőrizze, az alkalmazásban a részleges verzió használatban van-e.

Ha az RCL Razor oldalakat használ, engedélyezze a Razor Pages-szolgáltatásokat és -végpontokat az üzemeltetési alkalmazásban:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

RCL-lapok elrendezése

Ha úgy szeretne hivatkozni az RCL-tartalomra, mintha az a webalkalmazás Pages mappájának része lenne, hozza létre az RCL-projektet a következő fájlstruktúrával:

• RazorUIClassLib/Pages
• RazorUIClassLib/Pages/Shared

Tegyük fel, hogy RazorUIClassLib/Pages/Shared két részleges fájlt tartalmaz: _Header.cshtml és _Footer.cshtml. A <partial> címkék hozzáadhatók _Layout.cshtml fájlhoz:

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

Add hozzá a _ViewStart.cshtml fájlt az RCL-projekt Pages mappájába a gazdagép webalkalmazásának _Layout.cshtml fájljának használatához.

@{
    Layout = "_Layout";
}

RCL létrehozása statikus eszközökkel

Az RCL-hez szükség lehet olyan társ statikus eszközökre, amelyekre az RCL vagy az RCL fogyasztó alkalmazása hivatkozhat. ASP.NET Core lehetővé teszi olyan RCLs-ek létrehozását, amelyek statikus objektumokat tartalmaznak, amelyek elérhetők a fogyasztó alkalmazások számára.

Ha társeszközöket szeretne belefoglalni egy RCL-fájlba, hozzon létre egy wwwroot mappát az osztálytárban, és foglalja bele a szükséges fájlokat ebbe a mappába.

RCL csomagolásakor a wwwroot mappában lévő összes társeszköz automatikusan bekerül a csomagba.

Használja a dotnet pack parancsot a NuGet.exe verzió nuget packhelyett.

Ügyfél webes eszközeinek hozzáadása a buildelési folyamathoz

Az ügyfél webes eszközeinek a buildelési folyamatba való integrálása nemtriviális. További információt Az Razor Osztálytár ügyfél-webes eszközeinek létrehozása című témakörben talál.

Statikus eszközök kizárása

Statikus objektumok kizárásához adja hozzá a kívánt kizárási útvonalat a projektfájl $(DefaultItemExcludes) tulajdonságcsoporthoz. Pontosvesszővel (;) rendelkező bejegyzések elkülönítése.

Az alábbi példában a lib.css mappában lévő wwwroot stíluslap nem tekinthető statikus objektumnak, és nem szerepel a közzétett RCL-ben:

<PropertyGroup>
  <DefaultItemExcludes>$(DefaultItemExcludes);wwwroot\lib.css</DefaultItemExcludes>
</PropertyGroup>

Typescript-integráció

TypeScript-fájlok felvétele RCL-fájlba:

• A projektben hivatkozzon a Microsoft.TypeScript.MSBuild NuGet-csomagra.

  Note

  A csomagok .NET-alkalmazásokhoz való hozzáadásáról a Csomagok telepítése és kezeléseCsomaghasználati munkafolyamat (NuGet-dokumentáció)című cikkben talál útmutatást. Ellenőrizze a megfelelő csomagverziókat a NuGet.org.

• Helyezze a TypeScript-fájlokat (.ts) a wwwroot mappán kívülre. Helyezze például a fájlokat egy Client mappába.

• Adja hozzá a következő korrektúrát a projektfájlhoz:

  • Konfigurálja az wwwroot mappa TypeScript buildkimenetét a TypescriptOutDir tulajdonsággal.
  • Adja hozzá a TypeScript-célt a PrepareForBuildDependsOn-cél függőségeként.
  • Távolítsa el a kimenetet a wwwroot folderszekcióból.

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    // Markup removed for brevity.
    <TypescriptOutDir>wwwroot</TypescriptOutDir>
    <PrepareForBuildDependsOn>
      CompileTypeScriptWithTSConfig;
      GetTypeScriptOutputForPublishing;$(PrepareForBuildDependsOn)
    </PrepareForBuildDependsOn>
  </PropertyGroup>

  <ItemGroup>
    <Content Remove="wwwroot\{path-to-typescript-outputs}" />
  </ItemGroup>

</Project>

Hivatkozott RCL-ből származó tartalom felhasználása

Az RCL wwwroot mappájában található fájlok az RCL vagy a fogyasztó alkalmazás számára érhetők el az _content/{PACKAGE ID}/előtag alatt. Egy Razor.Class.Lib összállítási névvel rendelkező kódtár, amelynek a projektfájljában nincs megadva <PackageId>, például a statikus tartalom elérési útját eredményezi a _content/Razor.Class.Lib/. NuGet-csomag létrehozásakor, ha az assemblage neve nem azonos a csomagazonosítóval (<PackageId> a kódtár projektfájljában), használja a projektfájlban megadott csomagazonosítót a {PACKAGE ID}helyen.

A fogyasztó alkalmazás a kódtár által biztosított statikus eszközökre hivatkozik <script>, <style>, <img>és egyéb HTML-címkékkel. A fogyasztó alkalmazásnak engedélyeznie kell a statikus fájlok támogatását a következő helyen:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

Ha a felhasználó alkalmazást buildkimenetből (dotnet run) futtatja, a statikus webeszközök alapértelmezés szerint engedélyezve vannak a fejlesztési környezetben. Ha más környezetekben lévő eszközöket szeretne támogatni a buildkimenetből futtatáskor, hívja meg a UseStaticWebAssets a hosztépítőben a Program.cs.

var builder = WebApplication.CreateBuilder(args);

builder.WebHost.UseWebRoot("wwwroot");
builder.WebHost.UseStaticWebAssets();

builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Nem szükséges meghívni UseStaticWebAssets, ha közzétett kimenetből (dotnet publish) futtat egy alkalmazást.

Többprojektes fejlesztési folyamat

A fogyasztóalkalmazás futtatásakor:

• Az RCL-ben lévő objektumok az eredeti mappájukban maradnak. A vagyontárgyak nem kerülnek át a fogyasztói alkalmazásba.
• Az RCL wwwroot mappájában végrehajtott módosítások az RCL újraépítése után, a fogyasztó alkalmazás újraépítése nélkül is megjelennek a fogyasztó alkalmazásban.

Az RCL létrehozásakor a rendszer létrehoz egy jegyzékfájlt, amely leírja a statikus webes eszközhelyeket. A fogyasztó alkalmazás futásidőben felolvassa a jegyzékfájlt, hogy felhasználja a hivatkozott projektekből és csomagokból származó eszközöket. Amikor új objektumot ad hozzá egy RCL-hez, az RCL-t újra kell létrehozni, hogy frissítse a jegyzékfájlt, mielőtt egy fogyasztó alkalmazás hozzáférhet az új objektumhoz.

Publish

Az alkalmazás közzétételekor a program az összes hivatkozott projekt és csomag társeszközeit a közzétett alkalmazás wwwroot mappájába másolja a _content/{PACKAGE ID}/alatt. NuGet-csomag készítésekor, ha a szerelvény neve nem egyezik meg a csomagazonosítóval (<PackageId> a kódtár projektfájljában), használja a projektfájlban megadott csomagazonosítót a közzétett elemek {PACKAGE ID} mappájának vizsgálatakor a wwwroot miatt.

További erőforrások

• Mintakód megtekintése vagy letöltése (hogyan lehet letölteni)

• ASP.NET Core Razor összetevőinek felhasználása egy Razor osztálykódtárból (RCL)

• ASP.NET Core Blazor CSS elkülönítés