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

Question

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

Answer 1

有条件地在MVC或Razor页面上渲染Blazor组件

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

然后，您可以使用与普通MVC / Razor中相同的方式来使用条件渲染，以确定应在页面上呈现组件的位置。

在下面的示例中，我的Razor页面在其模型背后的代码中有一个名为CaseId的属性，但这同样可以是在MVC页面的code部分中声明的变量，并可以从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中写了很多有关动态/条件组件渲染的内容。