Improve readability of Blazor Event Handling doc

aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample1.razor

@@ -0,0 +1,36 @@
+@page "/event-handler-example-1"
+
+<h1>@currentHeading</h1>
+
+<p>
+    <label>
+        New title
+        <input @bind="newHeading" />
+    </label>
+    <button @onclick="UpdateHeading">
+        Update heading
+    </button>
+</p>
+
+<p>
+    <label>
+        <input type="checkbox" @onchange="CheckChanged" />
+        @checkedMessage
+    </label>
+</p>
+
+@code {
+    private string currentHeading = "Initial heading";
+    private string newHeading;
+    private string checkedMessage = "Not changed yet";
+
+    private void UpdateHeading()
+    {
+        currentHeading = $"{newHeading}!!!";
+    }
+
+    private void CheckChanged()
+    {
+        checkedMessage = $"Last changed at {DateTime.Now}";
+    }
+}

aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample2.razor

@@ -0,0 +1,25 @@
+@page "/event-handler-example-2"
+
+<h1>@currentHeading</h1>
+
+<p>
+    <label>
+        New title
+        <input @bind="newHeading" />
+    </label>
+    <button @onclick="UpdateHeading">
+        Update heading
+    </button>
+</p>
+
+@code {
+    private string currentHeading = "Initial heading";
+    private string newHeading;
+
+    private async Task UpdateHeading()
+    {
+        await Task.Delay(2000);
+
+        currentHeading = $"{newHeading}!!!";
+    }
+}

aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample3.razor

@@ -0,0 +1,21 @@
+@page "/event-handler-example-3"
+
+@for (var i = 0; i < 4; i++)
+{
+    <p>
+        <button @onclick="ReportPointerLocation">
+            Where's my mouse pointer for this button?
+        </button>
+    </p>
+}
+
+<p>@mousePointerMessage</p>
+
+@code {
+    private string mousePointerMessage;
+
+    private void ReportPointerLocation(MouseEventArgs e)
+    {
+        mousePointerMessage = $"Mouse coordinates: {e.ScreenX}:{e.ScreenY}";
+    }
+}

aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample4.razor

@@ -0,0 +1,13 @@
+@page "/event-handler-example-4"
+
+<h1>@heading</h1>
+
+<p>
+    <button @onclick="@(e => heading = "New heading!!!")">
+        Update heading
+    </button>
+</p>
+
+@code {
+    private string heading = "Initial heading";
+}

aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample5.razor

@@ -0,0 +1,23 @@
+@page "/event-handler-example-5"
+
+<h1>@heading</h1>
+
+@for (var i = 1; i < 4; i++)
+{
+    var buttonNumber = i;
+
+    <p>
+        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
+            Button #@i
+        </button>
+    </p>
+}
+
+@code {
+    private string heading = "Select a button to learn its position";
+
+    private void UpdateHeading(MouseEventArgs e, int buttonNumber)
+    {
+        heading = $"Selected #{buttonNumber} at {e.ClientX}:{e.ClientY}";
+    }
+}

aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample6.razor

@@ -0,0 +1,17 @@
+@page "/event-handler-example-6"
+
+<p>
+    <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />
+</p>
+
+@code {
+    private int count = 0;
+
+    private void KeyHandler(KeyboardEventArgs e)
+    {
+        if (e.Key == "+")
+        {
+            count++;
+        }
+    }
+}

aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample7.razor

@@ -0,0 +1,34 @@
+@page "/event-handler-example-7"
+
+<label>
+    <input @bind="stopPropagation" type="checkbox" />
+    Stop Propagation
+</label>
+
+<div class="m-1 p-1 border border-primary" @onclick="OnSelectParentDiv">
+    <h3>Parent div</h3>
+
+    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv">
+        Child div that doesn't stop propagation when selected.
+    </div>
+
+    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv" 
+            @onclick:stopPropagation="stopPropagation">
+        Child div that stops propagation when selected.
+    </div>
+</div>
+
+<p>
+    @message
+</p>
+
+@code {
+    private bool stopPropagation = false;
+    private string message; 
+
+    private void OnSelectParentDiv() =>
+        message = $"The parent div was selected. {DateTime.Now}";
+
+    private void OnSelectChildDiv() =>
+        message = $"A child div was selected. {DateTime.Now}";
+}

aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/Parent.razor

@@ -0,0 +1,18 @@
+@page "/parent"
+
+<h1>Parent-child example</h1>
+
+<Child Title="Panel Title from Parent" OnClickCallback="@ShowMessage">
+    Content of the child component is supplied by the parent component.
+</Child>
+
+<p>@message</p>
+
+@code {
+    private string message;
+
+    private void ShowMessage(MouseEventArgs e)
+    {
+        message = $"Blaze a new trail with Blazor! ({e.ScreenX}:{e.ScreenY})";
+    }
+}

aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Shared/event-handling/Child.razor

@@ -0,0 +1,16 @@
+<p>
+    <button @onclick="OnClickCallback">
+        Trigger a Parent component method
+    </button>
+</p>
+
+@code {
+    [Parameter]
+    public string Title { get; set; }
+
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    [Parameter]
+    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
+}

aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/_Imports.razor

@@ -8,4 +8,5 @@
 @using BlazorSample
 @using BlazorSample.Shared
 @using BlazorSample.Shared.templated_components
+@using BlazorSample.Shared.event_handling
 @using BlazorSample.Shared.advanced_scenarios

aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample1.razor

@@ -0,0 +1,36 @@
+@page "/event-handler-example-1"
+
+<h1>@currentHeading</h1>
+
+<p>
+    <label>
+        New title
+        <input @bind="newHeading" />
+    </label>
+    <button @onclick="UpdateHeading">
+        Update heading
+    </button>
+</p>
+
+<p>
+    <label>
+        <input type="checkbox" @onchange="CheckChanged" />
+        @checkedMessage
+    </label>
+</p>
+
+@code {
+    private string currentHeading = "Initial heading";
+    private string newHeading;
+    private string checkedMessage = "Not changed yet";
+
+    private void UpdateHeading()
+    {
+        currentHeading = $"{newHeading}!!!";
+    }
+
+    private void CheckChanged()
+    {
+        checkedMessage = $"Last changed at {DateTime.Now}";
+    }
+}

aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample2.razor

@@ -0,0 +1,25 @@
+@page "/event-handler-example-2"
+
+<h1>@currentHeading</h1>
+
+<p>
+    <label>
+        New title
+        <input @bind="newHeading" />
+    </label>
+    <button @onclick="UpdateHeading">
+        Update heading
+    </button>
+</p>
+
+@code {
+    private string currentHeading = "Initial heading";
+    private string newHeading;
+
+    private async Task UpdateHeading()
+    {
+        await Task.Delay(2000);
+
+        currentHeading = $"{newHeading}!!!";
+    }
+}

aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample3.razor

@@ -0,0 +1,21 @@
+@page "/event-handler-example-3"
+
+@for (var i = 0; i < 4; i++)
+{
+    <p>
+        <button @onclick="ReportPointerLocation">
+            Where's my mouse pointer for this button?
+        </button>
+    </p>
+}
+
+<p>@mousePointerMessage</p>
+
+@code {
+    private string mousePointerMessage;
+
+    private void ReportPointerLocation(MouseEventArgs e)
+    {
+        mousePointerMessage = $"Mouse coordinates: {e.ScreenX}:{e.ScreenY}";
+    }
+}

aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample4.razor

@@ -0,0 +1,13 @@
+@page "/event-handler-example-4"
+
+<h1>@heading</h1>
+
+<p>
+    <button @onclick="@(e => heading = "New heading!!!")">
+        Update heading
+    </button>
+</p>
+
+@code {
+    private string heading = "Initial heading";
+}

aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample5.razor

@@ -0,0 +1,23 @@
+@page "/event-handler-example-5"
+
+<h1>@heading</h1>
+
+@for (var i = 1; i < 4; i++)
+{
+    var buttonNumber = i;
+
+    <p>
+        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
+            Button #@i
+        </button>
+    </p>
+}
+
+@code {
+    private string heading = "Select a button to learn its position";
+
+    private void UpdateHeading(MouseEventArgs e, int buttonNumber)
+    {
+        heading = $"Selected #{buttonNumber} at {e.ClientX}:{e.ClientY}";
+    }
+}

aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample6.razor

@@ -0,0 +1,17 @@
+@page "/event-handler-example-6"
+
+<p>
+    <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />
+</p>
+
+@code {
+    private int count = 0;
+
+    private void KeyHandler(KeyboardEventArgs e)
+    {
+        if (e.Key == "+")
+        {
+            count++;
+        }
+    }
+}

aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample7.razor

@@ -0,0 +1,34 @@
+@page "/event-handler-example-7"
+
+<label>
+    <input @bind="stopPropagation" type="checkbox" />
+    Stop Propagation
+</label>
+
+<div class="m-1 p-1 border border-primary" @onclick="OnSelectParentDiv">
+    <h3>Parent div</h3>
+
+    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv">
+        Child div that doesn't stop propagation when selected.
+    </div>
+
+    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv" 
+            @onclick:stopPropagation="stopPropagation">
+        Child div that stops propagation when selected.
+    </div>
+</div>
+
+<p>
+    @message
+</p>
+
+@code {
+    private bool stopPropagation = false;
+    private string message; 
+
+    private void OnSelectParentDiv() =>
+        message = $"The parent div was selected. {DateTime.Now}";
+
+    private void OnSelectChildDiv() =>
+        message = $"A child div was selected. {DateTime.Now}";
+}