diff --git a/aspnetcore/blazor/file-downloads.md b/aspnetcore/blazor/file-downloads.md index c7b1b5b23097..cb21c0b48714 100644 --- a/aspnetcore/blazor/file-downloads.md +++ b/aspnetcore/blazor/file-downloads.md @@ -14,7 +14,7 @@ uid: blazor/file-downloads This article explains how to download files in Blazor apps. -[!INCLUDE[](~/blazor/includes/location-client-and-server-net-6-or-later.md)] +[!INCLUDE[](~/blazor/includes/location-client-and-server-net6-or-later.md)] Files can be downloaded from the app's own static assets or from any other location: diff --git a/aspnetcore/blazor/images.md b/aspnetcore/blazor/images.md index 047706fcc969..3d7e28f63a3f 100644 --- a/aspnetcore/blazor/images.md +++ b/aspnetcore/blazor/images.md @@ -14,6 +14,8 @@ uid: blazor/images This article describes common scenarios for working with images in Blazor apps. +[!INCLUDE[](~/blazor/includes/location-client-and-server-net6-or-later.md)] + ## Dynamically set an image source The following example demonstrates how to dynamically set an image's source with a C# field. @@ -32,9 +34,44 @@ In the following `ShowImage1` component: * The `ShowImage` method updates the `imageSource` field based on an image `id` argument passed to the method. * Rendered buttons call the `ShowImage` method with an image argument for each of the three available images in the `images` folder. The file name is composed using the argument passed to the method and matches one of the three images in the `images` folder. -`Pages/ShowImage1.razor`: +`ShowImage1.razor`: + +:::moniker range=">= aspnetcore-8.0" + +```razor +@page "/show-image-1" +@attribute [RenderModeServer] + +

Dynamic Image Source Example

+ +@if (imageSource is not null) +{ +

+ +

+} + +@for (var i = 1; i <= 3; i++) +{ + var imageId = i; + +} + +@code { + private string? imageSource; -:::moniker range=">= aspnetcore-7.0" + private void ShowImage(int id) + { + imageSource = $"images/image{id}.png"; + } +} +``` + +:::moniker-end + +:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" :::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/images/ShowImage1.razor"::: @@ -108,11 +145,47 @@ The following `ShowImage2` component: * Invokes the `setImage` JavaScript function, which accepts the data on the client. > [!NOTE] -> Blazor Server apps use a dedicated service to make requests, so no action is required by the developer in Blazor Server apps to register an service. Blazor WebAssembly apps have a default service registration when the app is created from a Blazor WebAssembly project template. If an service registration isn't present in `Program.cs` of a Blazor WebAssembly app, provide one by adding `builder.Services.AddHttpClient();`. For more information, see . +> Server-side apps use a dedicated service to make requests, so no action is required by the developer of a server-side Blazor app to register an service. Client-side apps have a default service registration when the app is created from a Blazor project template. If an service registration isn't present in the `Program` file of a client-side app, provide one by adding `builder.Services.AddHttpClient();`. For more information, see . + +`ShowImage2.razor`: + +:::moniker range=">= aspnetcore-8.0" -`Pages/ShowImage2.razor`: +```razor +@page "/show-image-2" +@attribute [RenderModeServer] +@inject HttpClient Http +@inject IJSRuntime JS -:::moniker range=">= aspnetcore-7.0" +

Stream Image Data Example

+ +

+ +

