Component with Parameters. BlazorServer

💡 Усі статті, обговорення, новини про .NET — в одному місці. Приєднуйтесь до .NET спільноти!

Привіт!

Подивимось, як можна використовувати компоненти в BlazorServer та передавати параметри в них. Для цього зробимо два класи Student i School, які будемо відображати на сторінці. Ці класи будуть в папці Models.

Model

using System.Collections.Generic;

namespace BlazorLearn.Models
{
    public class School
    {
        public string Name { get; set; }
        public List<Student> Students { get; set; }
    }
}

namespace BlazorLearn.Models
{
    public class Student
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

Razor Component

Тепер я створю razor-компоненти, які будуть відповідати за відображення даних. Для того, щоб Models був доступний для razor-компонентів, потрібно додати @using BlazorLearn.Models. Це можна зробити в _Imports.razor і тоді Models буде доступний для всіх компонентів, або ж додати в кожний компонент, якому потрібна модель.

Потрібно створити три компонента, перший для відображання інформації про студентів, наступний для інформації про школу, і останій буде сторінкою, яка включатиме два попередні компоненти.

Почнемо з компонента — SchoolComponent.

<div>
    <p>@SchoolInfo.Name</p>
    @StudentFragment
</div>

@code {
    [Parameter]
    public School SchoolInfo { get; set; }
    [Parameter]
    public RenderFragment StudentFragment { get; set; }
}

Кількість коду невелика, тому я все зберігатиму в .razor і не буду створювати окремий клас.

В code-секції я створю дві властивості, одна типу School яка буде містити інформацію про школу, а інший типу RenderFragment — ця властивість відбповідатиме за відображення інформації про студентів.

Наступний компонент — StudentComponent.

<div>
    <p>@StudentInfo.FirstName @StudentInfo.LastName</p>
</div>

@code {
    [Parameter]
    public Student StudentInfo { get; set; }
}

Цей компонент має одну властивість типу Student, в якій буде міститись інформація про студента. Html-частина буде відображати ім’я та прізвище.

І тепер залишився останій компонент, який водночас буде повноціною сторінкою.

@page "/school"

<div class="row">
    @foreach (var s in Schools)
    {
        <div class="col-4">
            <SchoolComponent SchoolInfo="@s">
                <StudentFragment>
                    @if (s.Students.Count > 0)
                    {
                        <h3>Students</h3>
                    }
                    @foreach (var stu in s.Students)
                    {
                        <StudentComponent StudentInfo="@stu"></StudentComponent>
                    }
                </StudentFragment>
            </SchoolComponent>
        </div>
    }
</div>

@code {
    public List<School> Schools { get; set; }

    public AllSchools()
    {
        Schools = new List<School>()
        {
            new School()
            {
                Name = "Hogwarts",
                Students = new List<Student>()
                {
                    new Student()
                    {
                        FirstName = "Harry",
                        LastName = "Potter"
                    },
                    new Student()
                    {
                        FirstName = "Ron",
                        LastName = "Weasley"
                    }
                }
            },
            new School()
            {
                Name = "EmptySchool",
                Students = new List<Student>()
            }
        };
    }
}

Коду тут більше, ніж у попередніх компонентах, тому є сенс винести його в окремий клас. Але я поки що залишу його тут.

У секції code створюється одна властивість типу List<School></cde> і в конструкторі я додам дані в цей список. Html-частина тут цікавіша, починається вона з <code>@page "/school" і це дай можливість відкрити в браузері ендпоін /school і потрапити на цю сторінку. Далі йде рендер компонентів. Щоб включити компонент на сторінку достатньо просто вказати <SchoolComponent></SchoolComponent>. Оскільки в нас SchoolComponent приймає властивість SchoolInfo, то я можу його передати за допомогою SchoolInfo=. Але це не стосується StudentFragment властивості, вона передається по іншому <StudentFragment></StudentFragment>. В середині нього я відображаю <h3>Students</h3> для кожної школи, якщо s.Students.Count більше 0. І далі йду циклом по студентах і відображаю компонент <StudentComponent StudentInfo="@stu"></StudentComponent> для кожного студента.