Home > other >  Close webview2 application after webpage submit button click
Close webview2 application after webpage submit button click

Time:02-17

I have created a simple windows application that uses a webview2 to shows a Website in a winform. I need to close this windows application after submit button click on the website.

enter image description here

Is it possible? I am new to Windows Development.

CodePudding user response:

The solution really depends to the content and how the page works. In most cases you should not close the app immediately after clicking on submit button and you need to wait until you receive the response of the submit and if the submit is successful, then you can close the window.

Here I share two examples:

  1. Handle submit event and call a C# method from WebView2
  2. Detect success of a submitted survey form based on URL

Please keep in mind, both examples are here for learning purpose to give you some idea on handling js events in C#. You need to tweak them to make them working on your specific case.

Example 1 - Handle submit event and call a C# method from WebView2

In the following example you can learn:

  • How to handle submit event of the form
  • How to call a C# method from JavaScript code and pass js object to .NET

Here is the code:

WebView2Host host;
private async void TestForm_Load(object sender, EventArgs e)
{
    await webView21.EnsureCoreWebView2Async();
    host = new WebView2Host(this);
    webView21.NavigateToString(
        "<html>"  
        "<head><title>Test from</title></head>"  
        "<body>"  
        "<form id='form1' action='/' method='post'>"  
        "<input type='text' name='someProperty' value ='something'/>"  
        "<input type='submit' value='Click me'/>"  
        "</form>"  
        "</body>");
    webView21.CoreWebView2.AddHostObjectToScript("host", host);
    webView21.CoreWebView2.DOMContentLoaded  = CoreWebView2_DOMContentLoaded;
}
private async void CoreWebView2_DOMContentLoaded(object sender,
    CoreWebView2DOMContentLoadedEventArgs e)
{
    await webView21.ExecuteScriptAsync(
    "var form = document.getElementById('form1');"  
    "form.addEventListener('submit', function(e){"  
    "var data = JSON.stringify(Object.fromEntries(new FormData(form)));"  
    "window.chrome.webview.hostObjects.sync.host.OnSubmit(data);"  
    "});");
}
public class WebView2Host
{
    TestForm hostForm;
    public WebView2Host(TestForm hostForm)
    {
        this.hostForm = hostForm;
    }
    public void OnSubmit(string data)
    {
        //data is in json format
        MessageBox.Show($"data: {data}", "C# OnSubmit!");
        //You can close form like this: hostForm.Close();
    }
}

Exmaple 2 - Detect success of a submitted survey form based on URL

You can rely on any of the navigation events and check the URL of the page, to see whether the submit has been successful. In this example I show how you can do it with a google survey form:

private async void TestForm_Load(object sender, EventArgs e)
{
    await webView21.EnsureCoreWebView2Async();
    webView21.Source = new Uri("https://forms.gle/pspLBJFZW5z8J1K37");
    webView21.CoreWebView2.SourceChanged  = CoreWebView2_SourceChanged;
}
private void CoreWebView2_SourceChanged(object? sender, 
    CoreWebView2SourceChangedEventArgs e)
{
    if (webView21.Source.ToString().EndsWith("/formResponse"))
    {
        MessageBox.Show("Submitted successfully.");
    }
}
  • Related