如何将 Blazor 组件/视图加载到特定的 div

Question

在 JavaScript 中，可以将视图加载到特定容器或 div 中，例如使用 $("#div1").load("/Home/GetPartial")。如何在 Blazor 中实现相同的功能，我希望能够指定页面中的哪个 div 加载视图/组件并传递参数。

Answer 1

在 MVC 或 Razor 页面上有条件地呈现 Blazor 组件

RenderComponentAsync 方法可用于将 Blazor 组件呈现到特定位置的 MVC 或 Razor 页面上。

然后，您可以像在普通 MVC/Razor 中一样使用条件渲染来确定应该在页面上的哪个位置渲染组件。

在下面的示例中，我的 Razor 页面在其代码隐藏模型中有一个名为 CaseId 的属性，但它同样可以是在 MVC 页面的代码部分中声明并从 URL 的参数中检索的变量。

<div class='new-column'>
  @if (Model.Status = "New")
  {
    @(await Html.RenderComponentAsync<SprintCase>(RenderMode.Server,
      new { CaseId = Model.CaseId }))
  }
</div>

<div class='in-progress-column'>
  @if (Model.Status  = "In Progress")
  {
    @(await Html.RenderComponentAsync<SprintCase>(RenderMode.Server,
      new { CaseId = Model.CaseId }))
  }
</div>

<div class='complete-column'>
  @if (Model.Status = "Complete")
  {
    @(await Html.RenderComponentAsync<SprintCase>(RenderMode.Server,
      new { CaseId = Model.CaseId }))
  }
</div>

这应该适用于在首次加载时将组件渲染到正确的位置。

如果您想动态更新 MVC/Razor 页面，而不重新加载整个页面，我认为您应该能够以与通常在 MVC 中使用部分视图相同的方式进行更新，即拥有一个控制器端点它返回一个包含上面代码的局部视图，并且应该以与局部视图只是返回 HTML 相同的方式呈现。我还没有尝试过，所以我不能完全确定。

您还需要在您的 MVC 应用程序中运行 Blazor，这里有 more on that here。

在另一个 Blazor 组件中有条件地呈现 Blazor 组件

这种情况要简单得多，您只需要在组件的@code 块或其他一些属性中设置一个属性即可执行开关。每当该属性发生更改时，组件应自动重新渲染，但如果没有，您可以通过调用 StateHasChanged 来提示它

<div class='new-column'>
  @if (Model.Status = "New")
  {
    <SprintCase CaseId=Model.CaseId />
  }
</div>

<div class='in-progress-column'>
  @if (Model.Status  = "In Progress")
  {
    <SprintCase CaseId=Model.CaseId />
  }
</div>

<div class='complete-column'>
  @if (Model.Status = "Complete")
  {
    <SprintCase CaseId=Model.CaseId />
  }
</div>

@code {
  private SprintCase Model { get; set; }

}

其中SprintCase 是您要有条件地呈现的 Blazor 组件的名称。

我在this answer too 中写了很多关于动态/条件组件渲染的内容。