Blazor入手教程（九）c#和js互相調用
1,C#調用js代碼
C#調用js代碼有兩步
1，在razor頁面頂部使用@inject注入所需要的類
2，在代碼中調用
我們嘗試在頁面中寫了一段js，然后vs告訴我們script標簽不能出現在razor內部，可以把它放在入口的index.html文件中，或者單獨建一個js文件，然后在index.html引入。
我們把它移到在入口的index.html文件中,再次運行
點擊按鈕，可以看到我們調用成功了，並且也獲取到了參數
2，js調用c#靜態方法
Js調用c#靜態方法也有兩步
1，聲明一個C#靜態方法，並標記上 [JSInvokable]的特性
2，在js中使用DotNet.invokeMethod 或 DotNet.invokeMethodAsync調用
DotNet.invokeMethod(“程序集名”,”方法名”,”參數...[多項，可空]”)
調用帶參數的方法
調用帶返回值的方法
異步調用
Js異步調用時返回值是一個promise,(js語言中處理異步的一種方式)。可以在回調then里面獲取到返回值
指定方法名的調用
可以通過 [JSInvokable("新的方法名")]指定js調用的方法名
這是在瀏覽器中運行的效果
C#代碼：
@page "/invokejs" @inject IJSRuntime JsRuntime <h3>c#代碼和js代碼的互相調用</h3> <h3>c#調用JS</h3> <button @onclick="todo">Invoke</button> @code { public void todo() { var jsRunResult = JsRuntime.InvokeAsync<string>("demoMethods.runJs", "參數1", "參數2"); } } <h3>JS調用C#</h3> <button onclick="demoMethods.jsInvokeC('參數1','參數2')">帶參數調用</button> <button onclick="demoMethods.jsInvokeCWithReturn()">調用帶返回值的</button> <button onclick="demoMethods.jsInvokeCAsync()">異步調用</button> <button onclick="demoMethods.jsInvokeCAlisa()">指定方法名調用</button> @code { //調用帶參數方法 [JSInvokable] public static void todo(object a1, object a2) { Console.WriteLine("js調用c#成功"); Console.WriteLine("參數1" + a1.ToString()); Console.WriteLine("參數2" + a2.ToString()); } //帶返回值的方法 [JSInvokable] public static string todoWithReturn() { Console.WriteLine("todoWithReturn調用成功"); return System.DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"); } //指定方法名 [JSInvokable("todoThree")] public static void todoAlisa() { Console.WriteLine("todoAlisa調用成功"); } } }
js代碼
<script> window.demoMethods = { runJs: function (a1, a2) { console.log("調用js成功") console.log("參數1=" + a1); console.log("參數2=" + a2); }, jsInvokeC: function (a1, a2) { //DotNet.invokeMethod 或 DotNet.invokeMethodAsync DotNet.invokeMethod("BlazorApp1", "todo", a1, a2); }, jsInvokeCWithReturn: function () { //帶返回值 var r = DotNet.invokeMethod("BlazorApp1", "todoWithReturn" ); console.log("jsInvokeCWithReturn r=", r); }, jsInvokeCAsync: function (a1, a2) { //異步調用 DotNet.invokeMethodAsync("BlazorApp1", "todoWithReturn").then(data => { console.log("jsInvokeCAsync,data=",data); }); }, jsInvokeCAlisa: function ( ) { //指定名稱 DotNet.invokeMethod("BlazorApp1", "todoThree" ); }, } </script>
需要調用的c#代碼可以寫在任意的地方不僅僅是razor文件里面。