Alıştırma - Blazor uygulamalarında veri paylaşma

6 dakika

Uygulamanız bir veritabanına bağlı olduğuna göre artık müşterilerin pizza yapılandırma ve sipariş etme özelliğini eklemenin zamanı geldi.

Blazing Pizza, müşterilerin özel pizzalarının boyutunu değiştirmelerini sağlamanızı istiyor. Siparişi depolamanız ve uygulama durumunu bir kapsayıcı hizmetinde depolamanız gerekir.

Bu alıştırmada verileri yeni bir sipariş yapılandırma bileşenine geçirecek ve uygulamanın durumunu OrderState kapsamlı bir hizmette nasıl depolayabileceğinizi göreceksiniz.

Yeni sipariş yapılandırma iletişim kutusu ekle

Hala çalışıyorsa uygulamayı durdurun.
Visual Studio Code'da Paylaşılan klasörüne sağ tıklayın ve Yeni Dosya'yı seçin.
Dosya adı olarak ConfigurePizzaDialog.razor girin.

Yeni sipariş bileşeninin kullanıcı arabirimi için şu kodu girin:

@inject HttpClient HttpClient

<div class="dialog-container">
    <div class="dialog">
        <div class="dialog-title">
            <h2>@Pizza.Special.Name</h2>
            @Pizza.Special.Description
        </div>
        <form class="dialog-body">
            <div>
                <label>Size:</label>
                <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" />
                <span class="size-label">
                    @(Pizza.Size)" (£@(Pizza.GetFormattedTotalPrice()))
                </span>
            </div>
        </form>

        <div class="dialog-buttons">
            <button class="btn btn-secondary mr-auto" >Cancel</button>
            <span class="mr-center">
                Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>
            </span>
            <button class="btn btn-success ml-auto" >Order ></button>
        </div>
    </div>
</div>

Bu bileşen, seçilen özel pizzayı gösteren ve müşterinin pizza boyutunu seçmesine izin veren bir iletişim kutusudur.

Bileşen, pizzanın üye değerlerine erişmek için dizin sayfası bileşeninden özel bir pizzaya ihtiyaç duyar.

Parametrelerin bileşene geçirilmesine izin vermek için Blazor @code bloğunu ekleyin:
```
@code {
    [Parameter] public Pizza Pizza { get; set; }
}
```

Pizza sipariş etmek

Müşteri pizza seçtiğinde, iletişim kutusu pizzanın boyutunu değiştirmesine izin vermelidir. Şimdi bu etkileşimi eklemek için index.razor denetimini geliştirelim.

Dosya gezgininde Sayfalar'ı genişletin ve index.razor öğesini seçin.
Bu kodu @code değişkeninin altındaki List<PizzaSpecial> bloğuna ekleyin:
```
Pizza configuringPizza;
bool showingConfigureDialog;
```

OnInitializedAsync() yöntemi altında pizza oluşturmak için bu kodu ekleyin:

void ShowConfigurePizzaDialog(PizzaSpecial special)
{
    configuringPizza = new Pizza()
    {
        Special = special,
        SpecialId = special.Id,
        Size = Pizza.DefaultSize
    };

    showingConfigureDialog = true;
}

Müşterilerin pizzanın ShowConfigurePizzaDialog etiketini seçmesine izin vererek web sayfasının sunucu tarafı <li> yöntemini çağırmasına izin verin. <li> satırını şu kodla değiştirin:
```
<li @onclick="@(() => ShowConfigurePizzaDialog(special))" style="background-image: url('@special.ImageUrl')">
```
Müşteri bir pizza seçtiğinde, sunucu özel pizza verileriyle bir pizza oluşturan ve ShowConfigurePizzaDialog değişkenini showingConfigureDialogolarak ayarlayan true yöntemini yürütür.

Sayfa, yeni ConfigurePizzaDialog bileşenini görüntülemek için bir yönteme ihtiyaç duyar. Bu kodu @code bloğunun üzerine ekleyin:

