如何從 MVC/Razor 頁面將參數傳遞給頂級服務器端 blazor 組件？

Question

將 Blazor 組件添加到現有 MVC 或 Razor 頁面時，能夠將參數傳遞到 Blazor 組件中非常有用，例如將 MVC 頁面的 URL（例如 ID）中的參數傳遞到組件上。

在 Core 3 Preview 9 之前，這對於使用以下語法的服務器渲染組件是可能的：

@(await Html.RenderComponentAsync<NewJobComponent>(new { SaleId = Model.SaleId }))

但是從 Preview 9 開始， 參數只能傳遞給靜態呈現的 Blazor 組件。

組件仍然需要從外部MVC頁面知道信息，這如何實現？

Answer 1

更新

這種用於將參數傳遞給所有類型的頂級組件的工具現在從 .NET Core 3.1 Preview 1 開始恢復，正如 Dan Roth 在這篇博文中所討論的：

將參數傳遞給頂級組件

Blazor 服務器應用程序現在可以在初始渲染期間將參數傳遞給頂級組件。 以前，您只能使用RenderMode.Static將參數傳遞給頂級組件。 在此版本中，現在支持RenderMode.Server和RenderModel.ServerPrerendered 。 任何指定的參數值都被序列化為 JSON 並包含在初始響應中。

例如，您可以使用特定的當前計數預渲染 Counter 組件，如下所示：

 Html.RenderComponentAsync<Counter>(RenderMode.ServerPrerendered, new { CurrentCount = 123 })) ```

原答案

由於圍繞頁面的有狀態預渲染的性能問題，此功能已被刪除，希望是暫時的。

在 Blazor 組件中檢索 URL 參數和 ID

希望直接將參數傳遞給組件的工具將返回，但與此同時，可以通過將NavigationManager （以前稱為IUriHelper ）注入到組件中，在 Blazor 組件中檢索來自外部 MVC 頁面 URL 的參數：

@Inject NavigationManager navigationManager;

然后，您可以使用此處討論的這種方法從 URL 訪問命名參數：

 protected override void OnParametersSet() { var uri = new Uri(navMan.Uri); string myparamStr= Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(uri.Query).TryGetValue("myparam", out var myparam) ? myparam.First() : ""; }

如果您從 URL 獲取 ID（例如www.mysite.com/sales/32 ），那么您可以執行以下操作：

public static bool GetIdFromUri(string uriAddress, out int id)
{
    var uri = new Uri(uriAddress);

    string lastSegment = uri.Segments.Last();

    if (!string.IsNullOrWhiteSpace(lastSegment) && int.TryParse(lastSegment, out var paramId))
    {
        id = paramId;
        return true;
    }

    id = -1;
    return false;
}

使用包裝器組件保持關注點分離的完整性

向組件中添加查詢 URL 的功能將限制該組件的可重用性，因為它現在依賴於特定格式的 URL。

一種解決方案是為我們正在構建的組件創建一個額外的包裝器 Blazor 組件。

然后，該包裝器組件將負責從頁面的 URL 中提取值（例如，使用上述方法），或者可以使用 Blazor 的 JS Interop 從頁面中檢索數據，然后將這些值傳遞給實際執行操作的 Blazor 組件工作。

這允許原始組件繼續使用參數並允許該組件可重用。 它還提供了更好的關注點分離，並避免了在選擇將參數直接傳遞給組件返回時以后需要打開已完成的組件的需要（在這種情況下，可以簡單地刪除包裝器組件）

在這個 github issue上有更多關於所有這些的討論。

Answer 2

ASP.NET Core 3.1 從您的 MVC 視圖中，您可以使用param-將參數傳遞給 Server / Server-Prerenders 組件

例如

<div class="mb-4">
    <component type="typeof(TestStorables)"
               render-mode="Server"
               param-UserId="@Model.UserId"
               param-AccountId="@Model.AccountId"
               param-Environment="@Model.Environment"
               param-Title="@Convert.ToString("Test Storable")"
               param-PartitionKey="@Model.AccountId"
               param-Limit="10" />

</div>