Make sure you installed the latest .NET Core 3 SDK - Preview 6.
You will find samples for Blazor, a .NET application framework for Web Assembly here. To run the sample, simply type
dotnet watch run at the folder of each project. All these samples run on Blazor experimental release version 0.9. Make sure you pay attention which port Kestrel is running on.
The smallest Blazor app you can create.
This sample shows the simplest demonstration of a component (which is just a .cshtml file) that accept a string parameter. Notice that the folder name of the project is capitalized. That's due to this limitation e.g. the name of your folder is currently the name of the namespace used in a blazor app.
A component is represented by a
<componentname></componentname>in the markup.
This sample shows how to refer to a component using
refproperty and call a public method of the component. We use the method
this.StateHasChanged();to tell the component that its value has changed.
Side note: If you are using
refwithout providing corresponding property at
functions, the compilation will fail.
Implement a component that takes one or more child content e.g.
<parentcomponent><childcomponent1/><childcomponent2/><parentcomponent>and renders it.
You have to provide a parameter called
RenderFragment. The parameter name must be
ChildContentotherwise it won't work.
This sample shows how to raise a custom event from a component and how to handle them using
This sample shows how to inherit from a
ComponentBaseclass. This allows you to share common code across components. You can also use this technique to have a 'Code Behind' experience if that's your thing.
This sample shows different behaviors by the component depending on where you call the method from. Note: this is still tentative. It needs more exploration.
This sample demonstrates that you can use and organize your C# classes like in an ordinary C# app.
This samples demonstrates the two way (currently) of facilitating interaction between two components.
This samples demonstrates another way on how to pass data from Child component to Parent using two way data binding. The other way is using Custom Event (see Component Four).
Similar to Component Nine except that this time the property is a
List<int>instead of an
Show an example of two day databinding to form element
Show an example of
EditFormand its 6 input controls, including form validation.