Blazor:单击按钮时调用服务器方法吗?

时间:2019-10-03 03:47:31

标签: asp.net-core blazor

我创建了一个示例Blazor项目。脚手架有两个示例,(1)调用网页中存在的C#方法=计数器,(2)在网页初始化=天气表的开始处调用服务器方法。但是,没有任何单击按钮时调用服务器方法并获得结果的示例。有可能吗?

例如,我可以在“ WeathrForecastService.cs”中添加这样的方法吗?

    public int Add(int a, int b)
    {
        return a + b;
    }

并像“计数器”示例一样,在页面上添加一个按钮,然后单击按钮,显示其结果:

@page "/fetchdata"

@using BlazorApp1.Data
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <p>Current count: @[display the result of ForecastService.Add(1,2)]</p>
    <button class="btn btn-primary" @onclick="[call ForecastService.Add(1,2)]">Click me</button>
}

@code {
    WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

1 个答案:

答案 0 :(得分:0)

  

调用服务器方法并在单击按钮时获取结果。有可能吗?

是的。如果您使用的是Blazor服务器端,则将通过内部的SignalR调用服务器端方法。

类似于我们在Angular / React中所做的那样,为了显示结果,我们需要创建一个_sum字段来缓存结果,以便以后可以显示/更改它:

@code {
    private int _sum;
}

并如下更改您的onclick

<p>Current count: @this._sum</p>
<button class="btn btn-primary" @onclick="()=>this._sum= ForecastService.Add(1, 2)" >Click me</button>