ASP.NET základních Blazor Hybrid statických souborů

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete v tomto článku ve verzi .NET 9.

Upozorňující

Tato verze ASP.NET Core se už nepodporuje. Další informace najdete v zásadách podpory .NET a .NET Core. Aktuální verzi najdete v tomto článku ve verzi .NET 9.

Důležité

Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.

Aktuální verzi najdete v tomto článku ve verzi .NET 9.

Tento článek popisuje, jak používat statické soubory assetů v Blazor Hybrid aplikacích.

Blazor Hybrid Statické soubory jsou v aplikaci prostředky aplikace, ke které přistupují Razor komponenty pomocí následujících přístupů:

• .NET MAUI: .NET MAUI file system helpers
• WPF a model Windows Forms:ResourceManager

Pokud se statické prostředky používají jenom v Razor komponentách, je možné statické prostředky využívat z webového kořenového adresáře (wwwroot složky) podobným způsobem jako Blazor WebAssembly aplikace a Blazor Server aplikace. Další informace najdete v části Statické prostředky omezené na Razor součásti .

.NET MAUI

V .NET MAUI aplikacích se nezpracované prostředky používající MauiAsset akci sestavení a .NET MAUI file system helpers používají se pro statické prostředky.

Poznámka:

Rozhraní, třídy a podpůrné typy pro práci s úložištěm na zařízeních na všech podporovaných platformách pro funkce, jako je volba souboru, ukládání předvoleb a používání zabezpečeného úložiště, jsou v Microsoft.Maui.Storage oboru názvů. Obor názvů je k dispozici v celé aplikaci MAUI Blazor Hybrid , takže není nutné zadávat using příkaz v souboru třídy nebo direktivě @usingRazor v komponentě Razor oboru názvů.

Umístěte nezpracované prostředky do Resources/Raw složky aplikace. Příklad v této části používá statický textový soubor.

Resources/Raw/Data.txt:

This is text from a static text file resource.

Razor Následující komponenta:

• Volání OpenAppPackageFileAsync k získání Stream prostředku
• Stream Čte s příponou StreamReader.
• Volání StreamReader.ReadToEndAsync ke čtení souboru.

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.");
        }
    }
}

Další informace naleznete v následujících zdrojích:

• Cílení na více platforem z .NET MAUI jednoho projektu (.NET MAUI dokumentace)
• Zlepšení konzistence pomocí nástroje pro změnu velikosti (dotnet/maui #4367)

WPF

Umístěte prostředek do složky aplikace, obvykle v kořenovém adresáři projektu, například Resources do složky. Příklad v této části používá statický textový soubor.

Resources/Data.txt:

This is text from a static text file resource.

Properties Pokud složka v aplikaci neexistuje, vytvořte Properties složku v kořenovém adresáři aplikace.

Properties Pokud složka neobsahuje soubor prostředků (Resources.resx), vytvořte ho v Průzkumník řešení pomocí příkazu místní nabídky Přidat>novou položku.

Poklikejte na Resource.resx soubor.

V rozevíracím seznamu vyberte Soubory řetězců>.

Vyberte Přidat prostředek>Přidat existující soubor. Pokud visual Studio zobrazí výzvu k potvrzení úprav souboru, vyberte Ano. Přejděte do Resources složky, vyberte Data.txt soubor a vyberte Otevřít.

V následující ukázkové komponentě ResourceManager.GetString získá text prostředku řetězce pro zobrazení.

Upozorňující

Nikdy nepoužívejte ResourceManager metody s nedůvěryhodnými daty.

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 Forms

Umístěte prostředek do složky aplikace, obvykle v kořenovém adresáři projektu, například Resources do složky. Příklad v této části používá statický textový soubor.

Resources/Data.txt:

This is text from a static text file resource.

Prozkoumejte soubory přidružené Form1 k Průzkumník řešení. Pokud Form1 soubor prostředků nemá (.resx), přidejte Form1.resx soubor pomocí příkazu místní nabídky Přidat>novou položku.

Poklikejte na Form1.resx soubor.

V rozevíracím seznamu vyberte Soubory řetězců>.

Vyberte Přidat prostředek>Přidat existující soubor. Pokud visual Studio zobrazí výzvu k potvrzení úprav souboru, vyberte Ano. Přejděte do Resources složky, vyberte Data.txt soubor a vyberte Otevřít.

V následující ukázkové komponentě:

• Název sestavení aplikace je WinFormsBlazor. Základní ResourceManagernázev je nastaven na název Form1 sestavení ( WinFormsBlazor.Form1).
• ResourceManager.GetString získá text prostředku řetězce pro zobrazení.

Upozorňující

Nikdy nepoužívejte ResourceManager metody s nedůvěryhodnými daty.

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.";
    }
}

Statické prostředky omezené na Razor komponenty

