重新渲染 Blazor 组件答案

【问题标题】：Re-render Blazor Component重新渲染 Blazor 组件
【发布时间】：2021-04-20 18:42:50
【问题描述】：

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

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

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

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

谢谢。

【问题讨论】：

您对我的帖子有任何问题吗？如果您有任何疑问，请随时提问。如果有帮助，可以set it as an answer，这样可以帮助更多的人。

标签： c# asp.net asp.net-core asp.net-blazor

【解决方案1】：

您想更改 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();
    }

结果：

【讨论】：