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:

1 var builder = WebAssemblyHostBuilder.CreateDefault(args);
2 builder.RootComponents.Add("#app");
3 builder.RootComponents.Add("head::after");
4 
5 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("http://localhost:5014/") });
6 
7 await builder.Build().RunAsync();

修改了第6行,仅修改了webapi服务器地址。这一行说明httpclient是作用域注入(这里相当于单例)。

index.razor:

 1 @page "/"
 2 @inject HttpClient Http
 3 
 4 用户名:密码:
5 结果:@msg
6 7 @code { 8 private string u=string.Empty; 9 private string p=string.Empty; 10 private string msg="提示"; 11 int c = 1; 12 13 private async void Sub() 14 { 15 msg=await Http.GetStringAsync($"/api/values/index1/{c}"); 16 c++; 17 StateHasChanged(); 18 } 19 }

第2行,注入。代码里可以用Http表示单例的HttpClient。

第17行的StateHasChanged();用于强制刷新,此处强制刷新第5行处。