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>("#app");
3 builder.RootComponents.Add<HeadOutlet>("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 用户名：<input @bind=u />密码：<input @bind=p /><br />
 5 结果：@msg<br />
 6 <button @onclick="Sub">提交</button>
 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行处。

posted on 2022-01-07 22:55 万金流阅读(994) 评论(0) 编辑收藏举报