Using commands / property bindings in blazor

Bubba Jones 216 Reputation points
2022-07-02T08:51:15.69+00:00

I am now at a crossroads regarding what path I should follow when developing my app. I would very much like to develop a web app and mobile app in tandem, such that all the code I use, including code that is used to generate my views, bind elements to properties can used on all platforms including web. For this I thought of developing an app using maui-blazor, however it seems that blazor does not offer the more advanced features like binding commands to properties that I used in xamarin. In xamarin, for carouselView optimization I used some of xamarins more advanced features such as binding commands to properties such as in the example below:

myCarouselView.SetBinding(CarouselView.CurrentItemChangedCommandProperty, "ItemChangedCommand");  

The commands would then be tied to functions in my viewmodel with the corresponding logic contained therein.

I would then populate my view in C# as follows:

        myCarouselView.ItemTemplate = new DataTemplate(() =>  
        {  
            StackLayout rootStackLayout = new StackLayout  
            {  
                Children = { viewModel.GenerateViewContent() }  
            };  

            return rootStackLayout;  
        });  

It seems that none of the above, whether its the binding of view properties to commands, or dynamic creation of views could be translated to blazor and thus used to render razor views.

Is there a way, through MAUI, to use xamarins advanced binding features such that they work even on blazor?

Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,665 questions
.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,932 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Bruce (SqlWork.com) 71,511 Reputation points
    2022-07-02T19:11:43.737+00:00

    don't confuse Maui with Blazor. A Maui application can host a Blazor WebView Control, but Blazor is a web technology,

    Maui Blazor support consists of:

    A webview control. This displays the Blazor generated html and hosts the javascript used to render the Blazor component tree and generate events sent to the Blazor engine

    A Blazor engine (basically the WASM code in Blazor app), The Blazor engine builds the Blazor component tree and sends a copy to the javascript engine to render via virtual dom technology.

    The Blazor design is very similar to the react flow pattern. State is external to the component tree, and is passed as props (state properties in Blazor) to the components. Event callbacks can update the components state properties and call update state to cause a re-render (It is really one-way binding as calling change state will pass the binding values to the external state, and cause a rebuild of the component tree).


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.