Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 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
8 changes: 2 additions & 6 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.

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