You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: aspnetcore/blazor/call-web-api.md
+7-2Lines changed: 7 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -57,7 +57,12 @@ Example:
57
57
58
58
In the app's `Program` file, call:
59
59
60
-
<!-- UPDATE 10.0 - Missing API doc for 'Microsoft.Identity.Web.DownstreamApiExtensions.AddDownstreamApi' -->
60
+
<!-- UPDATE 11.0 - Awaiting API per https://github.com/dotnet/AspNetCore.Docs/issues/36373.
61
+
Marking this for 11.0 because it's the last 10.0 item and inline tracking
62
+
now adopts 11.0 or later work items. This ensures that this inline item
63
+
isn't missed.
64
+
65
+
Missing API doc for 'Microsoft.Identity.Web.DownstreamApiExtensions.AddDownstreamApi' -->
61
66
62
67
*<xref:Microsoft.Identity.Web.MicrosoftIdentityWebApiAuthenticationBuilder.EnableTokenAcquisitionToCallDownstreamApi%2A>: Enables token acquisition to call web APIs.
63
68
*`AddDownstreamApi`: Microsoft Identity Web packages provide API to create a named downstream web service for making web API calls. <xref:Microsoft.Identity.Abstractions.IDownstreamApi> is injected into a server-side class, which is used to call <xref:Microsoft.Identity.Abstractions.IDownstreamApi.CallApiForUserAsync%2A> to obtain weather data from an external web API (`MinimalApiJwt` project).
`{KEYIDENTIFIER}`:AzureKeyVaultkeyidentifierusedforkeyencryption. Anaccesspolicyallowstheapplicationtoaccessthekeyvaultwith `Get`, `UnwrapKey`, and `WrapKey` permissions. ThekeyidentifierisobtainedfromthekeyintheEntraorAzureportalafterit'screated. Ifyouenableautorotationofthekeyvaultkey, makesurethatyouuseaversionlesskeyidentifierintheapp's key vault configuration, where no key GUID is placed at the end of the identifier (example: `https://contoso.vault.azure.net/keys/data-protection`).
Copy file name to clipboardExpand all lines: aspnetcore/blazor/components/data-binding.md
+31-9Lines changed: 31 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -221,16 +221,38 @@ Additional examples
221
221
222
222
For more information on the `InputText` component, see <xref:blazor/forms/input-components>.
223
223
224
-
Components support two-way data binding by defining a pair of `@bind` attributes with either a `:get` or `:set` modifier. The `{PARAMETER}` placeholder in the following examples is used to bind a component parameter:
224
+
Components support two-way data binding by defining a pair of `@bind` attributes with either a `:get` or `:set` modifier. The `{PARAMETER}` placeholder in the following examples is used to bind a component parameter:
225
225
226
226
*`@bind:get`/`@bind-{PARAMETER}:get`: Specifies the value to bind.
227
227
*`@bind:set`/`@bind-{PARAMETER}:set`: Specifies a callback for when the value changes.
228
228
229
-
The `:get` and `:set` modifiers are always used together.
229
+
The `:get`/`:set` modifiers are always used together.
230
230
231
-
With `:get`/`:set`binding, you can react to a value change before it's applied to the DOM, and you can change the applied value, if necessary. Whereas with `@bind:event="{EVENT}"` attribute binding, where the `{EVENT}` placeholder is a DOM event, you receive the notification after the DOM is updated, and there's no capacity to modify the applied value while binding.
231
+
For binding to HTML elements, use `:get`/`:set`modifiers to ensure an `<input>` element stays synchronized with a bound value, even when the value is modified in the handler:
232
232
233
-
The following `BindGetSet` component demonstrates `@bind:get`/`@bind:set` syntax for `<input>` elements and the [`InputText` component](xref:blazor/forms/input-components) used by [Blazor forms](xref:blazor/forms/index) in synchronous (`Set`) and asynchronous (`SetAsync`) scenarios.
> The preceding approach can cause synchronization errors, where the `<input>` element displays a different value than the value held in the bound variable. Migrate to `:get`/`:set` modifiers to avoid this issue.
245
+
246
+
For component parameters, the following syntaxes for a hypothetical `Child` component are functionally equivalent:
With `:get`/`:set` modifier binding, you can react to a value change before it's applied to the DOM, and you can change the applied value, if necessary. Whereas with `@bind:event="{EVENT}"` attribute binding, where the `{EVENT}` placeholder is a DOM event, you receive the notification after the DOM is updated, and there's no capacity to modify the applied value while binding.
254
+
255
+
The following `BindGetSet` component demonstrates `:get`/`:set` syntax for `<input>` elements and the [`InputText` component](xref:blazor/forms/input-components) used by [Blazor forms](xref:blazor/forms/index) in synchronous (`Set`) and asynchronous (`SetAsync`) scenarios.
234
256
235
257
`BindGetSet.razor`:
236
258
@@ -270,7 +292,7 @@ The following `BindGetSet` component demonstrates `@bind:get`/`@bind:set` syntax
270
292
271
293
For more information on the `InputText` component, see <xref:blazor/forms/input-components>.
272
294
273
-
For another example use of `@bind:get` and `@bind:set`, see the [Bind across more than two components](#bind-across-more-than-two-components) section later in this article.
295
+
For another example use of `:get` and `:set` modifiers, see the [Bind across more than two components](#bind-across-more-than-two-components) section later in this article.
274
296
275
297
Razor attribute binding is case-sensitive:
276
298
@@ -279,7 +301,7 @@ Razor attribute binding is case-sensitive:
279
301
280
302
## Use `@bind:get`/`@bind:set` modifiers and avoid event handlers for two-way data binding
281
303
282
-
Two-way data binding isn't possible to implement with an event handler. Use `@bind:get`/`@bind:set` modifiers for two-way data binding.
304
+
Two-way data binding isn't possible to implement with an event handler. Use `:get`/`:set` modifiers for two-way data binding.
283
305
284
306
<spanaria-hidden="true">❌</span> Consider the following ***dysfunctional approach*** for two-way data binding using an event handler:
285
307
@@ -306,9 +328,9 @@ Two-way data binding isn't possible to implement with an event handler. Use `@bi
306
328
307
329
The `OnInput` event handler updates the value of `inputValue` to `Long!` after a fourth character is provided. However, the user can continue adding characters to the element value in the UI. The value of `inputValue` isn't bound back to the element's value with each keystroke. The preceding example is only capable of one-way data binding.
308
330
309
-
The reason for this behavior is that Blazor isn't aware that your code intends to modify the value of `inputValue` in the event handler. Blazor doesn't try to force DOM element values and .NET variable values to match unless they're bound with `@bind` syntax. In earlier versions of Blazor, two-way data binding is implemented by [binding the element to a property and controlling the property's value with its setter](#binding-to-a-property-with-c-get-and-set-accessors). In ASP.NET Core in .NET 7 or later, `@bind:get`/`@bind:set` modifier syntax is used to implement two-way data binding, as the next example demonstrates.
331
+
The reason for this behavior is that Blazor isn't aware that your code intends to modify the value of `inputValue` in the event handler. Blazor doesn't try to force DOM element values and .NET variable values to match unless they're bound with `@bind` syntax. In earlier versions of Blazor, two-way data binding is implemented by [binding the element to a property and controlling the property's value with its setter](#binding-to-a-property-with-c-get-and-set-accessors). In ASP.NET Core in .NET 7 or later, `:get`/`:set` modifier syntax is used to implement two-way data binding, as the next example demonstrates.
310
332
311
-
<spanaria-hidden="true">✔️</span> Consider the following ***correct approach*** using `@bind:get`/`@bind:set` for two-way data binding:
333
+
<spanaria-hidden="true">✔️</span> Consider the following ***correct approach*** using `:get`/`:set` for two-way data binding:
312
334
313
335
```razor
314
336
<p>
@@ -331,7 +353,7 @@ The reason for this behavior is that Blazor isn't aware that your code intends t
331
353
}
332
354
```
333
355
334
-
Using `@bind:get`/`@bind:set` modifiers both controls the underlying value of `inputValue` via `@bind:set` and binds the value of `inputValue` to the element's value via `@bind:get`. The preceding example demonstrates the correct approach for implementing two-way data binding.
356
+
Using `:get`/`:set` modifiers both controls the underlying value of `inputValue` via `:set` and binds the value of `inputValue` to the element's value via `:get`. The preceding example demonstrates the correct approach for implementing two-way data binding.
Copy file name to clipboardExpand all lines: aspnetcore/blazor/forms/validation.md
+39-8Lines changed: 39 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1576,27 +1576,23 @@ The <xref:System.ComponentModel.DataAnnotations.CompareAttribute> doesn't work w
1576
1576
1577
1577
Blazor form validation includes support for validating properties of nested objects and collection items with the built-in <xref:Microsoft.AspNetCore.Components.Forms.DataAnnotationsValidator>.
1578
1578
1579
-
To create a validated form, use a <xref:Microsoft.AspNetCore.Components.Forms.DataAnnotationsValidator> component inside an <xref:Microsoft.AspNetCore.Components.Forms.EditForm> component, just as before.
1579
+
To create a validated form, use a <xref:Microsoft.AspNetCore.Components.Forms.DataAnnotationsValidator> component inside an <xref:Microsoft.AspNetCore.Components.Forms.EditForm> component.
1580
1580
1581
1581
To opt into the nested objects and collection types validation feature:
1582
1582
1583
1583
1. Call the <xref:Microsoft.Extensions.DependencyInjection.ValidationServiceCollectionExtensions.AddValidation%2A> extension method in the `Program` file where services are registered.
1584
1584
2. Declare the form model types in a C# class file, not in a Razor component (`.razor`).
1585
1585
3. Annotate the root form model type with the [`[ValidatableType]` attribute](xref:Microsoft.Extensions.Validation.ValidatableTypeAttribute).
1586
1586
1587
-
Without following the preceding steps, form validation behavior doesn't include nested model and collection type validation.
1588
-
1589
-
<!-- UPDATE 10.0 - Replace with a fully working, cut-'n-paste example -->
1590
-
1591
-
The following example demonstrates customer orders with the improved form validation (details omitted for brevity):
1587
+
The following example demonstrates customer orders with nested collection form validation.
1592
1588
1593
1589
In `Program.cs`, call <xref:Microsoft.Extensions.DependencyInjection.ValidationServiceCollectionExtensions.AddValidation%2A> on the service collection:
1594
1590
1595
1591
```csharp
1596
1592
builder.Services.AddValidation();
1597
1593
```
1598
1594
1599
-
In the following `Order` class, the `[ValidatableType]` attribute is required on the top-level model type. The other types are discovered automatically.`OrderItem` and `ShippingAddress` aren't shown for brevity, but nested and collection validation works the same way in those types if they were shown.
1595
+
In the following `Order` class, the `[ValidatableType]` attribute is required on the top-level model type. The other types are discovered automatically.
1600
1596
1601
1597
`Order.cs`:
1602
1598
@@ -1622,6 +1618,41 @@ public class Customer
1622
1618
}
1623
1619
```
1624
1620
1621
+
`OrderItem.cs`:
1622
+
1623
+
```csharp
1624
+
publicclassOrderItem
1625
+
{
1626
+
[Required(ErrorMessage="Id is required.")]
1627
+
publicintId { get; set; }
1628
+
1629
+
[Required(ErrorMessage="Description is required.")]
1630
+
publicstring? Description { get; set; }
1631
+
1632
+
[Required(ErrorMessage="Price is required.")]
1633
+
publicdecimalPrice { get; set; }
1634
+
}
1635
+
```
1636
+
1637
+
`ShippingAddress.cs`:
1638
+
1639
+
```csharp
1640
+
publicclassShippingAddress
1641
+
{
1642
+
[Required(ErrorMessage="Street is required.")]
1643
+
publicstring? Street { get; set; }
1644
+
1645
+
[Required(ErrorMessage="City is required.")]
1646
+
publicstring? City { get; set; }
1647
+
1648
+
[Required(ErrorMessage="State/Province is required.")]
1649
+
publicstring? StateProvince { get; set; }
1650
+
1651
+
[Required(ErrorMessage="PostalCode is required.")]
1652
+
publicstring? PostalCode { get; set; }
1653
+
}
1654
+
```
1655
+
1625
1656
In the following `OrderPage` component, the <xref:Microsoft.AspNetCore.Components.Forms.DataAnnotationsValidator> component is present in the <xref:Microsoft.AspNetCore.Components.Forms.EditForm> component.
1626
1657
1627
1658
`OrderPage.razor`:
@@ -1649,7 +1680,7 @@ In the following `OrderPage` component, the <xref:Microsoft.AspNetCore.Component
1649
1680
}
1650
1681
```
1651
1682
1652
-
The requirement to declare the model types outside of Razor components (`.razor` files) is due to the fact that both the new validation feature and the Razor compiler itself are using a source generator. Currently, output of one source generator can't be used as an input for another source generator.
1683
+
The requirement to declare the model types outside of Razor components (`.razor` files) is due to the fact that both the nested collection validation feature and the Razor compiler itself are using a source generator. Currently, output of one source generator can't be used as an input for another source generator.
1653
1684
1654
1685
For guidance on using validation models from a different assembly, see the [Use validation models from a different assembly](#use-validation-models-from-a-different-assembly) section.
0 commit comments