Blazor学习记录_10.C#和JS互操作_访问WEB API

23.C#和JS互操作

23.1 C#调用JS,使用IJSRuntime

js代码：
<button onclick="javascript:alter("提示信息")">点我弹出提示</button>
C#调用JS:JsInteractive.razor页面代码，InvokeVoidAsync()方法和InvokeAsync() 方法

@Page "/jsinteractive"
<button @onclick="ShowAlter">点我弹出提示</button>
<button @onclick="Prompt">点我弹出框</button>
您输入的姓名是：@Value

@inject IJSRuntime JS
@code
{
string? Value{get;set;}
async Task ShowAlert()
    {
        await JS.InvokeVoidAsync("alert"，"提示信息");
    }
async Task Prompt()
    {
       Value = await JS.InvokeAsync<string>("prompt"，"请输入姓名");
    }
}

23.2 JS调用C#的方法一(不推荐)，JS调用C#静态方法

• 1.要求C#方法必须是静态方法
• 2.必须在静态方法上打上[JSInvokable]特性标签
• 3.在js中使用静态对象DotNet,同步方法使用DotNet.invokeMethod('C#程序集','方法名','参数1','参数2'...) ;异步方法使用DotNet.invokeMethodAsync('C#程序集','方法名','参数1','参数2'...)

23.3 JS调用C#的方法二(推荐)，JS调用C#实例方法

• 1.方法是public
• 2.必须在方法上打上[JSInvokable]特性标签
• 3.用C#代码转写一个方法
  包含将来要被js调用的方法Add()和AddAsync()的C#类 JsFunc

public class JsFunc
{
    [JSInvokable]
    public int Add()
    {
        return 1+5;
    }
    [JSInvokable]
    public Task<int> AddAsync()
    {
        return Task.FromResult(1+5);
    }
}

做转写，JsInteractive.razor

@Page "/js"
<button @onclick="Add">Add</button>
<button @onclick="AddAsync">AddAsync</button>
@Inject IJSRuntime JS
@code
{
    async Task Add()
    {
        var js = DotNetObjectReference.Create(new JsFunc());
        await JS.InvokeVoidAsync("add",js);
    }
    async Task AddAsync()
    {
        var js = DotNetObjectReference.Create(new JsFunc());
        await JS.InvokeVoidAsync("addAsync",js);
    }
}

js 调用方 app.js

function add(dotNet)
{
    let result = dtonet.invikeMethod('Add');
    console.log(result);
}
function addAsync(dotNet)
{
    let result = dtonet.invikeMethodAsync('AddAsync');
    console.log(result);
}

24. 访问WEB API

• 1.注册 HttpClient 服务
  builder.Services.AddScoped(new HttpClient{BaseAddress="http://localhost:7008"});
  有时要注册跨域服务：
  builder.Services.AddCors(options=>options.AddPolicy("any",builder=>builder.AllowAnyOrigin().AllowAnyHeader().AddlowAnyMethod()));
  跨域还需启用跨域中间件：
  app.UseCors("any");
• 2.在要使用HttpClient的razor页面依赖注入httpClient实例
  @inject HttpClient httpClient
• 3.调用http crud方法

IEnumberable<WeatherForCast>？ Data{get;set;} = [];
async Task GetDataAsync()
{
	Data = awiat httpClient.GetFromJsonAsync<IEnumberable<WeatherForCast>>("weatherforecast");
}

• 说明
  以上注册和注入工作，适用于webassembly或auto呈现方式型项目，当是auto型时要将HttpClient服务注册写在用项目模版自动创建的两个项目中的Client项目中。
  如果是Server呈现模式，直接可以使用服务器端的HttpClient