Merge pull request #48585 from lootle1/MR68

Technical Review 1016180: Improve how forms and validation work in Bl…

Author: JamesJBarnett

learn-pr/aspnetcore/blazor-improve-how-forms-work/1-introduction.yml

@@ -5,7 +5,7 @@ metadata:
   unitType: introduction
   title: Introduction
   description: Introduction
-  ms.date: 11/09/2023
+  ms.date: 01/09/2025
   author: csharpfritz
   ms.author: jefritz
   ms.manager: markl

learn-pr/aspnetcore/blazor-improve-how-forms-work/2-attach-csharp-code-dom-events-blazor-event-handlers.yml

@@ -5,7 +5,7 @@ metadata:
   unitType: learning-content
   title: "Attach C# code to DOM events with Blazor event handlers"
   description: "Create handlers to process DOM events using C#"
-  ms.date: 11/09/2023
+  ms.date: 01/09/2025
   author: csharpfritz
   ms.author: jefritz
   ms.manager: markl
@@ -20,7 +20,7 @@ quiz:
     choices:
     - content: "C# events"
       isCorrect: false
-      explanation: "C# events do not properly transfer between components"
+      explanation: "C# events don't properly transfer between components"
     - content: "EventCallback"
       isCorrect: true
       explanation: "EventCallbacks look like parameters on a component and can be specified on a Blazor page or another component"
@@ -34,7 +34,7 @@ quiz:
       explanation: "preventDefault prevents the default action in the DOM element from executing"
     - content: "return false"
       isCorrect: false
-      explanation: "return false was a technique to stop an event in other JavaScript frameworks, but does not prevent the default action"
+      explanation: "return false was a technique to stop an event in other JavaScript frameworks, but doesn't prevent the default action"
     - content: "throw new Exception()"
       isCorrect: false
       explanation: "Throwing an exception might stop the default action from executing, but it also raises an error that you might not want your application users to interact with"

learn-pr/aspnetcore/blazor-improve-how-forms-work/3-exercise-create-blazor-event-handler-onclick-events.yml

@@ -5,7 +5,7 @@ metadata:
   unitType: Exercise
   title: "Exercise - Create a Blazor event handler for onclick events"
   description: "Handle the onclick event for an HTML form control using C#"
-  ms.date: 11/09/2023
+  ms.date: 01/09/2025
   author: csharpfritz
   ms.author: jefritz
   ms.manager: markl

learn-pr/aspnetcore/blazor-improve-how-forms-work/4-take-advantage-power-blazor-forms.yml

@@ -5,7 +5,7 @@ metadata:
   unitType: learning-content
   title: "Take advantage of the power of Blazor forms"
   description: "Learn how to use Blazor input elements with Blazor forms"
-  ms.date: 11/09/2023 
+  ms.date: 01/09/2025
   author: csharpfritz
   ms.author: jefritz
   ms.manager: markl
@@ -23,18 +23,18 @@ quiz:
       explanation: "This event executes when EditForm fields are submitted with invalid content"
     - content: "OnFailedValidation"
       isCorrect: false
-      explanation: "This sounds like a good name for an event, but is not correct"
+      explanation: "This sounds like a good name for an event, but isn't correct"
     - content: "OnFailedSubmit"
       isCorrect: false
-      explanation: "'Failed' is not part of the event name that is raised"
+      explanation: "'Failed' isn't part of the event name that is raised"
   - content: "An EditForm has the following features EXCEPT:"
     choices:
     - content: "Data Binding"
       isCorrect: false
       explanation: "The EditForm can be associated with an object and then acts like a view of the object for data entry purposes"
     - content: "Data cleansing"
       isCorrect: true
-      explanation: "While you can edit the content of an EditForm, it does not perform data cleansing operations on its own"
+      explanation: "While you can edit the content of an EditForm, it doesn't perform data cleansing operations on its own"
     - content: "Validation"
       isCorrect: false
       explanation: "An EditForm extensive and extensible validation capabilities"

