Blazor Bind

Posted on  by admin
-->

This article explains data binding features for Razor components and Document Object Model (DOM) elements in Blazor apps.

Three things that you will usually find yourself using on every Blazor page, Binding, Events, and Parameters, will be covered here.

To demonstrate these, we will build a series of pages including a few that will allow a user to build and edit a list of To Do items.

  • Create a new Server Side Blazor project called BindingEventsParameters. When the project opens in Visual Studio, right-click on the Pages folder and select Add then New Item….
  • Select the Razor Component template, name the page OneWayBinding.razor, and click the Add button.

The page will display. Add the following line to the top of the page, to implement routing for the control:.

The final code should look like this:.

In the Shared folder, open the NavMenu.razor page. Add the following to the menu control:. Hit F5 to run the project…. When the application opens in the web browser, you can click the OneWay Binding link in the navigation, and the OneWayBinding.razor control will display.

In Visual Studio, select Shift+F5 to stop the application. Binding allows you to set and alter a value in one part of your code, and have it display in another part of your code. For example, you can create a property in the processing logic of a control, and display the value of that property in the User Interface (UI) markup of the control. This is called binding and it is achieved using the @bind attribute.

Alter the code of the OneWayBinding.razor control to the following:.

When we run the application, we see that the value we set for the Title variable displays in the UI. Setting a value for a variable or a property, and simply consuming it is called one way binding. To demonstrate two way binding, create a new page called TwoWayBinding.razor, and add a link to it in the NavMenu.razor control. Use the following code for the TwoWayBinding.razor control:. When we run the project, and navigate to the control, we see the SliderValue is set to zero using one way binding. Stop the project and add the following code to the UI markup:. This adds a slider control to the page that is bound to the SliderValue variable.

However, this time we are using the @bind-value attribute. Using this allows us to specify an an event parameter for the @bind-value attribute. In this case we have selected the oninput parameter that will update the SliderValue variable with the current slider value each time the slider value changes. If we did not use the oninput parameter, the SliderValue variable would not update until we clicked away from the slider control. When we run the project, we can move the slider bound to the SliderValue variable, and the SliderValue variable is updated immediately and displayed.

When we manipulate a variable or property, through a UI control, rather than just consuming it, we are implementing two way binding, because the the consumer is updating the source.

Let’s take what we learned so far about binding and create the classic to do application.

  • Create a new folder called Classes and add a class called TaskItem.cs using the following code:.
  • Next, add a new page called ToDoPage.razor to the Pages folder (also add a link to the control in the NavMenu.razor page). Change all the code in the ToDoPage.razor control to the following:.

Notifying parent components when state changes

When we run the application we see that a Task will be displayed using one way binding. Now, add the following UI markup:. Add the following code to implement the AddTask method:. When we run the application, we can enter a new Task and click the Add Task button.

The Task is then added to the Tasks collection, and automatically displayed in the list.

The following diagram shows how the binding works:. We can also add a Delete button to list that will pass the current Task to a RemoveTask method:. We then add code to implement the RemoveTask method:.

Next Steps

When we run the application, we can click the [Delete] button next to a Task…. …and the Task will be removed for the collection, and the list will be automatically updated.

  • Finally, we can add the following UI markup to the page:. This will automatically display a count of the Tasks, and track the number of Tasks marked completed. This demonstrates how bindings to properties are automatically updated in the UI whenever Blazor detects there are changes to the values.
  • Parameters allow one control to set the value of properties on another control. Create a new page called ToDoComponent.razor using the following code:. Note that we did not define a @page attribute because we do not need routing to this component.

This component will be directly consumed by a parent component. Change the UI markup of the ToDo.razor page to the following:.

  • When we run the application we see that the Tasks collection, from the parent component (ToDo.razor), is passed as a parameter and displayed in the list in the child component (ToDoComponent.razor).
  • This is essentially binding as we explored earlier, however it is one way binding.

While parameters allow us to pass values from a parent control to a child control, it will not allow us to invoke a method on a child control. One method that will allow this, is to use the @ref attribute. Add the following code to the ToDoComponent.razor page:.

Not the answer you're looking for? Browse other questions tagged c#blazor or ask your own question.

Add the following property to the ToDoPage.razor control:. Change the AddTask method to the following:. Next, implement the @ref attribute on the ToDoComponent in the UI markup, so it now reads:.

Finally, add an input control and a button to add new Tasks:. When we run the application we are able to add Tasks from the parent control by calling the method on the child control.

The diagram above illustrates how a reference is made on the ToDoComponent control, using the @ref attribute, and how that reference is then used to call the AddNewTask method on that control.

