Blazor訪問WebApi基礎及Blazor刷新問題

一個小demo。

webapi跨域問題，參見VS2019下開發和調用webapi

webapi

代碼：

[Route("api/[controller]/[action]")]
    [ApiController]
    public class ValuesController : ControllerBase
    {
        public string Index()
        {
            return "Hello Katty.";
        }
        [HttpGet("{x}")]
        public string Index1(string x)
        {
            return x + ",Hello Katty.";
        }
    }

blazor

program.cs:

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("http://localhost:5014/") });

await builder.Build().RunAsync();

修改了第6行，僅修改了webapi服務器地址。這一行說明httpclient是作用域注入（這里相當於單例）。

index.razor:

@page "/"
@inject HttpClient Http

用戶名：<input @bind=u />密碼：<input @bind=p /><br />
結果：@msg<br />
<button @onclick="Sub">提交</button>
@code {
    private string u=string.Empty;
    private string p=string.Empty;
    private string msg="提示";
    int c = 1;

    private async void Sub()
    {
        msg=await Http.GetStringAsync($"/api/values/index1/{c}");
        c++;
        StateHasChanged();
    }
}

第2行，注入。代碼里可以用Http表示單例的HttpClient。

第17行的StateHasChanged();用於強制刷新，此處強制刷新第5行處。