重新渲染 Blazor 组件

Question

I have a catalogue page that renders a Blazor component which displays a list of products with the following code:

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

Now, I want to change the values of MinimumPrice and MaximumPrice from the catalogue page and have the blazor component re-rendered after the values have changed.

How can I do that from the catalogue page?

Thanks.

Answer 1

You want to change the razor view and then update the blazor component?

You can submit a form to change the Model.MinimumPrice, because you can't change the Model

in view, it's from server side , so you should change it in server side too.

This is the demo:

blazor component:

<p>Min:@MinimumPrice</p>

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

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

Razor view:

<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" />

server side:

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

Result: