ASP.NET file statici core Blazor Hybrid

2024-11-12

Nota

Questa non è la versione più recente di questo articolo. Per la versione corrente, vedere la versione .NET 9 di questo articolo.

Avviso

Questa versione di ASP.NET Core non è più supportata. Per altre informazioni, vedere i criteri di supporto di .NET e .NET Core. Per la versione corrente, vedere la versione .NET 9 di questo articolo.

Importante

Queste informazioni si riferiscono a un prodotto non definitive che può essere modificato in modo sostanziale prima che venga rilasciato commercialmente. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni qui fornite.

Per la versione corrente, vedere la versione .NET 9 di questo articolo.

Questo articolo descrive come usare i file di asset statici nelle Blazor Hybrid app.

In un'app Blazor Hybrid i file statici sono risorse dell'app, accessibili dai Razor componenti usando gli approcci seguenti:

Quando gli asset statici vengono usati solo nei Razor componenti, gli asset statici possono essere utilizzati dalla radice Web (wwwrootcartella) in modo analogo a e Blazor Server alle Blazor WebAssembly app. Per altre informazioni, vedere la sezione Asset statici limitati ai Razor componenti .

.NET MAUI

Nelle .NET MAUI app, gli asset non elaborati che usano l'azione MauiAsset di compilazione e .NET MAUI file system helpers vengono usati per gli asset statici.

Nota

Interfacce, classi e tipi di supporto da usare con l'archiviazione nei dispositivi in tutte le piattaforme supportate per funzionalità come la scelta di un file, il salvataggio delle preferenze e l'uso dell'archiviazione sicura si trovano nello spazio dei Microsoft.Maui.Storage nomi. Lo spazio dei nomi è disponibile in un'app MAUI Blazor Hybrid , quindi non è necessario specificare un'istruzione using in un file di classe o una @usingRazor direttiva in un Razor componente per lo spazio dei nomi.

Inserire gli asset non elaborati nella Resources/Raw cartella dell'app. L'esempio in questa sezione usa un file di testo statico.

Resources/Raw/Data.txt:

This is text from a static text file resource.

Componente seguente Razor :

Chiama OpenAppPackageFileAsync per ottenere un Stream oggetto per la risorsa.
Stream Legge con un oggetto StreamReader.
Chiama StreamReader.ReadToEndAsync per leggere il file.

Pages/StaticAssetExample.razor:

@page "/static-asset-example"
@using System.IO
@using Microsoft.Extensions.Logging
@inject ILogger<StaticAssetExample> Logger

<h1>Static Asset Example</h1>

<p>@dataResourceText</p>

@code {
    public string dataResourceText = "Loading resource ...";

    protected override async Task OnInitializedAsync()
    {
        try
        {
            using var stream = 
                await FileSystem.OpenAppPackageFileAsync("Data.txt");
            using var reader = new StreamReader(stream);

            dataResourceText = await reader.ReadToEndAsync();
        }
        catch (FileNotFoundException ex)
        {
            dataResourceText = "Data file not found.";
            Logger.LogError(ex, "'Resource/Raw/Data.txt' not found.");
        }
    }
}

Per ulteriori informazioni, vedi le seguenti risorse:

WPF

Posizionare l'asset in una cartella dell'app, in genere nella radice del progetto, ad esempio una Resources cartella. L'esempio in questa sezione usa un file di testo statico.

Resources/Data.txt:

This is text from a static text file resource.

Se nell'app non esiste una Properties cartella, creare una Properties cartella nella radice dell'app.

Se la Properties cartella non contiene un file di risorse (Resources.resx), creare il file in Esplora soluzioni con il comando di menu contestuale Aggiungi>nuovo elemento.

Fare doppio clic sul file Resource.resx.

Selezionare Strings Files (File di stringhe>) nell'elenco a discesa.

Selezionare Aggiungi risorsa>Aggiungi file esistente. Se viene richiesto da Visual Studio di confermare la modifica del file, selezionare Sì. Passare alla Resources cartella, selezionare il Data.txt file e selezionare Apri.

Nel componente ResourceManager.GetString di esempio seguente ottiene il testo della risorsa stringa per la visualizzazione.

Avviso

Non usare ResourceManager mai metodi con dati non attendibili.

StaticAssetExample.razor:

@page "/static-asset-example"
@using System.Resources

<h1>Static Asset Example</h1>

<p>@dataResourceText</p>

