Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 3 additions & 7 deletions aspnetcore/blazor/call-web-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -851,9 +851,7 @@ To simplify the creation of PATCH documents in the app issuing PATCH requests, a

:::moniker range=">= aspnetcore-10.0"

<!-- UPDATE 10.0 - API doc cross-link -->

Install the [`Microsoft.AspNetCore.JsonPatch.SystemTextJson`](https://www.nuget.org/packages/Microsoft.AspNetCore.JsonPatch.SystemTextJson) NuGet package and use the API features of the package to compose a `JsonPatchDocument` for a PATCH request.
Install the [`Microsoft.AspNetCore.JsonPatch.SystemTextJson`](https://www.nuget.org/packages/Microsoft.AspNetCore.JsonPatch.SystemTextJson) NuGet package and use the API features of the package to compose a <xref:Microsoft.AspNetCore.JsonPatch.JsonPatchDocument> for a PATCH request.

[!INCLUDE[](~/includes/package-reference.md)]

Expand Down Expand Up @@ -924,11 +922,9 @@ Follow the guidance in the <xref:web-api/jsonpatch> article to add a PATCH contr

:::moniker range=">= aspnetcore-10.0"

<!-- UPDATE 10.0 - API doc cross-link -->

Add a package reference for the [`Microsoft.AspNetCore.JsonPatch.SystemTextJson`](https://www.nuget.org/packages/Microsoft.AspNetCore.Mvc.NewtonsoftJson) NuGet package to the web API app.
Add a package reference for the [`Microsoft.AspNetCore.JsonPatch.SystemTextJson`](https://www.nuget.org/packages/Microsoft.AspNetCore.JsonPatch.SystemTextJson) NuGet package to the web API app.

In the `Program` file add an `@using` directive for the `Microsoft.AspNetCore.JsonPatch.SystemTextJson` <!-- <xref:Microsoft.AspNetCore.JsonPatch.SystemTextJson?displayProperty=fullName> --> namespace:
In the `Program` file add an `@using` directive for the <xref:Microsoft.AspNetCore.JsonPatch.SystemTextJson?displayProperty=fullName> namespace:

```csharp
using Microsoft.AspNetCore.JsonPatch.SystemTextJson;
Expand Down
4 changes: 1 addition & 3 deletions aspnetcore/blazor/components/integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -406,9 +406,7 @@ In `Pages/_Host.cshtml` of Blazor apps that are `ServerPrerendered` in a Blazor

:::moniker range=">= aspnetcore-10.0"

<!-- UPDATE 10.0 - API cross-link -->

Decide what state to persist using the <xref:Microsoft.AspNetCore.Components.PersistentComponentState> service. The `[PersistentState]` attribute applied to a property registers a callback to persist the state during prerendering and loads it when the component renders interactively or the service is instantiated.
Decide what state to persist using the <xref:Microsoft.AspNetCore.Components.PersistentComponentState> service. The [`[PersistentState]` attribute](xref:Microsoft.AspNetCore.Components.PersistentStateAttribute) applied to a property registers a callback to persist the state during prerendering and loads it when the component renders interactively or the service is instantiated.

In the following example, the `{TYPE}` placeholder represents the type of data to persist (for example, `WeatherForecast[]`).

Expand Down
13 changes: 4 additions & 9 deletions aspnetcore/blazor/components/quickgrid.md
Original file line number Diff line number Diff line change
Expand Up @@ -195,9 +195,7 @@ QuickGrid also supports passing custom attributes and style classes (<xref:Micro

## Style a table row based on the row item

<!-- UPDATE 10.0 API cross-link -->

Apply a stylesheet class to a row of the grid based on the row item using the `RowClass` parameter.
Apply a stylesheet class to a row of the grid based on the row item using the <xref:Microsoft.AspNetCore.Components.QuickGrid.QuickGrid%601.RowClass%2A> parameter.

In the following example:

Expand All @@ -219,16 +217,11 @@ In the following example:

:::moniker-end


:::moniker range=">= aspnetcore-10.0"

<!-- UPDATE 10.0 - API cross-link -->

:::moniker-end

### Close `QuickGrid` column options

Close the `QuickGrid` column options UI with the `HideColumnOptionsAsync` method.
Close the `QuickGrid` column options UI with the <xref:Microsoft.AspNetCore.Components.QuickGrid.QuickGrid%601.HideColumnOptionsAsync%2A> method.

The following example closes the column options UI as soon as the title filter is applied:

Expand All @@ -253,6 +246,8 @@ The following example closes the column options UI as soon as the title filter i
}
```

:::moniker-end

## Entity Framework Core (EF Core) data source

Use the factory pattern to resolve an EF Core database context that provides data to a `QuickGrid` component. For more information on why the factory pattern is recommended, see <xref:blazor/blazor-ef-core>.
Expand Down
6 changes: 2 additions & 4 deletions aspnetcore/blazor/forms/input-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -458,7 +458,7 @@ The validation summary displays the friendly name when the field's value is inva

> The Production Date field must be a date.

<!-- UPDATE 10.0 The feature has been backlogged.
<!-- UPDATE 11.0 The feature has been backlogged.
https://github.com/dotnet/aspnetcore/issues/49147

> [!NOTE]
Expand Down Expand Up @@ -561,9 +561,7 @@ Assign a custom template to <xref:Microsoft.AspNetCore.Components.Forms.InputDat

## `InputHidden` component to handle hidden input fields in forms

<!-- UPDATE 10.0 - API doc cross-link -->

The `InputHidden` component provides a hidden input field for storing string values.
The [`InputHidden` component](xref:Microsoft.AspNetCore.Components.Forms.InputHidden) provides a hidden input field for storing string values.

In the following example, a hidden input field is created for the form's `Parameter` property. When the form is submitted, the value of the hidden field is displayed:

Expand Down
19 changes: 9 additions & 10 deletions aspnetcore/blazor/forms/validation.md
Original file line number Diff line number Diff line change
Expand Up @@ -1574,16 +1574,17 @@ The <xref:System.ComponentModel.DataAnnotations.CompareAttribute> doesn't work w

## Use validation models from a different assembly

<!-- UPDATE 10.0 - API cross-links -->

For model validation defined in a different assembly, such as a library or the `.Client` project of a Blazor Web App:

* If the library is a plain class library (it isn't based on the `Microsoft.NET.Sdk.Web` or `Microsoft.NET.Sdk.Razor` SDKs), add a package reference to the library for the [`Microsoft.Extensions.Validation` NuGet package](https://www.nuget.org/packages/Microsoft.Extensions.Validation).
* Create a method in the library or `.Client` project that receives an <xref:Microsoft.Extensions.DependencyInjection.IServiceCollection> instance as an argument and calls `AddValidation` on it.
* In the app, call both the method and `AddValidation`.
* Create a method in the library or `.Client` project that receives an <xref:Microsoft.Extensions.DependencyInjection.IServiceCollection> instance as an argument and calls <xref:Microsoft.Extensions.DependencyInjection.ValidationServiceCollectionExtensions.AddValidation%2A> on it.
* In the app, call both the method and <xref:Microsoft.Extensions.DependencyInjection.ValidationServiceCollectionExtensions.AddValidation%2A>.

The preceding approach results in validation of the types from both assemblies.

<!-- UPDATE 10.0 - MIA API
`AddValidationForTypesInClient` -->

In the following example, the `AddValidationForTypesInClient` method is created for the `.Client` project of a Blazor Web App for validation using types defined in the `.Client` project.

`ServiceCollectionExtensions.cs` (in the `.Client` project):
Expand All @@ -1601,7 +1602,7 @@ public static class ServiceCollectionExtensions
}
```

In the server project's `Program` file, add the namespace and call the `.Client` project's service collection extension method (`AddValidationForTypesInClient`) and `AddValidation`:
In the server project's `Program` file, add the namespace and call the `.Client` project's service collection extension method (`AddValidationForTypesInClient`) and <xref:Microsoft.Extensions.DependencyInjection.ValidationServiceCollectionExtensions.AddValidation%2A>:

```csharp
using BlazorSample.Client.Extensions;
Expand All @@ -1624,19 +1625,17 @@ To create a validated form, use a <xref:Microsoft.AspNetCore.Components.Forms.Da

To opt into the nested objects and collection types validation feature:

<!-- UPDATE 10.0 - API cross-links -->

1. Call the `AddValidation` extension method in the `Program` file where services are registered.
1. Call the <xref:Microsoft.Extensions.DependencyInjection.ValidationServiceCollectionExtensions.AddValidation%2A> extension method in the `Program` file where services are registered.
2. Declare the form model types in a C# class file, not in a Razor component (`.razor`).
3. Annotate the root form model type with the `[ValidatableType]` attribute.
3. Annotate the root form model type with the [`[ValidatableType]` attribute](xref:Microsoft.Extensions.Validation.ValidatableTypeAttribute).

Without following the preceding steps, form validation behavior doesn't include nested model and collection type validation.

<!-- UPDATE 10.0 - Replace with a fully working, cut-'n-paste example -->

The following example demonstrates customer orders with the improved form validation (details omitted for brevity):

In `Program.cs`, call `AddValidation` on the service collection:
In `Program.cs`, call <xref:Microsoft.Extensions.DependencyInjection.ValidationServiceCollectionExtensions.AddValidation%2A> on the service collection:

```csharp
builder.Services.AddValidation();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -461,14 +461,13 @@ IJSRuntime JS { get; set; }

:::moniker range=">= aspnetcore-10.0"

<!-- UPDATE 10.0 - API Browser cross-links in the next
two H2 sections. -->
<!-- UPDATE 10.0 - MIA API -->

## Create an instance of a JS object using a constructor function

Create an instance of a JS object using a constructor function and get the <xref:Microsoft.JSInterop.IJSObjectReference>/<xref:Microsoft.JSInterop.IJSInProcessObjectReference> .NET handle for referencing the instance with the following API:

* `InvokeConstructorAsync` (asynchronous)
* <xref:Microsoft.JSInterop.JSRuntime.InvokeConstructorAsync%2A> (asynchronous)
* `InvokeConstructor` (synchronous)

Examples in this section demonstrate the API calls with the following `TestClass` with a constructor function (`constructor(text)`):
Expand All @@ -487,7 +486,7 @@ window.TestClass = class {

### Asynchronous `InvokeConstructorAsync`

Use `InvokeConstructorAsync(string identifier, object?[]? args)` on <xref:Microsoft.JSInterop.IJSRuntime> and <xref:Microsoft.JSInterop.IJSObjectReference> to invoke the specified JS constructor function asynchronously. The function is invoked with the `new` operator. In the following example, `TestClass` contains a constructor function, and `classRef` is an <xref:Microsoft.JSInterop.IJSObjectReference>.
Use <xref:Microsoft.JSInterop.JSRuntime.InvokeConstructorAsync%2A> on <xref:Microsoft.JSInterop.IJSRuntime> and <xref:Microsoft.JSInterop.IJSObjectReference> to invoke the specified JS constructor function asynchronously. The function is invoked with the `new` operator. In the following example, `TestClass` contains a constructor function, and `classRef` is an <xref:Microsoft.JSInterop.IJSObjectReference>.

```csharp
var classRef = await JSRuntime.InvokeConstructorAsync("TestClass", "Blazor!");
Expand All @@ -499,7 +498,7 @@ An overload is available that takes a <xref:System.Threading.CancellationToken>

### Synchronous `InvokeConstructor`

Use `InvokeConstructor(string identifier, object?[]? args)` on <xref:Microsoft.JSInterop.IJSInProcessRuntime> and <xref:Microsoft.JSInterop.IJSInProcessObjectReference> to invoke the specified JS constructor function synchronously. The function is invoked with the `new` operator. In the following example, `TestClass` contains a constructor function, and `classRef` is an <xref:Microsoft.JSInterop.IJSInProcessObjectReference>:
Use `InvokeConstructor` on <xref:Microsoft.JSInterop.IJSInProcessRuntime> and <xref:Microsoft.JSInterop.IJSInProcessObjectReference> to invoke the specified JS constructor function synchronously. The function is invoked with the `new` operator. In the following example, `TestClass` contains a constructor function, and `classRef` is an <xref:Microsoft.JSInterop.IJSInProcessObjectReference>:

```csharp
var inProcRuntime = ((IJSInProcessRuntime)JSRuntime);
Expand All @@ -514,7 +513,7 @@ An overload is available that takes a <xref:System.Threading.CancellationToken>

Read or modify the value of a JS object property, both data and accessor properties, with the following API:

* `GetValueAsync`/`SetValueAsync` (asynchronous)
* <xref:Microsoft.JSInterop.JSRuntime.GetValueAsync%2A>/<xref:Microsoft.JSInterop.JSRuntime.SetValueAsync%2A> (asynchronous)
* `GetValue`/`SetValue` (synchronous)

Examples in this section demonstrate the API calls with the following JS object (`testObject`):
Expand All @@ -527,14 +526,14 @@ window.testObject = {

### Asynchronous `GetValueAsync` and `SetValueAsync`

Use `GetValueAsync<TValue>(string identifier)` to read the value of the specified JS property asynchronously. A <xref:Microsoft.JSInterop.JSException> is thrown if the property doesn't exist or is a `set`-only property. In the following example, the value of `testObject.num` (10) is stored in `valueFromDataPropertyAsync`:
Use <xref:Microsoft.JSInterop.JSRuntime.GetValueAsync%2A> to read the value of the specified JS property asynchronously. A <xref:Microsoft.JSInterop.JSException> is thrown if the property doesn't exist or is a `set`-only property. In the following example, the value of `testObject.num` (10) is stored in `valueFromDataPropertyAsync`:

```csharp
var valueFromDataPropertyAsync =
await JSRuntime.GetValueAsync<int>("testObject.num");
```

Use `SetValueAsync<TValue>(string identifier, TValue value)` to update the value of the specified JS property asynchronously. If the property isn't defined on the target object, the property is created. A <xref:Microsoft.JSInterop.JSException> is thrown if the property exists but isn't writable or when a new property can't be added to the object. In the following example, `testObject.num` is set to 20, and `num2` is created with a value of 30 on `testObject`:
Use <xref:Microsoft.JSInterop.JSRuntime.SetValueAsync%2A> to update the value of the specified JS property asynchronously. If the property isn't defined on the target object, the property is created. A <xref:Microsoft.JSInterop.JSException> is thrown if the property exists but isn't writable or when a new property can't be added to the object. In the following example, `testObject.num` is set to 20, and `num2` is created with a value of 30 on `testObject`:

```csharp
await JSRuntime.SetValueAsync("testObject.num", 20);
Expand All @@ -543,14 +542,14 @@ await JSRuntime.SetValueAsync("testObject.num2", 30);

### Synchronous `GetValue` and `SetValue`

Use `GetValue<TValue>(string identifier)` to read the value of the specified JS property synchronously. A <xref:Microsoft.JSInterop.JSException> is thrown if the property doesn't exist or is a `set`-only property. In the following example, the value of `testObject.num` (10) is stored in `valueFromDataProperty`:
Use `GetValue` to read the value of the specified JS property synchronously. A <xref:Microsoft.JSInterop.JSException> is thrown if the property doesn't exist or is a `set`-only property. In the following example, the value of `testObject.num` (10) is stored in `valueFromDataProperty`:

```csharp
var inProcRuntime = ((IJSInProcessRuntime)JSRuntime);
var valueFromDataProperty = inProcRuntime.GetValue<int>("testObject.num");
```

Use `SetValue<TValue>(string identifier, TValue value)` to update the value of the specified JS property synchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. A <xref:Microsoft.JSInterop.JSException> is thrown if the property exists but isn't writable or when a new property can't be added to the object. In the following example, `testObject.num` is set to 20, and `num2` is created with a value of 30 on `testObject`:
Use `SetValue` to update the value of the specified JS property synchronously. The property can't be a `get`-only property. If the property isn't defined on the target object, the property is created. A <xref:Microsoft.JSInterop.JSException> is thrown if the property exists but isn't writable or when a new property can't be added to the object. In the following example, `testObject.num` is set to 20, and `num2` is created with a value of 30 on `testObject`:

```csharp
var inProcRuntime = ((IJSInProcessRuntime)JSRuntime);
Expand Down Expand Up @@ -630,16 +629,16 @@ In server-side scenarios, JS interop calls can't be issued after Blazor's Signal

:::moniker range=">= aspnetcore-10.0"

<!-- UPDATE 10.0 - API Browser cross-links -->
<!-- UPDATE 10.0 - MIA API -->

* JS interop method calls
* <xref:Microsoft.JSInterop.IJSRuntime.InvokeAsync%2A?displayProperty=nameWithType>
* <xref:Microsoft.JSInterop.JSRuntimeExtensions.InvokeAsync%2A?displayProperty=nameWithType>
* <xref:Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync%2A?displayProperty=nameWithType>
* `InvokeConstructorAsync`
* `GetValueAsync`
* `SetValueAsync`
* `Dispose`/`DisposeAsync` calls on any <xref:Microsoft.JSInterop.IJSObjectReference>.
* <xref:Microsoft.JSInterop.JSRuntime.InvokeConstructorAsync%2A>
* <xref:Microsoft.JSInterop.JSRuntime.GetValueAsync%2A>
* <xref:Microsoft.JSInterop.JSRuntime.SetValueAsync%2A>
* <xref:Microsoft.JSInterop.JSRuntime.Dispose%2A>/`DisposeAsync` calls on any <xref:Microsoft.JSInterop.IJSObjectReference>.

:::moniker-end

Expand All @@ -649,7 +648,7 @@ In server-side scenarios, JS interop calls can't be issued after Blazor's Signal
* <xref:Microsoft.JSInterop.IJSRuntime.InvokeAsync%2A?displayProperty=nameWithType>
* <xref:Microsoft.JSInterop.JSRuntimeExtensions.InvokeAsync%2A?displayProperty=nameWithType>
* <xref:Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync%2A?displayProperty=nameWithType>
* `Dispose`/`DisposeAsync` calls on any <xref:Microsoft.JSInterop.IJSObjectReference>.
* <xref:Microsoft.JSInterop.JSRuntime.Dispose%2A>/`DisposeAsync` calls on any <xref:Microsoft.JSInterop.IJSObjectReference>.

:::moniker-end

Expand Down
8 changes: 4 additions & 4 deletions aspnetcore/blazor/javascript-interoperability/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -331,15 +331,15 @@ JavaScript (JS) interop calls can't be issued after Blazor's SignalR circuit is

:::moniker range=">= aspnetcore-10.0"

<!-- UPDATE 10.0 - API Browser cross-links -->
<!-- UPDATE 10.0 - MIA API -->

* JS interop method calls
* <xref:Microsoft.JSInterop.IJSRuntime.InvokeAsync%2A?displayProperty=nameWithType>
* <xref:Microsoft.JSInterop.JSRuntimeExtensions.InvokeAsync%2A?displayProperty=nameWithType>
* <xref:Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync%2A?displayProperty=nameWithType>
* `InvokeConstructorAsync`
* `GetValueAsync`
* `SetValueAsync`
* <xref:Microsoft.JSInterop.IJSObjectReference.InvokeConstructorAsync%2A>
* <xref:Microsoft.JSInterop.IJSObjectReference.GetValueAsync%2A>
* <xref:Microsoft.JSInterop.IJSObjectReference.SetValueAsync%2A>
* `Dispose`/`DisposeAsync` calls on any <xref:Microsoft.JSInterop.IJSObjectReference>.

:::moniker-end
Expand Down
Loading