Skip to content

Sample Blazor App demonstrating various data binding scenarios

Notifications You must be signed in to change notification settings

SQL-MisterMagoo/BlazorBinding

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

BlazorBinding

Sample Blazor App demonstrating various data binding scenarios

Simple Cascade

Demonstrates how CascadingValue is a one-way data transfer, which updates the subscriber but not the publisher.

Cascade With Callback

Demonstrates how you can add a Callback Action to update the CascadingValue from subscriber to publisher.

Simple Binding

Demonstrates the use of parameter binding, which is a one-way binding like the CascadingValue, but specific to the bound Component.

Simple Binding With Callback

Demonstrates how you can add a Callback Action to update the parent values from the child.

Value Binding

Demonstrates how the @bind-Value syntax works in a one-way mode, like simple binding. This is considered to be a bug by many

Value Binding With Callback

Demonstrates how you can update the parent from a child component by invoking the required ValueChanged Action.

Value Binding With Callback + Refresh

Demonstrates how you can ensure the parent knows a child component has updated data, and trigger a refresh.

Value Binding Class Object

Demonstrates how to two-way bind a list of objects with multiple properties.

The Problem With Clicks - "Propagation"

Demonstrates how events on standard html elements propagate in Blazor. This is very bad.

Using CascadingValue To Share A Global Component - Dialog

Demonstrates how to use CascadingValue to share a component from MainLayout so that it is globally accessible.

Autocomplete text input

Demonstrates how to perform autocomplete on a text input.

ViewModel Binding

Demonstrates a simple method to enable a page to bind a ViewModel that automatically hooks into StateHasChanged.

Summary

In all cases, some kind of callback action is required to notify the parent component of a change in the data. This is, in my opinion OK - as it gives me control of the data and UI - however, some people consider the manual intervention required to be a bug.

I have not included any examples of using "State" to achieve two way binding, although that is also possible, it would also require some kind of callback notification.

About

Sample Blazor App demonstrating various data binding scenarios

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published