Skapa ett Razor-klassbibliotek

  • 5 minuter

I den här övningen skapar du en modal dialogruta i ett Razor-klassbibliotek som du kan återanvända i standardprogrammet för Blazor-mallar.

Skärmbild av den modala dialogruta som ska skapas i blazor-standardmallprogrammet.

Skapa razor-klassbiblioteksprojektet

Den här modulen använder .NET 8.0 SDK. Kontrollera att du har .NET 8.0 installerat genom att köra följande kommando i önskad kommandoterminal:

dotnet --list-sdks

Utdata som liknar följande exempel visas:

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

Kontrollera att en version som börjar med 8 visas. Om inget visas eller om kommandot inte hittas installera den senaste .NET 8.0 SDK-.

Börja med att skapa razor-klassbiblioteksprojektet för en modal dialogkomponent. Du kan använda Visual Studio för att skapa ett nytt projekt, eller så kan du skapa projektet i en ny mapp med kommandoradsverktyget .NET, som du ser här:

dotnet new razorclasslib -o FirstClassLibrary -f net8.0

Skapa den modala dialogkomponenten

Skapa sedan modal-komponenten i projektet med en lämplig CSS-fil för att följa med och ange ett initialt format.

  1. Byt namn på filen Component1.razor till Modal.razor och Component1.razor.css filen till Modal.razor.css. Filen Modal.razor innehåller den komponent som du skapar, och i framtiden kan du lägga till tomma textfiler i projektet och formatera dem med innehåll för Razor eller CSS på rätt sätt.

  2. Lägg till följande Razor-innehåll i filen Modal.razor :

    @if (Show) {

 <div class="dialog-container">
  <div class="dialog">
   <div class="dialog-title">
    <h2>@Title</h2>
   </div>

   <div class="dialog-body">
    @ChildContent
   </div>

   <div class="dialog-buttons">
    <button class="btn btn-secondary mr-auto" @onclick="OnCancel">@CancelText</button>
    <button class="btn btn-success ml-auto" @onclick="OnConfirm">@ConfirmText</button>
   </div>

  </div>
 </div>

}

@code {

 [Parameter]
 public string Title { get; set; }

 [Parameter]
 public string CancelText { get; set; } = "Cancel";

 [Parameter]
 public string ConfirmText { get; set; } = "Ok";

 [Parameter]
 public RenderFragment ChildContent { get; set; }

 [Parameter]
 public bool Show { get; set; }


 [Parameter] public EventCallback OnCancel { get; set; }
 [Parameter] public EventCallback OnConfirm { get; set; }

}

    Den här komponenten har flera fina funktioner som du kan dela mellan dina projekt:

    • En rubrik.
    • Avbryt och bekräfta knappar med etiketter som du kan konfigurera och klicka på händelser som du kan hantera.
    • Du kan ange komponentens inre innehåll via parametern ChildContent .
    • Du kan styra visningstillståndet för dialogrutan med parametern Show .

  3. Om du vill ange standardformatering för komponenten lägger du till följande CSS i filen Modal.razor.css :

    .dialog-container {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: rgba(0,0,0,0.5);
 z-index: 2000;
 display: flex;
 animation: dialog-container-entry 0.2s;
}

@keyframes dialog-container-entry {
 0% {
   opacity: 0;
 }

 100% {
   opacity: 1;
 }
}

.dialog {
 background-color: white;
 box-shadow: 0 0 12px rgba(0,0,0,0.6);
 display: flex;
 flex-direction: column;
 z-index: 2000;
 align-self: center;
 margin: auto;
 width: 700px;
 max-height: calc(100% - 3rem);
 animation: dialog-entry 0.4s;
 animation-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

@keyframes dialog-entry {
 0% {
   transform: translateY(30px) scale(0.95);
 }

 100% {
   transform: translateX(0px) scale(1.0);
 }
}

.dialog-title {
 background-color: #444;
 color: #fff2cc;
 padding: 1.3rem 0.5rem;
}

 .dialog-title h2 {
   color: white;
   font-size: 1.4rem;
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1.3rem;
 }

.dialog-body {
 flex-grow: 1;
 padding: 0.5rem 3rem 1rem 0.5rem;
}

.dialog-buttons {
 height: 4rem;
 flex-shrink: 0;
 display: flex;
 align-items: center;
 background-color: #eee;
 padding: 0 1rem;
}

Den här markeringen ger vissa standardfärger till ett namnlist och knappfält längst ned, vilket gör det mer intressant än en enkel uppsättning gråfärgade HTML-element.

Referera till och använda modal-komponenten

Med den modala komponenten som nu finns i Projektet FirstClassLibrary lägger du till ett nytt Blazor-serverprogram och börjar använda modal-komponenten.

  1. Skapa ett nytt Blazor-serverprojekt med namnet MyBlazorApp i en mapp bredvid FirstClassLibrary-projektet antingen med hjälp av funktionen Lägg till nytt projekt i Visual Studio eller genom att köra följande kommando:

    dotnet new blazor -o MyBlazorApp -f net8.0

  2. Lägg till en referens till Projektet FirstClassLibrary i Projektet MyBlazorApp , antingen med hjälp av visual studio-funktionen Lägg till referens eller genom att köra följande kommando från mappen MyBlazorApp :

    dotnet add reference ../FirstClassLibrary

Med den här projektreferensen på plats kan Programmet MyBlazorApp interagera med komponenterna i FirstClassLibrary-projektet .

  1. Gör det enklare att referera till modal-komponenten genom att lägga till en post i slutet av filen _Imports.razor i mappen Komponenter i Programmet MyBlazorApp. På så sätt kan du referera till den modala komponenten utan att behöva ange hela namnområdet för komponenten.

    @using FirstClassLibrary

  2. Lägg till en modal komponent på startsidan för det här programmet, filen Components/Pages/Home.razor

    <Modal Title="My first Modal dialog" Show="true">
 <p>
   This is my first modal dialog
 </p>
</Modal>

    a. Ge komponenten en rubrik, "Min första modala dialogruta".
    b. Lägg till ett kort stycke som ska visas i dialogrutan. Det här innehållet beskriver syftet med dialogrutan.
    c. Ange att dialogrutan ska visas med hjälp av parametern Show .

Kontrollera ditt arbete

Starta Programmet MyBlazorApp med dotnet run och navigera till det i webbläsaren. Dialogrutan Min första modal ska visas framför resten av innehållet på skärmen.

Skärmbild av den modala dialogruta som du just har skapat i blazor-standardmallprogrammet.