@code {
    public string dataResourceText = "Loading resource ...";

    protected override void OnInitialized()
    {
        var resources = 
            new ResourceManager(typeof(WpfBlazor.Properties.Resources));

        dataResourceText = resources.GetString("Data") ?? "'Data' not found.";
    }
}

Windows Form

Posizionare l'asset in una cartella dell'app, in genere nella radice del progetto, ad esempio una Resources cartella. L'esempio in questa sezione usa un file di testo statico.

Resources/Data.txt:

This is text from a static text file resource.

Esaminare i file associati a Form1 in Esplora soluzioni. Se Form1 non ha un file di risorse (.resx), aggiungere un Form1.resx file con il comando di menu contestuale Aggiungi>nuovo elemento.

Fare doppio clic sul file Form1.resx.

Selezionare Strings Files (File di stringhe>) nell'elenco a discesa.

Nel componente di esempio seguente:

Il nome dell'assembly dell'app è WinFormsBlazor. Il ResourceManagernome di base del parametro è impostato sul nome dell'assembly di Form1 ( WinFormsBlazor.Form1).
ResourceManager.GetString ottiene il testo della risorsa stringa per la visualizzazione.

Avviso

Non usare ResourceManager mai metodi con dati non attendibili.

StaticAssetExample.razor:

@page "/static-asset-example"
@using System.Resources

<h1>Static Asset Example</h1>

<p>@dataResourceText</p>

@code {
    public string dataResourceText = "Loading resource ...";

    protected override async Task OnInitializedAsync()
    {   
        var resources = 
            new ResourceManager("WinFormsBlazor.Form1", this.GetType().Assembly);

        dataResourceText = resources.GetString("Data") ?? "'Data' not found.";
    }
}

Asset statici limitati ai Razor componenti

Un BlazorWebView controllo ha un file host configurato (HostPage), in wwwroot/index.htmlgenere . Il HostPage percorso è relativo al progetto. Tutti gli asset Web statici (script, file CSS, immagini e altri file) a cui viene fatto riferimento da un BlazorWebView oggetto sono relativi alla relativa configurazione HostPage.

Gli asset Web statici di una libreria di Razor classi (RCL) usano percorsi speciali: _content/{PACKAGE ID}/{PATH AND FILE NAME}. Il segnaposto {PACKAGE ID} è l'ID pacchetto della libreria. Per impostazione predefinita, l'ID pacchetto è il nome dell'assembly del progetto, se <PackageId> non è specificato nel file di progetto. Il {PATH AND FILE NAME} segnaposto è percorso e nome file in wwwroot. Questi percorsi sono percorsi logicamente secondari della cartella dell'app wwwroot , anche se provengono effettivamente da altri pacchetti o progetti. I bundle di stile CSS specifici del componente vengono creati anche nella radice della wwwroot cartella.

La radice Web di HostPage determina quale subset di asset statici sono disponibili:

wwwroot/index.html (scelta consigliata): tutti gli asset nella cartella dell'app wwwroot sono disponibili (ad esempio: wwwroot/image.png è disponibile da /image.png), incluse le sottocartelle (ad esempio: wwwroot/subfolder/image.png è disponibile da /subfolder/image.png). Gli asset statici RCL nella cartella RCL wwwroot sono disponibili (ad esempio: wwwroot/image.png è disponibile nel percorso _content/{PACKAGE ID}/image.png), incluse le sottocartelle (ad esempio: wwwroot/subfolder/image.png è disponibile dal percorso _content/{PACKAGE ID}/subfolder/image.png).
wwwroot/{PATH}/index.html: tutti gli asset nella cartella dell'app wwwroot/{PATH} sono disponibili usando i percorsi relativi relativi della radice Web dell'app. Gli asset statici RCL in wwwroot/{PATH} non sono perché si trovano in una posizione teorica inesistente, ad esempio ../../_content/{PACKAGE ID}/{PATH}, che non è un percorso relativo supportato.
wwwroot/_content/{PACKAGE ID}/index.html: tutti gli asset nella cartella rcl wwwroot/{PATH} sono disponibili usando i percorsi relativi della radice Web RCL. Gli asset statici dell'app in wwwroot/{PATH} non sono perché si trovano in una posizione teorica inesistente, ad esempio ../../{PATH}, che non è un percorso relativo supportato.

Per la maggior parte delle app, ti consigliamo di posizionare nella HostPage radice della wwwroot cartella dell'app, che offre la massima flessibilità per fornire asset statici dall'app, dalle DLL e dalle sottocartelle dell'app e degli RCL.

