https://github.com/SQL-MisterMagoo/BlazorBinding

Sample Blazor App demonstrating various data binding scenarios
https://github.com/SQL-MisterMagoo/BlazorBinding

Last synced: 19 days ago
JSON representation

Sample Blazor App demonstrating various data binding scenarios

• Host: GitHub
• URL: https://github.com/SQL-MisterMagoo/BlazorBinding
• Owner: SQL-MisterMagoo
• Created: 2018-11-27T01:51:59.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2020-06-15T16:16:33.000Z (over 4 years ago)
• Last Synced: 2024-07-31T15:02:27.564Z (4 months ago)
• Language: HTML
• Size: 550 KB
• Stars: 26
• Watchers: 6
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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.