We have explored various methods to communicate from a parent component to a child component. Events, using EventCallback, provides a method that allows a child component to communicate with a parent component. Add the following code to ToDoComponent.razor:. Also, add a delete button (that will appear next to each list item), that will call the RemoveTask method (passing the current Task):.

When we look at ToDoPage.razor we see we already have this method to remove a Task from the collection:. Finally, we need to update the ToDoComponent tag to indicate that the RemoveTask method is to be invoked when the RemovedTaskChanged event handler is invoked in the child control (ToDoComponent.razor):. When we run the application, we can now click the [Delete] button…. … to remove a Task from the list. The diagram above shows how the child component raises the event by calling InvokeAsync passing the currently selected Task as a parameter. The final example will demonstrate cascading parameters.

  • A cascading parameter is different from a normal parameter in that the value of the cascading parameter will pass to all child controls that declare the parameter.
  • Add the following code to ToDoPage.razor:. Add the following UI markup to the page, to display the currently selected color and a dropdown to allow it to be changed:. Finally, surround the ToDoComponent tag with the CascadingValue tag, to name the cascading parameterThemeColor, and to pass the SelectedColor variable as its value:.
  • In ToDoComponent.razor add the following code:. Next, alter the label in the UI markup to the following, to allow the color to be set by the value of ThemeColorParameter:. We can run the application…. … change the value of the cascading parameter…. … and the value is immediately updated on allchild components that declare and implement the parameter.

Option 2 (recomended): Through inheritance from InputBase

Note: If you’ve not done so, perform the steps in One-way binding before continuing with this section. So far we have a page with an embedded component, and part of our component’s state is passed from its host view (the Counter page) in the form of a Parameter named CurrentCounterValue.

But what if we also want the component to be able to update the state that is passed into it?

If you are not already familiar with the EventCallback class, read Component events. Ideally, you should also be familiar with using Component directives, and to gain a deeper understanding of binding variations you may also wish to familiarise yourself with Browser DOM events.

Start as we did with the Counter page, by adding a button with an onclick event that updates the value of CurrentCounterValue.

The problem with this is that by default [Parameter] bindings are one-way only. So the value of Page.counter will be pushed into MyFirstComponent.CurrentCounterValue by the fact that the parent view explicitly sets it:. But when the property within MyFirstComponent is altered, the component sets its local copy of the state and not the state of its parent view.

Focus an element

Not only that, but the next time the parent’s state is updated, it will push that value into MyFirstComponent.CurrentCounterValue and replace the value we have modified. To fix this, we need to tell Blazor that the consuming page wants to use two-way binding. Instead of simply setting the CurrentCounterValue we now tell Blazor to bind (i.e.

two-way bind) to the value instead. To use two-way binding on a parameter simply prefix the HTML attribute with the text @bind-.

Data Bindings

This tells Blazor it should not only push changes to the component, but should also observe the component for any changes and update its own state accordingly.

Note: The @ symbol is needed when assigning code values (rather than constants) to parameters. Previously our mark-up contained [email protected], but once we prepend the parameter name with @bind- the @ symbol before currentCount becomes unnecessary.

Running the app now will show the following error in the browser’s console window. WASM: System.InvalidOperationException: Object of type ‘TwoWayBinding.Client.Components.MyFirstComponent’ does not have a property matching the name ‘CurrentCounterValueChanged’.

Two-way binding in Blazor uses a naming convention. If we want to bind to a property named SomeProperty, then we need an event call-back named SomeProperyChanged.

This call-back must be invoked any time the component updates SomeProperty. To implement this in MyFirstComponent. Add the CurrentCounterValueChanged event call-back. Change the UpdateCurrentCounterValue method from void to async Task. After incrementing CurrentCounterValue invoke CurrentCounterValueChanged to notify the consumer that the state has altered. If we open the Counter.razor.gs file in obj\Debug\netstandard2.0\Razor\Pages we can see the BuildRenderTree method looks like this:.

Note: The source code has been reformatted, and name spaces replaced with … for brevity. Line 5 performs the one-way binding from Counter.currentCount into MyFirstComponent.CurrentCounterValue.

Line 15 updates Counter.currentCount whenever MyFirstComponent.CurrentCounterValueChanged is executed.

Modified4 months ago. I want to create custom input, so I created this component:. Then the usage:. When I debug MyInputComponent, I found the value as I have entered.

