blazor
  1. blazor-one-way-data-binding
PreviousNext

Blazor One-way Data Binding

Blazor is a programming framework for building web applications using C# instead of JavaScript. One-way data binding is a feature in Blazor that allows you to bind a value from the component's code to the component's UI without the need for an event-based mechanism.

Syntax

The syntax for one-way data binding in Blazor is as follows:

<input type="text" @bind="Value" />

In this example, Value is a property in the code that is bound to the input element on the UI.

Example

Here is an example of one-way data binding in Blazor:

@page "/one-way-binding"

<h1>One-way Data Binding Example</h1>

<div>
    <input type="text" @bind="Value" />
</div>

@code {
    private string Value { get; set; }
}

Output

The output of the above example will be a textbox on the UI, where the user can input text. The value of the textbox will be bound to the Value property in the code.

Explanation

One-way data binding in Blazor uses the @bind directive to bind a value from the component's code to the component's UI. When the user interacts with the UI, the value is updated in the code, but changes in the code do not automatically update the UI.

Use

One-way data binding is useful for scenarios where you need to update the UI based on user input, but you don't need to update the code based on UI changes.

Important Points

  • One-way data binding is only supported for certain HTML elements.
  • One-way data binding does not update the UI automatically when the code changes.

Summary

One-way data binding in Blazor allows you to bind a value from the component's code to the component's UI without the need for an event-based mechanism. It is useful for scenarios where you need to update the UI based on user input, but you don't need to update the code based on UI changes.

Code-Behind FilesTwo-way Data Binding
Published on: