Привязка моделей

Последнее обновление: 30.11.2023

Вместо работы с данными как с отдельными значениями мы можем работать с данными как с объектами сложных типов. Например, пусть у нас в проекте есть класс Person и два компонента - корневой компонент App.razor и вложенный компонент Home.razor:

Привязка свойств компонентов Blazor к свойствам классов C#

В классе Person определим два свойства - Name и Age:

public class Person
{
    public string Name { get; set; } = "";
    public int Age { get; set; }
}

В компоненте App выводим компонент Home:

@page "/"

<!DOCTYPE html>
<html>
<head>
    <title>METANIT.COM</title>
    <meta charset="utf-8" />
</head>
<body>
    <Home />
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

А в компоненте Home выполняем привязку объекта Person к элементам формы:

@using Microsoft.AspNetCore.Components.Web
@rendermode RenderMode.InteractiveServer

<h2>Person</h2>
<div>
    <p>
        Name:<br />
        <input @bind-value="person.Name" />
    </p>
    <p>
        Age:<br />
        <input type="number" @bind-value="person.Age" />
    </p>
    <button @onclick="Submit">Send</button>
</div>
<div>
<p>Name @person.Name</p>
<p>Age: @person.Age</p>
</div>
@code {
    Person person = new();

    void Submit()
    {
        Console.WriteLine($"{person.Name} - {person.Age}");
    }
}

В компоненте App определен объект Person, свойства Name и Age которого привязаны к полям ввода. Для отслеживания ввода выводим автоматически значения этих свойств на страницу, а по нажатию на кнопку выводим их на консоль.

Привязка свойств моделей к полям ввода в компонентах Blazor на C#

Подобным образом можно привязывать и другие элементы управления. Например, пусть класс Person определяет чуть больше свойств:

public class Person
{
    public string Name { get; set; } = "";
    public int Age { get; set; }
    public DateTime Day { get; set;} = DateTime.Now;
    public bool Working { get; set; }
    public string Subject { get; set; } = "";
    public string[] Courses { get; set; } = [];
}

В компоненте Home определим форму ввода для эти свойств:

@using Microsoft.AspNetCore.Components.Web
@rendermode RenderMode.InteractiveServer

<h2>Person</h2>
<div>
    <p>
        Name:<br />
        <input @bind="person.Name" />
    </p>
    <p>
        Age:<br />
        <input type="number" @bind="person.Age" />
    </p>
    <p>
        Date:<br />
        <input type="date" @bind="person.Day" />
    </p>
    <p>
        Working:<br />
        <input type="checkbox" @bind="person.Working" />
    </p>
    <p>
        Subject:<br />
        <input type="radio" name="subject" @onchange='@(()=>person.Subject = "Math")' />Math <br />
        <input type="radio" name="subject" @onchange='@(()=>person.Subject = "Programming")' />Programming
    </p>
    <p>
        Courses:<br />
        <select multiple @bind="person.Courses">
            <option value="C#">C#</option>
            <option value="JavaScript">JavaScript</option>
            <option value="C++">C++</option>
        </select>
    </p>
</div>
<hr />
<div>
    <p>Name @person.Name</p>
    <p>Age: @person.Age</p>
    <p>Day: @person.Day.ToShortDateString()</p>
    <p>Working: @person.Working</p>
    <p>Subject: @person.Subject</p>
    <p>Courses: @string.Join(", ", person.Courses)</p>
</div>
@code {
    Person person = new();
}
Привязка классов к формам ввода в приложении Blazor на C#

Тут надо отметить, что для привязки свойства к элементу <select> с атрибутом multiple это свойство должно представлять массив (как в примере выше).

В случае с радиокнопками (<input type="radio">) проверяем выбранную кнопку и в обработчике onchange устанавливаем значение для свойства Subject.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850