But when I submit the form, the value is null. What is missing? 106106 bronze badges. 62211 gold badge1010 silver badges2121 bronze badges. 1010 silver badges2121 bronze badges. Quoting Blazor docs:. Component parameters. Binding recognizes component parameters, where @bind-{property} can bind a property value across components.

The child component MyInputComponent:.

You should to raise binding changes from children component through EventCallback BindingValueChanged. I chose BindingValue and BindingValueChanged as identifiers, but, you can use just Value and ValueChanged. Then will be: .

Try it at BlazorFiddle. (Edited 2022) Full documented now at: Binding with component parameters.

  • Edited: See Option 2 below for a clean solution:. If you want to put your component inside an EditForm and deal with validations, or take other actions using the onchange event, you should to raise EditContext.NotifyFieldChanged.
  • You have 2 options to do it. You can get EditContext from CascadeParameter and invoke NotifyFieldChanged by hand:. You can inherit from InputBase and just implement TryParseValueFromString.
  • InputBase will do the work for you,When you inherit from InputBase you have Value, ValueChanged, EditContext, etc. 77 gold badges103103 silver badges165165 bronze badges.

165165 bronze badges. In general the accepted answer is correct and works fine.

Only thing to add is the code example uses the default name convention based Events e.g.: {PropertyName}Changed. However you can override this naming [email protected]{Property}:event="{EventCallbackName}".

22 gold badges3636 silver badges5353 bronze badges.

5353 bronze badges. This article explains the different ways to provide data to a FileManager component and the properties related to data binding. Reviewing this article will explain the basics of how you can describe the hierarchy of items in your data source to the treeview component so they can render. For details on Value Binding and Data Binding, and the differences between them, see the Value Binding vs Data Binding article.

The available (bindable) features of a FileManager items.

How to match fields in the model with the FileManager item data bindings. There are two modes of providing data to a FileManager, and they both use the items' features. Once you are familiar with the current article, choose the data binding more you wish to use:. Flat data - a collection of self-referencing items with parent-child relationships See the Id and ParentId settings. Hierarchical data - each item holds its children in a nested property. See the Directories setting. The FileManager has features that map to properties in the model.

The following model uses property names that will work automatically, with no additional FileManager configuration:. The above model properties have the following meaning for the FileManager:.

All FileManager item features map to model properties.

Event arguments

The properties of a treeview item match directly to a field of the model the treeview is bound to.

  • You provide that relationship by providing the name of the field from which the corresponding information is to be taken.
  • To do this, in the main TelerikFileManager tag, use the parameters described below:.

Do not use ParentId with hierarhical data. This will confuse the FileManager that it is bound to flat data and the component may not render any items.

If the model must have a ParentId property, set ParentIdField to a non-existent property.

Learn the different ways to provide data to a TreeView:.

Use hierarchical data - each item holds its children in a nested property.

Specify delegate event handlers in Razor component markup with @on{DOM EVENT}="{DELEGATE}" Razor syntax:. The {DOM EVENT} placeholder is a Document Object Model (DOM) event (for example, click). The {DELEGATE} placeholder is the C# delegate event handler. For event handling:. Asynchronous delegate event handlers that return a Task are supported.

Delegate event handlers automatically trigger a UI render, so there's no need to manually call StateHasChanged.

Exceptions are logged. The following code:. Calls the UpdateHeading method when the button is selected in the UI. Calls the CheckChanged method when the checkbox is changed in the UI.

FileManager Item Features

In the following example, UpdateHeading:. Is called asynchronously when the button is selected. Waits two seconds before updating the heading.

For events that support an event argument type, specifying an event parameter in the event method definition is only necessary if the event type is used in the method.

  • In the following example, MouseEventArgs is used in the ReportPointerLocation method to set message text that reports the mouse coordinates when the user selects a button in the UI.
  • Supported EventArgs are shown in the following table. For more information, see the following resources:.

Documentation links to the ASP.NET Core reference source load the repository's main branch, which represents the product unit's current development for the next release of ASP.NET Core.

To select the branch for a different release, use the Switch branches or tags dropdown list to select the branch.

For example, select the release/6.0 branch for the ASP.NET Core 6.0 release. MDN web docs: GlobalEventHandlers: Includes information on which HTML elements support each DOM event. Blazor supports custom event arguments, which enable you to pass arbitrary data to .NET event handlers with custom events.

Custom events with custom event arguments are generally enabled with the following steps. In JavaScript, define a function for building the custom event argument object from the source event:. Register the custom event with the preceding handler in wwwroot/index.html (Blazor WebAssembly) or Pages/_Layout.cshtml (Blazor Server) immediately after the Blazor