html(javascript)とc#の連携方法を教えてください

したいこと

c#ですでに書いたコードをwebページ上で作動させたくて、html→javascript→c#の手順なら反映できると考えて進めていたのですが、javascriptとc#を連携させる方法がいまいちピンときません。どういったコードを組めば連携できるのか教えてください。できればソフトのインストールなどが必要ない手段がいいです。

試してこと

いろんな記事を漁ってみたところ、このページに辿り着きました。
Webview C#とJavascriptの連携
いってることが全然理解できないです。。。
Q1：この記事は正しい情報（htmlでc#を起動させる方法）を述べてますか？
Q2: どのレベルまで勉強したら理解できますか？
Q3: みなさんはこういった知識をどのように得ましたか？
ご回答よろしくおねがいいたします。

ソースコード（webページの）

c#
1using Microsoft.Web.WebView2.Core;
2using Microsoft.Web.WebView2.WinForms;
3using System;
4using System.Runtime.InteropServices;
5using System.Windows.Forms;
6
7namespace SampleWebView2Form
8{
9    public partial class Form1 : Form
10    {
11        /// <summary>webviewのコントロール（わかりやすい様に、デザイナーを使わずにコード側で実装します。）</summary>
12        private WebView2 WebView = new WebView2
13        {
14            //個人の環境に合わせて下さい
15            Source = new Uri("file:///C:/Users/name/Desktop/sample.html"),
16        };
17
18        /// <summary>JavaScriptで呼ぶ関数を保持するオブジェクト</summary>
19        private JsToCs CsClass = new JsToCs();
20
21        public Form1()
22        {
23            this.Controls.Add(WebView);
24            InitializeComponent();
25
26            //WebView2のサイズをフォームのサイズに合わせる
27            WebView.Size = this.Size;
28            this.SizeChanged += Form1_SizeChanged;
29
30            //WebView2のロード完了時のイベント
31            WebView.NavigationCompleted += WebView_NavigationCompleted;
32        }
33
34        /// <summary>WebView2のロード完了時</summary>
35        private void WebView_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
36        {
37            try
38            {
39                if (WebView.CoreWebView2 != null)
40                {
41                    //JavaScriptからC#のメソッドが実行できる様に仕込む
42                    WebView.CoreWebView2.AddHostObjectToScript("class", CsClass);
43
44                    //JavaScriptの関数を実行
45                    CsToJs();
46                }
47                else MessageBox.Show("CoreWebView2==null");
48            }
49            catch(Exception ex)
50            {
51                MessageBox.Show(ex.ToString());
52            }
53        }
54
55        /// <summary>Jsのメソッドを実行</summary>
56        private async void CsToJs()
57        {
58            //WebView.ExecuteScriptAsync("func1()").ResultをするとWebView2がフリーズする
59            string str1 = await WebView.ExecuteScriptAsync("func1(\"C#からの呼び出し\")");
60            MessageBox.Show("Jsからの戻り値＞" + str1);
61        }
62
63        /// <summary>サイズ変更時のイベントでWebView2のサイズをフォームに合わせる</summary>
64        private void Form1_SizeChanged(object sender, EventArgs e)
65        {
66            WebView.Size = this.Size;
67        }
68    }
69
70    //↓属性設定が無いとエラーになります
71    /// <summary>WebView2に読み込ませるためのJsで実行する関数を保持させたクラス</summary>
72    [ClassInterface(ClassInterfaceType.AutoDual)]
73    [ComVisible(true)]
74    public class JsToCs
75    {
76        public void MessageShow(string strText)
77        {
78            MessageBox.Show("Jsからの呼び出し>" + strText);
79        }
80    }
81}

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
5    <script language="javascript" type="text/javascript">
6        //C#から呼び出すための関数
7        function func1(str1) {
8            alert("C# called>" + str1);
9            return "success"
10        }
11        function ButtonClick() {
12            //C#の関数の実行
13            chrome.webview.hostObjects.class.MessageShow("Js send text");
14        }
15    </script>
16</head>
17<body>
18    <h1>sample</h1>
19    <input type="button" value='send Message' onclick="ButtonClick();"/>
20    <script></script>
21</body>
22</html>

m.ts10806

2021/10/06 21:37 編集

webviewはブラウザみたいなものなので、それとHTML、JavaScriptは全く切り離されるのではないかなと・・・ブラウザみたいなものなので表示されてるページからwebviewをコントロールしているアプリには作用できません。 WebMVCでWebページを表示させてるなら可能でしょうけど。結局JavaScriptでC#をどう使いたいか次第になります。

退会済みユーザー

2021/10/06 23:41 編集

> javascriptとc#を連携させる方法がいまいちピンときません。そもそも連携させて何がしたいのか具体的に例を挙げるなどして説明できませんか。そうしてもらえないと、javascript と C# の違いなど基本的なことが良く分かってなさそうですので、話が発散すると思います。逆に、そうしてもらえれば、連携の先にある質問者さんの真にやりたいことに沿ったピンポイントの回答が出てくるかも。

