Razor sınıf kütüphanesi oluşturma

Tamamlandı

Bu alıştırmada, Razor sınıf kitaplığında varsayılan Blazor şablon uygulamasında yeniden kullanabileceğiniz kalıcı bir iletişim kutusu oluşturacaksınız.

Razor sınıf kitaplığı projesini oluşturma

Bu modülde .NET 8.0 SDK kullanılır. Tercih ettiğiniz komut terminalinde aşağıdaki komutu çalıştırarak .NET 8.0'ın yüklü olduğundan emin olun:

dotnet --list-sdks

Aşağıdaki örneğe benzer bir çıkış görüntülenir:

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

ile 8 başlayan bir sürümün listelendiğinden emin olun. Hiçbiri listelenmiyorsa veya komut bulunamazsa, en son .NET 8.0 SDK'sınıyükleyin.

Başlamak için kalıcı iletişim kutusu bileşeni için Razor sınıf kitaplığı projesini oluşturun. Visual Studio'yu kullanarak yeni bir proje oluşturabilir veya burada gösterildiği gibi .NET komut satırı aracıyla projeyi yeni bir klasörde oluşturabilirsiniz:

dotnet new razorclasslib -o FirstClassLibrary -f net8.0

Modal iletişim kutusu bileşenini oluştur

Ardından, projenizdeki modül bileşenini uygun bir CSS dosyasıyla inşa edin ve başlangıç formatı sağlayın.

1. Component1.razor dosyasını Modal.razor olarak, dosyayı da Modal.razor.css olarak yeniden adlandırınComponent1.razor.css. Modal.razor dosyası, oluşturacağınız bileşeni içerir ve gelecekte projenize boş metin dosyaları ekleyebilir ve bunları Razor veya CSS içeriğiyle uygun şekilde biçimlendirebilirsiniz.

2. Modal.razor dosyasına aşağıdaki Razor içeriğini ekleyin:

   @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; }
   
   }
   

   Bu bileşen, projeleriniz arasında paylaşabileceğiniz birkaç güzel özelliğe sahiptir:

   • Bir başlık.
   • İptal et ve Onayla düğmeleri, yönetebileceğiniz olayları yapılandırıp tıklayabileceğiniz etiketlerle birlikte.
   • bileşenin iç içeriğini parametresi aracılığıyla ChildContent ayarlayabilirsiniz.
   • parametresiyle Show iletişim kutusunun görüntüleme durumunu denetleyebilirsiniz.

3. Bileşen için varsayılan biçimlendirme sağlamak için Modal.razor.css dosyasına aşağıdaki CSS'yi ekleyin:

   .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;
   }
   

Bu İşaretleme, alttaki başlık çubuğuna ve düğme çubuğuna bazı varsayılan renklendirmeler vererek basit bir gri renkli HTML öğesi kümesinden daha ilginç olmasını sağlar.

Kalıcı bileşene başvurma ve kullanma

Kalıcı bileşen artık FirstClassLibrary projesinde yer alıyorsa, yeni bir Blazor sunucu uygulaması ekleyin ve kalıcı bileşeni kullanmaya başlayın.

1. Visual Studio Yeni Proje Ekle özelliğini kullanarak veya aşağıdaki komutu çalıştırarak FirstClassLibrary projesinin yanındaki bir klasörde MyBlazorApp adlı yeni bir Blazor sunucu projesi oluşturun:

   dotnet new blazor -o MyBlazorApp -f net8.0
   

2. Visual Studio Başvuru Ekle özelliğini kullanarak veya MyBlazorApp klasöründen aşağıdaki komutu çalıştırarak MyBlazorApp projesindeki FirstClassLibrary projesine başvuru ekleyin:

   dotnet add reference ../FirstClassLibrary
   

Bu proje başvurusu gerçekleştiğinde, MyBlazorApp uygulaması FirstClassLibrary projesindeki bileşenlerle etkileşime geçebilir.

1. MyBlazorApp uygulamasının Components klasöründeki _Imports.razor dosyasının sonuna bir giriş ekleyerek modal bileşene başvurmayı kolaylaştırın. Bunu yaparak, bileşenin ad alanının tamamını belirtmek zorunda kalmadan modal bileşene başvurabilirsiniz.

   @using FirstClassLibrary
   

2. Bu uygulamanın açılış sayfası olan Components/Pages/Home.razor dosyasına kalıcı bir bileşen ekleyin

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

   a. Bileşene "İlk Modal diyalogum" başlığını verin.
   b. İletişim kutusunun içinde görüntülenecek kısa bir paragraf ekleyin. Bu içerik, iletişim kutusunun amacını açıklar.
   c. İletişim kutusunu görünür hale getirmek için Show parametresini kullanarak ayarlayın.

Çalışmanızı denetleyin

MyBlazorApp uygulamasını dotnet run ile başlatın ve tarayıcınızda ona gidin. Ekrandaki içeriğin geri kalanının önünde, Benim ilk Modal iletişim kutum görüntülenmelidir.