Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
64 lines (32 sloc) 3.69 KB

Blazor (13)

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.

  • Hello World

    The smallest Blazor app you can create.

  • Component

    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.

  • Component Two - Reference and Call

    This sample shows how to refer to a component using ref property 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 ref without providing corresponding property at functions, the compilation will fail.

  • Component Three - Child Content

    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 ChildContent of type RenderFragment. The parameter name must be ChildContent otherwise it won't work.

  • Component Four - Handling Custom Event from Component

    This sample shows how to raise a custom event from a component and how to handle them using EventCallback<>.

  • Component Five - Inherit from a ComponentBase class

    This sample shows how to inherit from a ComponentBase class. 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.

  • Component Six - When to call StateHasChanged

    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.

  • Component Seven - Plain C#

    This sample demonstrates that you can use and organize your C# classes like in an ordinary C# app.

  • Component Eight - Interactions between two components

    This samples demonstrates the two way (currently) of facilitating interaction between two components.

  • Component Nine - Data binding from Child Component to Parent

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

  • Component Ten - Data binding from Child Component to Parent on Collection

    Similar to Component Nine except that this time the property is a List<int> instead of an int.

  • Data Binding - Form

    Show an example of two day databinding to form element input=text, textarea. input=checkbox, and select.

  • Date Binding - EditForm

    Show an example of EditForm and its 6 input controls, including form validation.

You can’t perform that action at this time.