Ćwiczenie — Dodawanie składnika

Ukończone

W tym ćwiczeniu dodasz składnik Razor do strony głównej aplikacji.

Dodawanie składnika Counter do strony głównej

1. Otwórz plik Components/Pages/Home.razor.

2. Counter Dodaj składnik do strony, dodając <Counter /> element na końcu Home.razor pliku.

   @page "/"
   
   <PageTitle>Home</PageTitle>
   
   <h1>Hello, world!</h1>
   
   Welcome to your new app.
   
   <Counter />
   

3. Zastosuj zmianę, uruchamiając ponownie aplikację lub używając przeładowywania na gorąco. Składnik Counter jest wyświetlany na stronie głównej.

   

Modyfikowanie składnika

Zdefiniuj parametr w składniku, Counter aby określić, ile zwiększa się za pomocą każdego kliknięcia przycisku.

1. Dodaj właściwość publiczną dla IncrementAmount atrybutu [Parameter] .

2. Zmień metodę IncrementAmount , IncrementCount aby użyć wartości podczas przyrostowania wartości currentCount.

   Zaktualizowany kod w pliku Counter.razor powinien wyglądać następująco:

   @page "/counter"
   @rendermode InteractiveServer
   
   <PageTitle>Counter</PageTitle>
   
   <h1>Counter</h1>
   
   <p role="status">Current count: @currentCount</p>
   
   <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
   
   @code {
       private int currentCount = 0;
   
       [Parameter]
       public int IncrementAmount { get; set; } = 1;
   
       private void IncrementCount()
       {
           currentCount += IncrementAmount;
       }
   }
   

3. W Home.razorpliku zaktualizuj element , <Counter /> aby dodać IncrementAmount atrybut, który zmienia wartość przyrostu na 10, jak pokazano w ostatnim wierszu w następującym kodzie:

   @page "/"
   
   <h1>Hello, world!</h1>
   
   Welcome to your new app.
   
   <Counter IncrementAmount="10" />
   

4. Zastosuj zmiany do uruchomionej aplikacji.

   Składnik Home ma teraz własny licznik, który zwiększa się o 10 za każdym razem, gdy jest zaznaczony przycisk Kliknij mnie , jak pokazano na poniższej ilustracji.

   

   Składnik Counter w dalszym ciągu /counter zwiększa się o jeden.