Hello!

Let’s see how you can use components in BlazorServer and pass parameters to them. To do this, make two classes Student and School which will be displayed on the page. These classes will be in the Models folder.

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

Now I will create razor components that will be responsible for displaying the data. In order for Models to be available for razor components you need to add @using BlazorLearn.Models. This can be added to _Imports.razor then Models will be available for all components or add to each component that needs a model.

You need to create three components, first will display information about students, the next will display information about the school and the last one will be responsible to combine both previous models.

Let’s start with the component - SchoolComponent

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

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

The amount of code is not so large, so I will store everything in .razor file sand will not create a separate class. In the code section, I create two properties, one of type School which will contain information about the school and the other of type RenderFragment this property will be responsible for displaying information about students.

The next component is StudentComponent

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

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

This component has one property of type Student which will contain information about the student. The Html part will display the first and last name.

And now there is the last component that will also be a html page.

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

There is more code here than in the previous components, so it makes sense to make it a separate class. But I’ll leave it here for now. In the code section one property of type List <School> is created and in the constructor I add data to this list.

The Html part is more interesting, it starts with @page "/school" and it allows to open in a browser endpoint /school and get to this page. Next is the rendering of components. To include a component on a page, simply specify <SchoolComponent></SchoolComponent>. Since our SchoolComponent accepts the SchoolInfo property, I can pass it as SchoolInfo=. But this does not apply to the StudentFragment property, it is passed as <StudentFragment></StudentFragment>. Inside it, I display <h3>Students</h3> for each school if s.Students.Count is greater than 0. And then I cycle through the students and display the component <StudentComponent StudentInfo="@stu"></StudentComponent> for each student.

Students