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