Gli esempi seguenti illustrano come fare riferimento ad asset statici dalla radice Web dell'app (wwwroot cartella) con una HostPage radice nella wwwroot cartella .

wwwroot/data.txt:

This is text from a static text file resource.

wwwroot/scripts.js:

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

Nell'esempio di questa sezione viene usata anche l'immagine Jeep® seguente. È possibile fare clic con il pulsante destro del mouse sull'immagine seguente per salvarla in locale per l'uso in un'app di test locale.

wwwroot/jeep-yj.png:

Jeep YJ®

In un Razor componente:

Il contenuto del file di testo statico può essere letto usando le tecniche seguenti:
- .NET MAUI: .NET MAUI file system helpers (OpenAppPackageFileAsync)
- WPF e Windows Form:StreamReader.ReadToEndAsync
I file JavaScript sono disponibili in percorsi secondari logici dell'uso ./ dei wwwroot percorsi.
L'immagine può essere l'attributo di origine (src) di un tag immagine (<img>).

StaticAssetExample2.razor:

@page "/static-asset-example-2"
@using Microsoft.Extensions.Logging
@implements IAsyncDisposable
@inject IJSRuntime JS
@inject ILogger<StaticAssetExample2> Logger

<h1>Static Asset Example 2</h1>

<h2>Read a file</h2>

<p>@dataResourceText</p>

<h2>Call JavaScript</h2>

<p>
    <button @onclick="TriggerPrompt">Trigger browser window prompt</button>
</p>

<p>@result</p>

<h2>Show an image</h2>

<p><img alt="1991 Jeep YJ" src="/jeep-yj.png" /></p>

<p>
    <em>Jeep</em> and <em>Jeep YJ</em> are registered trademarks of 
    <a href="https://www.stellantis.com">FCA US LLC (Stellantis NV)</a>.
</p>

@code {
    private string dataResourceText = "Loading resource ...";
    private IJSObjectReference? module;
    private string result;

    protected override async Task OnInitializedAsync()
    {   
        try
        {
            dataResourceText = await ReadData();
        }
        catch (FileNotFoundException ex)
        {
            dataResourceText = "Data file not found.";
            Logger.LogError(ex, "'wwwroot/data.txt' not found.");
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            module = await JS.InvokeAsync<IJSObjectReference>("import",
                "./scripts.js");
        }
    }

    private async Task TriggerPrompt()
    {
        result = await Prompt("Provide some text");
    }

    public async ValueTask<string> Prompt(string message) =>
        module is not null ?
            await module.InvokeAsync<string>("showPrompt", message) : null;

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is not null)
        {
            try
            {
                await module.DisposeAsync();
            }
            catch (JSDisconnectedException)
            {
            }
        }
    }
}

Nelle .NET MAUI app aggiungere il metodo seguente ReadData al @code blocco del componente precedente:

private async Task<string> ReadData()
{
    using var stream = await FileSystem.OpenAppPackageFileAsync("wwwroot/data.txt");
    using var reader = new StreamReader(stream);

    return await reader.ReadToEndAsync();
}

Nelle app WPF e Windows Form aggiungere il metodo seguente ReadData al @code blocco del componente precedente:

private async Task<string> ReadData()
{
    using var reader = new StreamReader("wwwroot/data.txt");

    return await reader.ReadToEndAsync();
}

I file JavaScript collocati sono accessibili anche nei sottopath logici di wwwroot. Anziché usare lo script descritto in precedenza per la showPrompt funzione in wwwroot/scripts.js, il file JavaScript collocato seguente per il StaticAssetExample2 componente rende disponibile anche la funzione .

Pages/StaticAssetExample2.razor.js:

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

Modificare il riferimento all'oggetto StaticAssetExample2 modulo nel componente per usare il percorso del file JavaScript collocato (./Pages/StaticAssetExample2.razor.js):

module = await JS.InvokeAsync<IJSObjectReference>("import", 
    "./Pages/StaticAssetExample2.razor.js");

Marchi

Jeep e Jeep YJ sono marchi registrati di FCA US LLC (Stellantis NV).

Condividi tramite

ASP.NET file statici core Blazor Hybrid

.NET MAUI

WPF

Windows Form

Asset statici limitati ai Razor componenti

Marchi

Risorse aggiuntive

Commenti e suggerimenti

Risorse aggiuntive