c# 怎么调用js方法调用方法

C# 调用 JS 方法的几种方式：通过 WebBrowser 控件、使用 WebView 控件、ASP.NET 环境下通过 ScriptManager。

在现代应用开发中，C# 和 JavaScript (JS) 的交互变得越来越普遍。无论是在桌面应用、移动应用还是网页应用中，结合这两种编程语言能够实现更为丰富的功能。本文将详细介绍如何在 C# 中调用 JS 方法，并结合具体场景和代码示例，帮助开发者更好地理解和应用这些技术。

一、通过 WebBrowser 控件

1.1、WebBrowser 控件概述

WebBrowser 控件是 Windows Forms 提供的一个控件，用于显示网页内容。通过该控件，可以在 C# 应用程序中嵌入网页，并与 JavaScript 进行交互。

1.2、调用 JS 方法

在 WebBrowser 控件中，我们可以通过 InvokeScript 方法调用 JS 方法。下面是一个示例，展示如何在 Windows Forms 应用程序中使用 WebBrowser 控件调用 JavaScript 方法。

// 创建 WebBrowser 控件
WebBrowser webBrowser = new WebBrowser();
webBrowser.ScriptErrorsSuppressed = true;
// 加载网页
webBrowser.Navigate("http://example.com");
// 调用 JavaScript 方法
webBrowser.DocumentCompleted += (sender, e) =>
{
    webBrowser.Document.InvokeScript("yourJavaScriptMethodName", new object[] { "param1", "param2" });
};

在这个示例中，我们首先创建一个 WebBrowser 控件，并加载一个网页。当网页加载完成后，我们通过 InvokeScript 方法调用了 JavaScript 方法 yourJavaScriptMethodName，并传递了参数。

1.3、处理返回值

有时候，我们需要处理 JavaScript 方法的返回值。InvokeScript 方法可以返回 JavaScript 方法的返回值。下面是一个示例：

webBrowser.DocumentCompleted += (sender, e) =>
{
    var result = webBrowser.Document.InvokeScript("yourJavaScriptMethodName", new object[] { "param1", "param2" });
    Console.WriteLine(result);
};

在这个示例中，我们通过 InvokeScript 调用 JavaScript 方法，并将返回值存储在 result 变量中，然后输出到控制台。

二、通过 WebView 控件

2.1、WebView 控件概述

WebView 控件是 UWP (Universal Windows Platform) 提供的一个控件，用于显示网页内容。它比 WebBrowser 控件更为现代和强大，支持更多的 HTML5 和 CSS3 特性。

2.2、调用 JS 方法

在 WebView 控件中，我们可以通过 InvokeScriptAsync 方法调用 JavaScript 方法。下面是一个示例，展示如何在 UWP 应用程序中使用 WebView 控件调用 JavaScript 方法。

// 创建 WebView 控件
WebView webView = new WebView();
// 加载网页
webView.Navigate(new Uri("http://example.com"));
// 调用 JavaScript 方法
webView.NavigationCompleted += async (sender, e) =>
{
    string result = await webView.InvokeScriptAsync("yourJavaScriptMethodName", new string[] { "param1", "param2" });
    Console.WriteLine(result);
};

在这个示例中，我们首先创建一个 WebView 控件，并加载一个网页。当网页加载完成后，我们通过 InvokeScriptAsync 方法调用了 JavaScript 方法 yourJavaScriptMethodName，并传递了参数。

2.3、处理返回值

InvokeScriptAsync 方法是异步的，因此我们需要使用 await 关键字来处理返回值。下面是一个示例：

webView.NavigationCompleted += async (sender, e) =>
{
    string result = await webView.InvokeScriptAsync("yourJavaScriptMethodName", new string[] { "param1", "param2" });
    Console.WriteLine(result);
};

在这个示例中，我们通过 InvokeScriptAsync 调用 JavaScript 方法，并将返回值存储在 result 变量中，然后输出到控制台。

三、在 ASP.NET 环境下通过 ScriptManager

3.1、ScriptManager 控件概述