dodox86

2021/10/06 23:08

現時点の質問内容に関しては現状いただいているご回答で合致し、完成していると思えます。ここで前提と論点を変えるとそれこそ収拾がつかなくなり、閉じない質問になる恐れがあります。最終的にやりたいことを明らかにするのは良いことだと思いますが、整理し、本質問から発展した別の質問として投稿するのが良いと考えます。

dodox86

2021/10/06 23:17

しかし思うのですけど、自分のやりたいことに合っているのかどうかということであるのに、「この記事は正しい情報なのか？」とは記事の主さんに失礼な物言い。

退会済みユーザー

2021/10/07 00:06 編集

> 現時点の質問内容に関しては現状いただいているご回答で合致し、完成していると思えます。自分はそうは思ってないから聞いているのです。質問の、 > c#ですでに書いたコードをwebページ上で作動させたくてが dodox86 さんは分かってますか？「c#ですでに書いたコード」って何でしょう？私は分かりません。不可能なことを考えているのではと思いました。

退会済みユーザー

2021/10/07 00:08 編集

例えば「c#ですでに書いたコード」というのが C# の WinForms アプリで DB の CRUD を行うようなものであれば、webview アプリも Blazor アプリも最適解にはならず、根本的に考え直して ASP.NET web アプリ (サーバー側のコードは C# で書ける) が解になるかもしれません。

dodox86

2021/10/07 00:15

@SurferOnWwwさん > > c#ですでに書いたコードをwebページ上で作動させたくて > > が dodox86 さんは分かってますか？「c#ですでに書いたコード」って何でしょう？私もこの質問を読んだ当初分かりませんでしたが、質問文中に「ソースコード（webページの）」とあります。これは、質問者さんが自分で書いたものではなく、参考にされた記事からそのまま引用したC#のコードを指しています。これをもって「C#で既に書いたコード」と言っていると判断しました。しかし指摘を受けて更に考えてみると、実はまだこの質問文中には示していない、質問者さんが抱えている質問者さん”自身”が既に書いたオリジナルの"C#のコードがあるのかもしれません。これは現時点では分かりません。

dodox86

2021/10/07 00:39 編集

質問の本筋がQiitaの記事が質問者さんの要望に合致するか否かを問うているものに思えるので読み誤まった気がしますが、質問者さんが独自に書いた、WEBページ上で動作させてたいC#のコードがあるのですね。質問を読み直すごとに着地点が分からなくなりました。尚、私が「完成している」と思ったのは、質問文中のQ1～Q3に対してそれぞれ対応されているご回答と捉えたからです。

退会済みユーザー

2021/10/07 00:41

> 質問者さんが抱えている質問者さん”自身”が既に書いたオリジナルの"C#のコードがあるのかもしれません。これは現時点では分かりません。であれば、先の dodox86 さんのレスの、 > 現時点の質問内容に関しては現状いただいているご回答で合致し、完成していると思えます。とはまだ言えないと思いますけど。

退会済みユーザー

2021/10/11 00:07

質問者さん、無言ですが、質問へのコメント・回答がついているのでそれら対するフィードバックを書きましょう。無言で放置は普通に＆社会常識的にマナー違反と思いませんか。

TrueRyoB

2021/10/22 15:16

すみませんでした。最近忙しくて。。。

行動規範の内容に同意します

回答1件

ベストアンサー

Q1：この記事は正しい情報（htmlでc#を起動させる方法）を述べてますか？
Q2: どのレベルまで勉強したら理解できますか？
Q3: みなさんはこういった知識をどのように得ましたか？

「正しい」とは？そのコード動かして、ちゃんと動いてるのであれば、それ以上の「正しさ」って何？
「レベル」とは？どういう定義？１０年やっても理解できない人はできないとは思うけど。
リファレンスと技術系サイトやブログの記事読む。

そもそも論として

c#ですでに書いたコードをwebページ上で作動させたくて

参照している記事はWinFormsアプリにブラウザコンポーネントを載っけて、そのブラウザコンポーネントの操作を介してJavaScriptとの相互運用をしているものであり、「webページ上」って言って通常思い浮かべるものとは全然違う。言ってみればこれはブラウザ（のコアな部分）そのものを部品として乗っけて操作するデスクトップアプリでしかない。

普通のブラウザで表示するモノでC#を「ブラウザ上で」動かしたいなら、Blazor WebAssemblyという技術を使う。

これについて知りたいのであれば公式に載ってるし、読んで理解できないなら初心者向けの解説記事を読むなり本を買って勉強するなりして疑問に思うところをもっと明確に説明できるようになってからここで聞けば良いんじゃない。
Blazor JavaScript の相互運用性 (JS 相互運用)

投稿2021/10/06 20:44