learn-pr/aspnetcore/blazor-improve-how-forms-work/5-exercise-create-address-form-blazor-components.yml

@@ -5,7 +5,7 @@ metadata:
   unitType: Exercise
   title: "Exercise - Create an address form with Blazor components"
   description: "Build an address form and connect it to a data model."
-  ms.date: 11/09/2023
+  ms.date: 01/09/2025
   author: csharpfritz
   ms.author: jefritz
   ms.manager: markl

learn-pr/aspnetcore/blazor-improve-how-forms-work/6-validate-user-input-implicitly.yml

@@ -5,7 +5,7 @@ metadata:
   unitType: learning-content
   title: "Validate user input implicitly without writing validation code"
   description: "Learn how to use Blazor's events to validate user input in forms."
-  ms.date: 11/09/2023
+  ms.date: 01/09/2025
   author: csharpfritz
   ms.author: jefritz
   ms.manager: markl
@@ -20,18 +20,18 @@ quiz:
     choices:
     - content: "ValidationMessage"
       isCorrect: false
-      explanation: "The ValidationMessage component will display the message for one component, not a summary"
+      explanation: "The ValidationMessage component displays the message for one component, not a summary"
     - content: "DataAnnotationsValidator"
       isCorrect: false
-      explanation: "This component activates the validations in the EditForm, but does not display a summary of validation message"
+      explanation: "This component activates the validations in the EditForm, but doesn't display a summary of validation message"
     - content: "ValidationSummary"
       isCorrect: true
       explanation: "This component displays a summary of all the validation messages in a submitted form"
-  - content: "Which of these is NOT a standard input elements that comes with Blazor?"
+  - content: "Which of these choices is NOT a standard input element that comes with Blazor?"
     choices:
     - content: "Guid"
       isCorrect: true
-      explanation: "Guid is not part of the standard input elements provided by Blazor"
+      explanation: "Guid isn't part of the standard input elements provided by Blazor"
     - content: "CreditCard"
       isCorrect: false
       explanation: "CreditCard is one of the standard input elements provided by Blazor"

learn-pr/aspnetcore/blazor-improve-how-forms-work/7-exercise-add-server-client-side-data-validation-address-form.yml

@@ -5,7 +5,7 @@ metadata:
   unitType: Exercise
   title: "Exercise - Add server-side and client-side data validation to the address form "
   description: "Use data annotations on a model to add custom validation to a Blazor EditForm component."
-  ms.date: 11/09/2023
+  ms.date: 01/09/2025
   author: csharpfritz
   ms.author: jefritz
   ms.manager: markl

learn-pr/aspnetcore/blazor-improve-how-forms-work/8-summary.yml

@@ -5,7 +5,7 @@ metadata:
   unitType: summary
   title: "Summary"
   description: "In this unit, you'll review what you've learned about forms in Blazor web apps."
-  ms.date: 11/09/2023
+  ms.date: 01/09/2025
   author: csharpfritz
   ms.author: jefritz
   ms.manager: markl

learn-pr/aspnetcore/blazor-improve-how-forms-work/includes/2-attach-csharp-code-dom-events-blazor-event-handlers.md

@@ -8,7 +8,7 @@ In this unit, you'll look in detail at the third option; how to create a Blazor
 
 ## Handle an event with Blazor and C#
 