+ + + +@code { + private async Task GetImageStreamAsync() + { + return await Http.GetStreamAsync( + "https://avatars.githubusercontent.com/u/9141961"); + } + + private async Task SetImageAsync() + { + var imageStream = await GetImageStreamAsync(); + var dotnetImageStream = new DotNetStreamReference(imageStream); + await JS.InvokeVoidAsync("setImage", "image", dotnetImageStream); + } +} +``` + +:::moniker-end + +:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" :::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/images/ShowImage2.razor"::: @@ -126,13 +199,8 @@ The following `ShowImage2` component: ## Additional resources - - * +* [File uploads: Upload image preview](xref:blazor/file-uploads#upload-image-preview) * * * diff --git a/aspnetcore/blazor/includes/location-client-and-server-net6-or-later.md b/aspnetcore/blazor/includes/location-client-and-server-net6-or-later.md new file mode 100644 index 000000000000..d45e0205c842 --- /dev/null +++ b/aspnetcore/blazor/includes/location-client-and-server-net6-or-later.md @@ -0,0 +1,40 @@ +Throughout this article, the terms **client**/**client-side** and **server**/**server-side** are used to distinguish locations where app code executes: + +:::moniker range=">= aspnetcore-8.0" + +* **Client**/**client-side** + * Client-side rendering (CSR) and interactivity of a Blazor Web App. The `Program` file is `Program.cs` of the client project (`BlazorWeb-CSharp.Client`). Blazor script start configuration is found in the `App` component (`Components/App.razor`) of the server project (`BlazorWeb-CSharp`). + * A Blazor WebAssembly app. The `Program` file is `Program.cs`. Blazor script start configuration is found in the `wwwroot/index.html` file. +* **Server**/**server-side**: Server-side rendering (SSR) and interactivity of a Blazor Web App. The `Program` file is `Program.cs` of the server project (`BlazorWeb-CSharp`). Blazor script start configuration is found in the `App` component (`Components/App.razor`). + +Routable components with an `@page` directive are placed in the `Components/Pages` folder. Non-routable shared components are placed in the `Components` folder. + +:::moniker-end + +:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" + +* **Client**/**client-side** + * The **`Client`** project of a hosted Blazor WebAssembly app. + * A Blazor WebAssembly app. + * Blazor script start configuration is found in the `wwwroot/index.html` file. + * The `Program` file is `Program.cs`. +* **Server**/**server-side** + * The **`Server`** project of a hosted Blazor WebAssembly app. + * A Blazor Server app. Blazor script start configuration is found in `Pages/_Host.cshtml`. + * The `Program` file is `Program.cs`. + +:::moniker-end + +:::moniker range="< aspnetcore-7.0" + +* **Client**/**client-side** + * The **`Client`** project of a hosted Blazor WebAssembly app. + * A Blazor WebAssembly app. + * Blazor script start configuration is found in the `wwwroot/index.html` file. + * The `Program` file is `Program.cs`. +* **Server**/**server-side** + * The **`Server`** project of a hosted Blazor WebAssembly app. + * A Blazor Server app. Blazor script start configuration is found in `Pages/_Layout.cshtml`. + * The `Program` file is `Program.cs`. + +:::moniker-end diff --git a/aspnetcore/blazor/includes/location-client-and-server-net7-or-later.md b/aspnetcore/blazor/includes/location-client-and-server-net7-or-later.md new file mode 100644 index 000000000000..552544bb65ec --- /dev/null +++ b/aspnetcore/blazor/includes/location-client-and-server-net7-or-later.md @@ -0,0 +1,26 @@ +Throughout this article, the terms **client**/**client-side** and **server**/**server-side** are used to distinguish locations where app code executes: + +:::moniker range=">= aspnetcore-8.0" + +* **Client**/**client-side** + * Client-side rendering (CSR) and interactivity of a Blazor Web App. The `Program` file is `Program.cs` of the client project (`BlazorWeb-CSharp.Client`). Blazor script start configuration is found in the `App` component (`Components/App.razor`) of the server project (`BlazorWeb-CSharp`). + * A Blazor WebAssembly app. The `Program` file is `Program.cs`. Blazor script start configuration is found in the `wwwroot/index.html` file. +* **Server**/**server-side**: Server-side rendering (SSR) and interactivity of a Blazor Web App. The `Program` file is `Program.cs` of the server project (`BlazorWeb-CSharp`). Blazor script start configuration is found in the `App` component (`Components/App.razor`). + +Routable components with an `@page` directive are placed in the `Components/Pages` folder. Non-routable shared components are placed in the `Components` folder. + +:::moniker-end + +:::moniker range="< aspnetcore-8.0" + +* **Client**/**client-side** + * The **`Client`** project of a hosted Blazor WebAssembly app. + * A Blazor WebAssembly app. + * Blazor script start configuration is found in the `wwwroot/index.html` file. + * The `Program` file is `Program.cs`. +* **Server**/**server-side** + * The **`Server`** project of a hosted Blazor WebAssembly app. + * A Blazor Server app. Blazor script start configuration is found in `Pages/_Host.cshtml`. + * The `Program` file is `Program.cs`. + +:::moniker-end diff --git a/aspnetcore/blazor/includes/location-client-and-server-net8-or-later.md b/aspnetcore/blazor/includes/location-client-and-server-net8-or-later.md new file mode 100644 index 000000000000..ef77fa700673 --- /dev/null +++ b/aspnetcore/blazor/includes/location-client-and-server-net8-or-later.md @@ -0,0 +1,8 @@ +Throughout this article, the terms **client**/**client-side** and **server**/**server-side** are used to distinguish locations where app code executes: + +* **Client**/**client-side** + * Client-side rendering (CSR) and interactivity of a Blazor Web App. The `Program` file is `Program.cs` of the client project (`BlazorWeb-CSharp.Client`). Blazor script start configuration is found in the `App` component (`Components/App.razor`) of the server project (`BlazorWeb-CSharp`). + * A Blazor WebAssembly app. The `Program` file is `Program.cs`. Blazor script start configuration is found in the `wwwroot/index.html` file. +* **Server**/**server-side**: Server-side rendering (SSR) and interactivity of a Blazor Web App. The `Program` file is `Program.cs` of the server project (`BlazorWeb-CSharp`). Blazor script start configuration is found in the `App` component (`Components/App.razor`). + +Routable components with an `@page` directive are placed in the `Components/Pages` folder. Non-routable shared components are placed in the `Components` folder.