1)

@* commentaires * @

2)

@{

String teststring= ¨tst¨ ;

<p>@teststring</p>

3)

@{

int testing = 0;

@if (testint != 0)

<p>Is not equal to zero</p>

4)

@for (int i = 0; I < 5; i++)

<p>@i</p>

}
5)

<p>test</p>

@code {

  int a;

  double b = 2.5;

  void testmethod() {

  }

Blazor Binds

Elements where values can be bound to a variable are as follows:

 Input (except for file type)

 Textarea
 Select

@code {

  string teststring = "test value";

  bool testbool = true;

<input type="checkbox" @bind="@testbool">

<input @bind="@teststring">

<textarea @bind="@teststring"></textarea>

2)

Avec oninput les caractères apparaissent au fur et à mesure qu’ils s’écrivent tandis qu’avec onchange
apparait lorsqu’il perd le focus.
<p><input type="text" @bind:event="oninput" @bind="displaytext"  /></p>

<p>@displaytext</p>

@code {

    string displaytext = "";

3)

The code sections are meant to contain your code for the client side

a)

<p>@testvar</p>

@code {

  string testvar = "test variable";

b)

<p>@testvar</p>

<p><button @onclick="@testmethod">change</button></p>

@code {

  string testvar = "test variable";

  void testmethod() {

    testvar = "test";

  }

The method simply changes the value for the variable, and in turn what is displayed in the paragraph tag
is also changed

c)
<p>@testvar</p>
<p><input @bind="@testvar"></p>
<p><button @onclick="@(() => testmethod())">change</button></p>
@code {
  string testvar = "nothing to display";
  void testmethod()
  {
    testvar = "test value";
  }
}

an input tag is bound to the testvar variable , so whenever the input tag value changes, the variable will
also change, and therefore the display in the paragraph tag also changes.

d)

<p>@testvar</p>

<p><input @bind="@testvar"></p>

<p><button @onclick="@( () => testmethod("test var"))">change</button></p>

@code {

  string testvar = "nothing to display";

  void testmethod(string testparam)

  {

    testvar = testparam;

  }

Method with Parameters

e)

<p>@testvar</p>

<p><input @bind="@testvar" /></p>

<p><button @onclick="@(async () => await testmethod())">change</button></p>

@code {

  string testvar = "nothing to display";

  async Task testmethod()

  {

    testvar = "test value";

  }

}
Listing 2-13Asynchronous Task

e)

<p><button @onclick="@(() => { buttonclicked = true; })">Click button</button></p>

@code {

  bool buttonclicked = false;

Listing 2-14Direct Use of Event

f)

<p>@testvar</p>

<p><input @oninput="@((args) => { testvar = args.Value.ToString(); })" /></p>

@code {

  string testvar = "";

Page and Component Lifecycle Events

The first and likely most common event is OnInitializedAsync (Listing 2-16) . This event occurs before the
page gets rendered. If you have to pull data and display it without user input, this is where such
procedures should go.

@page "/"

<h1>Index page</h1>

@code {

protected override Task OnInitializedAsync()

    {

        return base.OnInitializedAsync();

    }

  }

After the page gets rendered, the OnAfterRenderAsync event occurs (Listing 2-17). This can be used for
procedures that require UI elements to be fully loaded.
protected override Task OnAfterRenderAsync(bool firstRender)

    {

        return base.OnAfterRenderAsync(firstRender);

    }

This event will also recur if there are any updates to the page or
if StateHasChanged() has been invoked (covered later in the book). Therefore, if you
want to use it only on the initial render, you can check if the Boolean value is true.

Finally, OnParametersSetAsync (Listing 2-18) will occur when a new parameter is set. You

will learn more about parameters later in the book; this event mostly applies to components.
protected override Task OnParametersSetAsync()
    {
        return base.OnParametersSetAsync();
    }

Blazor Components and Navigation

In general, a page in Blazor is a .razor file that contains your code

a)

@page "/page1"

<p>page 1</p>

Listing 3-1Contents of Page1.razor

b)
@page "/"
<p><a href="/page1">navigate to page 1</a></p>
Listing 3-2Contents of Index.razor
c)

@page "/page1/{ExampleParam}"

<p>page 1</p>

@code {

[Parameter]

Public string ExampleParam { get; set; }

}

Listing 3-3Contents of Page1.razor with Parameter