Component with Parameters. BlazorServer
Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті
Привіт!
Подивимось, як можна використовувати компоненти в 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>
для кожного студента.
1 коментар
Додати коментар Підписатись на коментаріВідписатись від коментарів