Blazor Tutorial One-way Data Binding
In other frameworks such as Angular, one-way data binding is also known as interpolation.
- In one-way binding, we need to pass property or variable name along with
@, i.e., @Title (here Title is either the property or variable). - In the following example, we have done one-way binding with different variables.
@page "/one-way-data-binding" <!-- Use this button to trigger changes in the source values --> <button onclick="@ChangeValues">Change values</button> <p>Counter: @Count</p> @if (ShowWarning) { <p style="background-color: red; padding: 5px">Warning!</p> } <p style="background-color: @Background; color=white; padding: 5px">Notification</p> <ul> @foreach (var number in Numbers) { <li>@number</li> } </ul> @functions { private int Count { get; set; } = 0; private bool ShowWarning { get; set; } = true; private string Background { get; set; } = "red"; private List<int> Numbers { get; set; } = new List<int> { 1, 2, 3 }; private void ChangeValues() { Count++; ShowWarning = !ShowWarning; Background = Background == "red" ? "green" : "red"; Numbers.Add(Numbers.Max() + 1); } }