-Each element in the HTML markup of a Blazor app supports many events. Most of these events correspond to the DOM events available in regular web applications, but you can also create user-defined events that are triggered by writing code. To capture an event with Blazor, you write a C# method that handles the event, then bind the event to the method with a Blazor directive. For a DOM event, the Blazor directive shares the same name as the equivalent HTML event, such as `@onkeydown` or `@onfocus`. For example, the sample app generated by using the Blazor Server App contains the following code on the **Counter.razor** page. This page displays a button. When the user selects the button, the `@onclick` event triggers the `IncrementCount` method that increments a counter indicating how many times the button has been clicked. The value of the counter variable is displayed by the \<p\> element on the page:
+Each element in the HTML markup of a Blazor app supports many events. Most of these events correspond to the DOM events available in regular web applications, but you can also create user-defined events that are triggered by writing code. To capture an event with Blazor, you write a C# method that handles the event, then bind the event to the method with a Blazor directive. For a DOM event, the Blazor directive shares the same name as the equivalent HTML event, such as `@onkeydown` or `@onfocus`. For example, the sample app generated by using the Blazor Server App contains the following code on the **Counter.razor** page. This page displays a button. When the user selects the button, the `@onclick` event triggers the `IncrementCount` method that increments a counter indicating how many times the button has been clicked. The \<p\> element on the page displays the value of the counter variable:
 
 ```razor
 @page "/counter"
@@ -84,7 +84,7 @@ A traditional web application uses JavaScript to capture and process events. You
 
 Besides the syntactic differences in the two versions of the event handler, you should note the following functional differences:
 
-- JavaScript does not prefix the name of the event with an `@` sign; it's not a Blazor directive.
+- JavaScript doesn't prefix the name of the event with an `@` sign; it's not a Blazor directive.
 - In the Blazor code, you specify the name of the event-handling method when you attach it to an event. In JavaScript, you write a statement that calls the event-handling method; you specify round brackets and any parameters required.
 - Most importantly, the JavaScript event handler runs in the browser, on the client. If you're building a Blazor Server App, the Blazor event handler runs on the server and only updates the browser with any changes made to the UI when the event handler completes. Additionally, the Blazor mechanism enables an event handler to access static data that's shared between sessions; the JavaScript model doesn't. However, handling some frequently occurring events such as `@onmousemove` can cause the user interface to become sluggish because they require a network round-trip to the server. You might prefer to handle events such as these in the browser, using JavaScript.
 
@@ -93,7 +93,7 @@ Besides the syntactic differences in the two versions of the event handler, you
 
 ## Handle events asynchronously
 
-By default, Blazor event handlers are synchronous. If an event handler performs a potentially long-running operation, such as calling a web service, the thread on which the event handler runs will be blocked until the operation completes. This can lead to poor response in the user interface. To combat this, you can designate an event handler method as asynchronous. Use the C# `async` keyword. The method must return a `Task` object. You can then use the `await` operator inside the event handler method to initiate any long-running tasks on a separate thread and free the current thread for other work. When a long-running task completes, the event handler resumes. The example event handler below runs a time-consuming method asynchronously:
+By default, Blazor event handlers are synchronous. If an event handler performs a potentially long-running operation, such as calling a web service, the thread on which the event handler runs will be blocked until the operation completes. This can lead to poor response in the user interface. To combat this, you can designate an event handler method as asynchronous. Use the C# `async` keyword. The method must return a `Task` object. You can then use the `await` operator inside the event handler method to initiate any long-running tasks on a separate thread and free the current thread for other work. When a long-running task completes, the event handler resumes. The example event handler that follows runs a time-consuming method asynchronously:
 
 ```razor
 <button @onclick="DoWork">Run time-consuming operation</button>
@@ -144,7 +144,7 @@ The following image shows the result when the user selects the button:
 :::image type="content" source="../media/2-change-focus.png" alt-text="Screenshot of the web page after the user has clicked the button to set the focus to the input element.":::
 
 > [!NOTE]
-> An app should only direct the focus to a specific control for a specific reason, such as to ask the user to modify input after an error. Don't use focusing to force the user to navigate through the elements on a page in a fixed order; this can be very frustrating to the user who might want to revisit elements to change their input.  
+> An app should only direct the focus to a specific control for a specific reason, such as to ask the user to modify input after an error. Don't use focusing to force the user to navigate through the elements on a page in a fixed order. This can be frustrating to the user who might want to revisit elements to change their input.  
 
 ## Write inline event handlers
 