@if (showingConfigureDialog)
{
    <ConfigurePizzaDialog Pizza="configuringPizza" />
}

index.razor dosyasının tamamı şu örnekteki gibi görünmelidir:

@page "/"
@inject HttpClient HttpClient
@inject NavigationManager NavigationManager

<div class="main">
    <h1>Blazing Pizzas</h1>
    <ul class="pizza-cards">
    @if (specials != null)
    {
        @foreach (var special in specials)
        {
          <li @onclick="@(() => ShowConfigurePizzaDialog(special))" style="background-image: url('@special.ImageUrl')">
            <div class="pizza-info">
            <span class="title">@special.Name</span>
            @special.Description
            <span class="price">@special.GetFormattedBasePrice()</span>
            </div>
          </li>
        }
    }
    </ul>
</div>

@if (showingConfigureDialog)
{
    <ConfigurePizzaDialog Pizza="configuringPizza" />
}

@code {
    List<PizzaSpecial> specials = new();
    Pizza configuringPizza;
    bool showingConfigureDialog;

    protected override async Task OnInitializedAsync()
    {
        specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>(NavigationManager.BaseUri + "specials");
    }

    void ShowConfigurePizzaDialog(PizzaSpecial special)
    {
        configuringPizza = new Pizza()
        {
            Special = special,
            SpecialId = special.Id,
            Size = Pizza.DefaultSize
        };

        showingConfigureDialog = true;
    }
}

F5'i veya Çalıştır'ı seçin. Ardından Hata Ayıklamayı Başlat seçin.
Bir pizza seçin ve yeni iletişim kutusunun görünmesini izleyin.

Siparişin durumunu işleme

Şu anda uygulama yapılandırma iletişim kutusunu gösterir, ancak pizzayı iptal etme veya pizza sipariş etme işlemine geçmenize izin vermez. Siparişin durumunu yönetmek için yeni bir sipariş durum kapsayıcı hizmeti ekliyorsunuz.

Hala çalışıyorsa uygulamayı durdurun.
BlazingPizza klasöründe yeni bir klasör oluşturun. Hizmetler olarak adlandır.
Hizmetler klasöründe yeni bir dosya oluşturun. OrderState.cs olarak adlandır.

Sınıfı için şu kodu girin:

namespace BlazingPizza.Services;

public class OrderState
{
    public bool ShowingConfigureDialog { get; private set; }
    public Pizza ConfiguringPizza { get; private set; }
    public Order Order { get; private set; } = new Order();

    public void ShowConfigurePizzaDialog(PizzaSpecial special)
    {
        ConfiguringPizza = new Pizza()
        {
            Special = special,
            SpecialId = special.Id,
            Size = Pizza.DefaultSize,
            Toppings = new List<PizzaTopping>(),
        };

        ShowingConfigureDialog = true;
    }

    public void CancelConfigurePizzaDialog()
    {
        ConfiguringPizza = null;

        ShowingConfigureDialog = false;
    }

    public void ConfirmConfigurePizzaDialog()
    {
        Order.Pizzas.Add(ConfiguringPizza);
        ConfiguringPizza = null;

        ShowingConfigureDialog = false;
    }
}

Şu anda index.razor bileşeninde yeni sınıfa taşıyabileceğiniz bir kod olduğunu fark edeceksiniz. Sonraki adım, bu hizmeti uygulamada kullanılabilir hale getirmektir.

Dosya gezgininde Program.cs'ı seçin.
dosyanın builder.Services.ile başlayan satırları içeren bölümüne şu satırı ekleyin:
```
builder.Services.AddScoped<OrderState>();
```
Önceki alıştırmada veritabanı bağlamımızı buraya ekledik. Bu kod yeni OrderState hizmetini ekler. Bu kod yerleşik olarak artık index.razor bileşeninde kullanabiliriz.
Dosyanın en üstüne aşağıdaki using yönergeyi ekleyin. Bu yönerge, OrderState sınıfına yapılan tüm referansları çözümler:
```
using BlazingPizza.Services;
```
Dosya gezgininde Sayfalar'ı genişletin ve index.razor öğesini seçin.
Dosyanın en üstündeki @inject NavigationManager NavigationManageraltına şu kodu ekleyin:
```
@using BlazingPizza.Services
@inject OrderState OrderState
```