Ovládací BlazorWebView prvek má obvykle nakonfigurovaný hostitelský soubor (HostPage).wwwroot/index.html Cesta HostPage je relativní vzhledem k projektu. Všechny statické webové prostředky (skripty, soubory CSS, obrázky a další soubory), na které odkazují, BlazorWebView jsou relativní vzhledem k jeho nakonfigurované HostPage.

Statické webové prostředky z Razor knihovny tříd (RCL) používají speciální cesty: _content/{PACKAGE ID}/{PATH AND FILE NAME}. Zástupný symbol {PACKAGE ID} je ID balíčku knihovny. Pokud v souboru projektu není zadaný parametr <PackageId>, jako ID balíčku se ve výchozím nastavení použije název sestavení projektu. Zástupný {PATH AND FILE NAME} symbol je cesta a název souboru v části wwwroot. Tyto cesty jsou logicky dílčími cestami složky aplikace wwwroot , i když ve skutečnosti pocházejí z jiných balíčků nebo projektů. Sady stylů CSS specifické pro jednotlivé komponenty jsou také vytvořeny v kořenovém adresáři wwwroot složky.

Webová kořenová HostPage kopie určuje, která podmnožina statických prostředků je k dispozici:

• wwwroot/index.html (doporučeno): Všechny prostředky ve složce aplikace wwwroot jsou k dispozici (například: wwwroot/image.png jsou k dispozici od /image.png), včetně podsložek (například: wwwroot/subfolder/image.png je k dispozici od /subfolder/image.png). Statické prostředky RCL ve složce seznamu RCL wwwroot jsou k dispozici (například: wwwroot/image.png je k dispozici z cesty _content/{PACKAGE ID}/image.png), včetně podsložek (například: wwwroot/subfolder/image.png je k dispozici z cesty _content/{PACKAGE ID}/subfolder/image.png).
• wwwroot/{PATH}/index.html: Všechny prostředky ve složce aplikace wwwroot/{PATH} jsou k dispozici pomocí relativních cest kořenového adresáře aplikace. Statické prostředky wwwroot/{PATH} RCL nejsou, protože by byly v neexistující teoretické lokalitě, například ../../_content/{PACKAGE ID}/{PATH}, což není podporovaná relativní cesta.
• wwwroot/_content/{PACKAGE ID}/index.html: Všechny prostředky ve složce seznamu RCL wwwroot/{PATH} jsou k dispozici pomocí relativních cest kořenového adresáře webu RCL. Statické prostředky wwwroot/{PATH} aplikace nejsou, protože by byly v neexistující teoretické lokalitě, například ../../{PATH}, což není podporovaná relativní cesta.

U většiny aplikací doporučujeme umístit HostPage kořen wwwroot složky aplikace, která poskytuje největší flexibilitu pro poskytování statických prostředků z aplikace, seznamů RCLS a prostřednictvím podsložek aplikace a seznamů RCLS.

Následující příklady ukazují odkazování na statické prostředky z webového kořenového adresáře (wwwroot složky) aplikace s kořenovým adresářem HostPage ve wwwroot složce.

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');
}

Následující obrázek Jeepu® se také používá v tomto příkladu oddílu. Kliknutím pravým tlačítkem myši na následující obrázek ho můžete uložit místně pro použití v místní testovací aplikaci.

wwwroot/jeep-yj.png:

V komponentě Razor :

• Obsah statického textového souboru lze číst pomocí následujících technik:
  • .NET MAUI: .NET MAUI file system helpers (OpenAppPackageFileAsync)
  • WPF a model Windows Forms:StreamReader.ReadToEndAsync
• Soubory JavaScriptu jsou k dispozici v logických dílčích wwwroot cestách s použitím ./ cest.
• Image může být zdrojovým atributem (src) značky obrázku (<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)
            {
            }
        }
    }
}

V .NET MAUI aplikacích přidejte následující ReadData metodu @code do bloku předchozí komponenty:

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

    return await reader.ReadToEndAsync();
}

V aplikacích WPF a model Windows Forms přidejte následující ReadData metodu @code do bloku předchozí komponenty:

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

    return await reader.ReadToEndAsync();
}

Kompletované javascriptové soubory jsou přístupné také na logických dílčích wwwrootcestách . Místo použití skriptu popsaného výše pro showPrompt funkci v wwwroot/scripts.js, následující kompletovaný javascriptový soubor pro StaticAssetExample2 komponentu také zpřístupní funkci.

Pages/StaticAssetExample2.razor.js:

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

Upravte odkaz na objekt modulu v komponentě StaticAssetExample2 tak, aby používal cestu ke kompletovanému souboru JavaScriptu (./Pages/StaticAssetExample2.razor.js):

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

Ochranné známky

Jeep a Jeep YJ jsou registrované ochranné známky FCA US LLC (Stellantis NV).

Další materiály

• ResourceManager
• Vytváření souborů prostředků pro aplikace .NET (dokumentace k základům .NET)
• Postupy: Použití prostředků v lokalizovatelných aplikacích (dokumentace WPF)