@@ -167,7 +167,7 @@ C# supports lambda expressions. A lambda expression enables you to create an ano
 > [!NOTE]
 > For details on how lambda expressions work, read [Lambda expressions and anonymous functions](/dotnet/csharp/language-reference/operators/lambda-expressions).
 
-This approach is also useful if you want to provide other arguments for an event-handling method. In the following example, the method `HandleClick` takes a `MouseEventArgs` parameter in the same way as an ordinary click event handler, but it also accepts a string parameter. The method processes the click event as before, but also displays the message in the user has pressed the <kbd>Ctrl</kbd> key. The lambda expression calls the `HandleCLick` method, passing in the `MouseEventArgs` parameter (`mouseEvent`), and a string.
+This approach is also useful if you want to provide other arguments for an event-handling method. In the following example, the method `HandleClick` takes a `MouseEventArgs` parameter in the same way as an ordinary click event handler, but it also accepts a string parameter. The method processes the click event as before, but also displays the message if the user has pressed the <kbd>Ctrl</kbd> key. The lambda expression calls the `HandleCLick` method, passing in the `MouseEventArgs` parameter (`mouseEvent`), and a string.
 
 ```razor
 @page "/counter"
@@ -202,7 +202,7 @@ This approach is also useful if you want to provide other arguments for an event
 
 ## Override default DOM actions for events
 
-Several DOM events have default actions that run when the event occurs, regardless of whether there's an event handler available for that event. For example, the `@onkeypress` event for an \<input\> element always displays the character that corresponds to the key that the user has pressed, and handling the key press. In the next example, the `@onkeypress` event is used to convert the user's input to uppercase. Additionally, if the user types an `@` character, the event handler displays an alert:
+Several DOM events have default actions that run when the event occurs, regardless of whether there's an event handler available for that event. For example, the `@onkeypress` event for an \<input\> element always displays the character that corresponds to the key that the user has pressed and handles the key press. In the next example, the `@onkeypress` event is used to convert the user's input to uppercase. Additionally, if the user types an `@` character, the event handler displays an alert:
 
 ```razor
 <input value=@data @onkeypress="ProcessKeyPress"/>
@@ -279,7 +279,7 @@ A Blazor page can contain one or more Blazor components, and components can be n
 
 A callback can take a single parameter. `EventCallback` is a generic type. The type parameter specifies the type of the argument passed to the callback.
 
-As an example, consider the following scenario. You want to create a component named `TextDisplay` that enables the user to enter an input string and transform that string in some way; you might want to convert it to upper case, lower case, mixed case, filter characters from it, or perform some other type of transformation. However, when you write the code for the `TextDisplay` component, you don't know what the transformation process will be, and instead want to defer this operation to another component. The following code shows the `TextDisplay` component. It provides the input string in the form of an \<input\> element that enables the user to enter a text value.
+As an example, consider the following scenario. You want to create a component named `TextDisplay` that enables the user to enter an input string and transform that string in some way. You might want to convert it to upper case, lower case, mixed case, filter characters from it, or perform some other type of transformation. However, when you write the code for the `TextDisplay` component, you don't know what the transformation process will be. Instead, you want to defer this operation to another component. The following code shows the `TextDisplay` component. It provides the input string in the form of an \<input\> element that enables the user to enter a text value.
 
 ```razor
 @* TextDisplay component *@
@@ -318,7 +318,7 @@ namespace WebApplication.Data
 
 The `key` field contains the value entered by the user, and the `TransformedKey` field will hold the transformed value of the key when it has been processed.
 
-In this example, the `EventCallback` object is a component parameter, and its value is supplied when the component is created. This action is performed by another component, named `TextTransformer`:
+In this example, the `EventCallback` object is a component parameter, and its value is supplied when the component is created. The component named `TextTransformer` performs this action:
 
 ```razor
 @page "/texttransformer"