在 ASP.NET Web Forms 应用程序中，ScriptManager 控件用于管理客户端脚本。通过 ScriptManager 控件，可以在服务器端代码中调用 JavaScript 方法。

3.2、调用 JS 方法

在服务器端代码中，我们可以通过 ScriptManager.RegisterStartupScript 方法调用 JavaScript 方法。下面是一个示例，展示如何在 ASP.NET Web Forms 应用程序中使用 ScriptManager 控件调用 JavaScript 方法。

// 在服务器端代码中调用 JavaScript 方法
protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this, GetType(), "callJSMethod", "yourJavaScriptMethodName('param1', 'param2');", true);
}

在这个示例中，我们在 Page_Load 事件中，通过 ScriptManager.RegisterStartupScript 方法调用了 JavaScript 方法 yourJavaScriptMethodName，并传递了参数。

3.3、处理返回值

在 ASP.NET Web Forms 应用程序中，处理 JavaScript 方法的返回值比较复杂。通常，我们通过 AJAX 调用来处理返回值。下面是一个示例：

// 在客户端代码中调用 JavaScript 方法，并处理返回值
<script type="text/javascript">
    function callJSMethod() {
        var result = yourJavaScriptMethodName('param1', 'param2');
        __doPostBack('UpdatePanel1', result);
    }
</script>
// 在服务器端代码中处理返回值
protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack)
    {
        string result = Request["__EVENTARGUMENT"];
        Console.WriteLine(result);
    }
}

在这个示例中，我们在客户端代码中调用 JavaScript 方法，并通过 __doPostBack 方法将返回值发送到服务器端。在服务器端代码中，我们通过 Request["__EVENTARGUMENT"] 获取返回值。

四、通过 SignalR 实现实时交互

4.1、SignalR 概述

SignalR 是一个用于 ASP.NET 的库，能够帮助开发者轻松实现实时 web 功能。通过 SignalR，服务器可以主动向客户端发送消息，实现实时交互。

4.2、调用 JS 方法

在 SignalR 中，我们可以通过 Clients.All.SendAsync 方法调用 JavaScript 方法。下面是一个示例，展示如何在 ASP.NET Core 应用程序中使用 SignalR 调用 JavaScript 方法。

// 在服务器端代码中调用 JavaScript 方法
public class MyHub : Hub
{
    public async Task CallJSMethod(string param1, string param2)
    {
        await Clients.All.SendAsync("yourJavaScriptMethodName", param1, param2);
    }
}
// 在客户端代码中处理 JavaScript 方法
<script type="text/javascript">
    const connection = new signalR.HubConnectionBuilder().withUrl("/myHub").build();
    connection.on("yourJavaScriptMethodName", function (param1, param2) {
        console.log(param1, param2);
    });
    connection.start().catch(function (err) {
        return console.error(err.toString());
    });
</script>

在这个示例中，我们首先在服务器端代码中，通过 Clients.All.SendAsync 方法调用了 JavaScript 方法 yourJavaScriptMethodName，并传递了参数。在客户端代码中，我们通过 connection.on 方法处理 JavaScript 方法。

4.3、处理返回值

在 SignalR 中，处理 JavaScript 方法的返回值比较复杂。通常，我们通过客户端调用服务器端方法来处理返回值。下面是一个示例：

// 在客户端代码中调用 JavaScript 方法，并处理返回值
<script type="text/javascript">
    const connection = new signalR.HubConnectionBuilder().withUrl("/myHub").build();
    connection.on("yourJavaScriptMethodName", function (param1, param2) {
        var result = yourJavaScriptMethodName(param1, param2);
        connection.invoke("HandleResult", result);
    });
    connection.start().catch(function (err) {
        return console.error(err.toString());
    });
</script>
// 在服务器端代码中处理返回值
public class MyHub : Hub
{
    public async Task HandleResult(string result)
    {
        Console.WriteLine(result);
    }
}

在这个示例中，我们在客户端代码中调用 JavaScript 方法，并通过 connection.invoke 方法将返回值发送到服务器端。在服务器端代码中，我们通过 HandleResult 方法处理返回值。

五、通过 Blazor 实现前后端交互

5.1、Blazor 概述