configuringPizza bloğundan showingConfigureDialog, ShowConfigurePizzaDialog()ve @code kaldırın. Şimdi şöyle görünmelidir:

@code {
    List<PizzaSpecial> specials = new List<PizzaSpecial>();

    protected override async Task OnInitializedAsync()
    {
        specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>(NavigationManager.BaseUri + "specials");
    }
}

Artık kodun sildiğiniz öğelere başvurdiği her yerde hatalar var.

OrderState sürümünü kullanmak için çağrıyı ShowConfigurePizzaDialog(special)) olarak değiştirin:

<li @onclick="@(() => OrderState.ShowConfigurePizzaDialog(special))" style="background-image: url('@special.ImageUrl')">

Boole showingConfigureDialogreferansını değiştirin:
```
@if (OrderState.ShowingConfigureDialog)
```

parametresini configuringPizzakullanarak değiştirin:

<ConfigurePizzaDialog Pizza="OrderState.ConfiguringPizza" />

F5'i veya Çalıştır'ı seçin. Ardından Hata Ayıklamayı Başlat seçin.

Her şey doğruysa, hiçbir fark görmemeniz gerekir. İletişim kutusu daha önce olduğu gibi görüntülenir.

Pizza siparişlerini iptal et ve yap

OrderState sınıfında henüz kullanılmayan iki yöntem olduğunu fark edebilirsiniz. CancelConfigurePizzaDialog ve ConfirmConfigurePizzaDialog yöntemleri iletişim kutusunu kapatır ve müşteri siparişi onayladıktan sonra pizzayı bir Order nesneye ekler. Şimdi bu yöntemleri yapılandırma iletişim kutusu düğmelerine bağlayalım.

Hala çalışıyorsa uygulamayı durdurun.
Dosya gezgininde Paylaşılan'ı genişletin. Ardından ConfigurePizzaDialog.razor seçin.

@code bloğuna iki yeni parametre ekleyin:

@code {
   [Parameter] public Pizza Pizza { get; set; }
   [Parameter] public EventCallback OnCancel { get; set; }
   [Parameter] public EventCallback OnConfirm { get; set; }
}
`` `

Düğmelerde artık @onclick yönergeleri eklenebilir. İletişim kutusu düğmelerinin geçerli kodunu şu işaretlemeyle değiştirin:

<div class="dialog-buttons">
    <button class="btn btn-secondary mr-auto" @onclick="OnCancel">Cancel</button>
    <span class="mr-center">
        Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>
    </span>
    <button class="btn btn-success ml-auto" @onclick="OnConfirm">Order ></button>
</div>

Son adım, siparişleri iptal etmek ve onaylamak için OrderState yöntemlerini geçirmektir. Dosya gezgininde Sayfalar'ı genişletin. Ardından Index.razor'ı seçin.

ConfigurePizzaDialog bileşenine yapılan çağrının kodunu değiştirin:

<ConfigurePizzaDialog
    Pizza="OrderState.ConfiguringPizza"
    OnCancel="OrderState.CancelConfigurePizzaDialog"
    OnConfirm="OrderState.ConfirmConfigurePizzaDialog" />

F5'i veya Çalıştır'ı seçin. Ardından Hata Ayıklamayı Başlat seçin.

Uygulama artık müşterilerin sipariş iptal etmesine veya siparişe yapılandırılmış pizza eklemesine izin vermelidir. Pizza boyutu değiştirildiğinde geçerli siparişi göstermenin veya fiyatları güncelleştirmenin hiçbir yolu yoktur. Bu özellikleri sonraki alıştırmada ekleyeceğiz.

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?