|آموزش مرجع Blazor Framework|آموزش اتصال داده دو طرفه در فریمورک Blazor|

اتصال داده دو طرفه در فریمورک Blazor

فریمورک بلیزر

با استفاده از خصیصه bind از اتصال داده دو طرفه نیز پشتیبانی می کند. در حال حاظر،

فریم ورک بلیزر

تنها از انواع داده string, int, DateTime, Enum, bool برای اتصال داده دو طرفه پشتیبانی می کند.

اگر به انواع دیگری (مانند decimal) نیاز داشته باشید، باید از یک نوع پشتیبانی شده، getter و setter ارائه دهید. مثال زیر سناریو های مختلفی از اتصال دو طرفه را ارائه میکند.

@ page "/two-way-data-binding"

< p>
    Enter your name: < input type="text" bind="@Name" />< br />

    What is your age? < input type="number" bind="@Age" />< br />

    What is your salery? < input type="number" bind="@Salary" />< br />



    What is your birthday (culture-invariant default format)? < input type="text" bind="@Birthday" />< br />

    What is your birthday (German date format)? < input type="text" bind="@Birthday" format-value="dd.MM.yyyy" />< br />



    Are you a manager? < input type="checkbox" bind="@IsManager" />< br />



                    < select id="select-box" bind="@ TypeOfEmployee">
                    < option value=@ EmployeeType.Employee>@ EmployeeType.Employee.ToString()< /option>
                    < option value=@ EmployeeType.Contractor>@ EmployeeType.Contractor.ToString()< /option>
                    < option value=@ EmployeeType.Intern>@ EmployeeType.Intern.ToString()< /option>
    < /select>
< /p>

< h2>Hello, @ Name!< /h2>

< p>You are @ Age years old. You are born on the @ Birthday. You are @ TypeOfEmployee.< /p>

@ if (IsManager)
{
                    < p>You are a manager!< /p>
}                     
                      
                    < p>Your salary is $ @ Salary< /p>

@ functions {
private enum EmployeeType { Employee, Contractor, Intern };
private EmployeeType TypeOfEmployee { get; set; } = EmployeeType.Employee;

private string Name { get; set; } = "Mark";
private bool IsManager { get; set; } = true;
private static int Age { get; set; } = 26;
public DateTime Birthday { get; set; } = DateTime.Today.AddYears(-Age);

public decimal Salary { get; set; } = (decimal) 2800.5;
}