Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@noura_chirashi

WebView2 を使って Web サイトを表示し、C# と JavaScript が相互に呼び出す

https://qiita.com/noura_chirashi/items/01ef53b794c305d8433d
上記投稿(WebView2 で Web サイトを表示する。)の続きとなります。


ここで作る処理の流れは以下の通り。
①WebView2に表示した日時選択コントロールで日時選択。
1.png
↓ JavaScript から C# の ShowDialog(string datetime) メソッド呼び出し。
②選択された日時が、C#のメッセージボックスで表示される。
2.png

↓ C# から JavaScript の SetTextToButton(element, text) 関数呼び出し。
③ 文字列データを受信した JavaScript が、文字列を button の value にセットする。
3.png

以下、全ソースコード

using System.IO;
using System.Windows.Forms;
using Microsoft.Web.WebView2.Core;
using Microsoft.Web.WebView2.WinForms;

namespace Test
{
    public partial class Form1 : Form
    {
        private WebView2 view2;
        private string WebView2Path = Path.Combine(Directory.GetCurrentDirectory(), "Microsoft.WebView2.FixedVersionRuntime.88.0.705.62.x64");

        //JavaScript とやりとりするクラスのインスタンス
        private ObjectForScripting ObjForScripting;

        public Form1()
        {
            view2 = new WebView2();
            ObjForScripting = new ObjectForScripting(view2);
            view2.Dock = DockStyle.Fill;
            Controls.Add(view2);
            NavigateToString($@"
            <!DOCTYPE html>
            <html>
            <head>
            <script>
                <!-- C# のメソッドを呼び出す関数 -->
                function DateTimeValueChanged(element) {{
                    <!-- chrome.webview.hostObjects までは固定。それに続いて、AddHostObjectToScript の第一引数で設定した識別名、更に続けて呼び出す C# のメソッド -->
                    chrome.webview.hostObjects.MyScriptingObject.ShowDialog(element.value);
                }}
                <!-- C# のメソッドから呼び出される関数 -->
                function SetTextToButton(element, text) {{
                    document.getElementById(element).value = text;
                }}
            </script>
            </head>
            <body>
            <!-- JavaScript 経由で C# メソッドを呼び出すための起点となる onChanged() -->
            <input type = 'datetime-local' id = 'dateTimeLocal1' onChange = 'DateTimeValueChanged(this)'/>
            <br /><br />
            <input type = 'button' id = 'myButton' value = 'ボタン!' />
            </body>
            </html>
            ");
        }

        private async void NavigateToString(string source)
        {
            await view2.EnsureCoreWebView2Async(CoreWebView2Environment.CreateAsync(WebView2Path).Result);
            //WebView2の初期化後に、JavaScript と通信するオブジェクトを登録する必要がある。
            view2.CoreWebView2.AddHostObjectToScript("MyScriptingObject", ObjForScripting);
            view2.NavigateToString(source);
        }
    }


    //JavaScript とやりとりするクラス
    public class ObjectForScripting
    {
        //このクラスと通信するWebView2
        private WebView2 WebView2 { get; set; }

        public ObjectForScripting(WebView2 view)
        {
            WebView2 = view;
        }
        //JavaScript の DateTimeValueChanged 関数から呼び出されて、メッセージボックスを表示するメソッド。
        public void ShowDialog(string datetime)
        {
            MessageBox.Show(datetime, "");
            SetTextToButton("myButton","ああああああ");
        }

        //JavaScript の SetTextToButton 関数を呼び出して、ボタンのテキストを変更するメソッド。
        public async void SetTextToButton(string id, string text)
        {
            await WebView2.ExecuteScriptAsync($"SetTextToButton('{id}','{text}')");
        }
    }
}
2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
noura_chirashi
名は体を表す

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?