重新渲染 Blazor 组件

问题描述

我有一个目录页面，它呈现一个 Blazor 组件，该组件显示具有以下代码的产品列表：

@(await Html.RenderComponentAsync<ProductList>(RenderMode.ServerPrerendered,new { MinimumPrice = Model.MinimumPrice,MaximumPrice = Model.MaximumPrice }))

现在，我想从目录页面更改 MinimumPrice 和 MaximumPrice 的值，并在值更改后重新呈现 blazor 组件。

如何从目录页面执行此操作？

谢谢。

解决方法

您想更改 razor 视图，然后更新 blazor 组件？

您可以提交表单来更改 Model.MinimumPrice，因为您无法更改 Model

看来，它是来自服务器端，所以你也应该在服务器端更改它。

这是演示：

blazor 组件：

<p>Min:@MinimumPrice</p>

@code {
[Parameter]
public int MinimumPrice { get; set; }

[Parameter]
public int MaximumPrice { get; set; }
}

剃刀视图：

<form method="post">
Change min to<input type="text" name="value"/>
<input type="submit" value="ok" class="btn btn-primary" />
</form>
<component type="typeof(S42111.Components.ProductList)" render-mode="Static" param-MinimumPrice="Model.MinimumPrice" param-MaximumPrice="10" />

服务器端：

[BindProperty]
    public int MinimumPrice { get; set; }
    public void OnGet()
    {
        MinimumPrice = 1;
    }
    public async Task<IActionResult> OnPostAsync(int value)
    {
        this.MinimumPrice = value;
        return Page();
    }

结果：