wpf中js调用C#后台方法，使用框架CefSharp

Posted 2021-08-11 棉晗榜

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了wpf中js调用C#后台方法，使用框架CefSharp相关的知识，希望对你有一定的参考价值。

首先在nuget中安装CefSharp.Wpf组件用于解析html，是一个web浏览器内核，支持h5
我使用的CefSharp.Wpf版本是90.6.70

WPF目标框架：.NET5

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using CefSharp;
using CefSharp.Wpf;

namespace WpfApp1
{
    /// <summary>
    /// WindowWeb.xaml 的交互逻辑
    /// </summary>
    public partial class WindowWeb : Window
    {
        public WindowWeb()
        {
            InitializeComponent();

            //WebBrowser webBrowser = new WebBrowser();
            //webBrowser.Source = new Uri("http://www.baidu.com");
            //grid01.Children.Add(webBrowser);

            ChromiumWebBrowser webBrowser = new ChromiumWebBrowser();
            //v.Title = "加载本地网页";
            //webBrowser.Name = "加载本地网页";
            //  webBrowser.Address = "http://www.baidu.com";

            //注入c#方法到前端页面 
            webBrowser.javascriptObjectRepository.Register("csharpTest", new JavascriptCallCSharp(), true, BindingOptions.DefaultBinder);
            webBrowser.JavascriptObjectRepository.ObjectBoundInJavascript += (sender, e) =>
            {
                var name = e.ObjectName;
                System.Diagnostics.Debug.WriteLine($"对象 {e.ObjectName} 绑定成功.");
            };

            webBrowser.Address = AppDomain.CurrentDomain.BaseDirectory + "HTML/index.html";
            grid01.Children.Add(webBrowser);

        }
    }
}

//功用：js调用C#后台方法
//创建时间：2021-7-9 10:20:39

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;

namespace WpfApp1
{
    /// <summary>
    /// js调用C#后台方法
    /// </summary>
    public class JavascriptCallCSharp
    {
        public void ShowMsg(string data)
        {
            MessageBox.Show($"当前时间：" + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "," + data);
        }

    }
}

准备静态页面

在这里插入图片描述

前端js调用C#方法，注意C#的后台方法在前端调用时，是骆驼命名的方法，首字母变为小写了，否则调用不会命中后台方法

<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8">
		<title>后台管理模板</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

		<!--<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="css/global.css" media="all">
		<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">-->

	</head>

	<body>
		<div>
			WPF加载本地HTML，天下非一人一姓之天下，乃天下人之天下也
		</div>
		<div>
			<a href="userList.html">用户页面</a>
		</div>
		<div style="margin:20px;">
			<label>请输入传给后台的参数：</label>
			<input type="text" id="txtName" />
			<input type="button"  value="调用C#方法"   onclick="callBack01()"/>
		</div> 
		<script type="text/javascript">
            //CefSharp.BindObjectAsync("csharpTest");

            (async function () {
                await CefSharp.BindObjectAsync("csharpTest");
            })();

			function callBack01() {
				try {
					var txtName = document.getElementById("txtName").value;

					//调用C#后台方法
                    csharpTest.showMsg(txtName);
                } catch (e) {
					alert(e);
                }
			}
		</script>
	</body>

</html>

以上是关于wpf中js调用C#后台方法，使用框架CefSharp的主要内容，如果未能解决你的问题，请参考以下文章

c# wpf 相对路径问题

WebView2 (WPF) - 从本地文件夹加载网站并调用 C# 函数并调用 JS 函数