Blazor 是一个用于构建交互式 web 用户界面的框架，基于 .NET 技术栈。通过 Blazor，可以在 .NET 代码中调用 JavaScript 方法，并处理返回值。

5.2、调用 JS 方法

在 Blazor 中，我们可以通过 JSRuntime.InvokeAsync 方法调用 JavaScript 方法。下面是一个示例，展示如何在 Blazor 应用程序中调用 JavaScript 方法。

@page "/"
@inject IJSRuntime JSRuntime
<button @onclick="CallJSMethod">Call JavaScript Method</button>
@code {
    private async Task CallJSMethod()
    {
        await JSRuntime.InvokeVoidAsync("yourJavaScriptMethodName", "param1", "param2");
    }
}

在这个示例中，我们通过 JSRuntime.InvokeVoidAsync 方法调用了 JavaScript 方法 yourJavaScriptMethodName，并传递了参数。

5.3、处理返回值

在 Blazor 中，JSRuntime.InvokeAsync 方法可以返回 JavaScript 方法的返回值。下面是一个示例：

@page "/"
@inject IJSRuntime JSRuntime
<button @onclick="CallJSMethod">Call JavaScript Method</button>
<p>@result</p>
@code {
    private string result;
    private async Task CallJSMethod()
    {
        result = await JSRuntime.InvokeAsync<string>("yourJavaScriptMethodName", "param1", "param2");
    }
}

在这个示例中，我们通过 JSRuntime.InvokeAsync 方法调用 JavaScript 方法，并将返回值存储在 result 变量中，然后显示在页面上。

六、通过 CefSharp 实现高级功能

6.1、CefSharp 概述

CefSharp 是一个基于 Chromium 的浏览器控件，支持在 .NET 应用程序中嵌入 Chromium 浏览器。通过 CefSharp，可以实现更为高级的功能，如调用 JavaScript 方法并处理返回值。

6.2、调用 JS 方法

在 CefSharp 中，我们可以通过 EvaluateScriptAsync 方法调用 JavaScript 方法。下面是一个示例，展示如何在 Windows Forms 应用程序中使用 CefSharp 调用 JavaScript 方法。

// 创建 ChromiumWebBrowser 控件
ChromiumWebBrowser browser = new ChromiumWebBrowser("http://example.com");
// 调用 JavaScript 方法
browser.FrameLoadEnd += async (sender, e) =>
{
    var result = await browser.EvaluateScriptAsync("yourJavaScriptMethodName('param1', 'param2')");
    Console.WriteLine(result.Result);
};

在这个示例中，我们首先创建一个 ChromiumWebBrowser 控件，并加载一个网页。当网页加载完成后，我们通过 EvaluateScriptAsync 方法调用了 JavaScript 方法 yourJavaScriptMethodName，并传递了参数。

6.3、处理返回值

EvaluateScriptAsync 方法是异步的，因此我们需要使用 await 关键字来处理返回值。下面是一个示例：

browser.FrameLoadEnd += async (sender, e) =>
{
    var result = await browser.EvaluateScriptAsync("yourJavaScriptMethodName('param1', 'param2')");
    Console.WriteLine(result.Result);
};

在这个示例中，我们通过 EvaluateScriptAsync 调用 JavaScript 方法，并将返回值存储在 result.Result 变量中，然后输出到控制台。

七、通过 WebAssembly 实现跨平台调用

7.1、WebAssembly 概述

WebAssembly (Wasm) 是一种可以在现代 web 浏览器中运行的二进制指令格式。通过 WebAssembly，可以在 web 浏览器中运行 C# 代码，并与 JavaScript 进行交互。

7.2、调用 JS 方法

在 WebAssembly 中，我们可以通过 JSInterop 调用 JavaScript 方法。下面是一个示例，展示如何在 WebAssembly 应用程序中调用 JavaScript 方法。

@page "/"
@inject IJSRuntime JSRuntime
<button @onclick="CallJSMethod">Call JavaScript Method</button>
@code {
    private async Task CallJSMethod()
    {
        await JSRuntime.InvokeVoidAsync("yourJavaScriptMethodName", "param1", "param2");
    }
}