How to Return Data from Javascript to C#

Question

I am new to this HTML/JavaScript style of application, and I have the need to return some basic navigation and performance data to my application from a WebBrowser control. My initial set up has a WebBrowser control placed in XAML, some event handlers in C#, and then I attempt to call javascript functions from C# using InvokeScript and then get the data via ScriptNotify. Currently I am having trouble getting the data from the JavaScript. The javascript I am using was from a sample that displayed the data in a web browser, and I am trying to modify it so I can bind relevant pieces into textblocks using C#.

MainPage.xaml

<phone:WebBrowser x:Name="Browser" Visibility="Collapsed"
                      IsScriptEnabled="True"
                      Loaded="Browser_Loaded"
                      Navigated="Browser_Navigated"
                      NavigationFailed="Browser_NavigationFailed"                          
                      ScriptNotify="Browser_ScriptNotify"/>

MainPage.xaml.cs

private string MainUri = "/Html/index.html";

private void Browser_Loaded(object sender, RoutedEventArgs e)
    {
        //tell the browser the URL to navigate to
        Browser.Navigate(new Uri(MainUri, UriKind.Relative));
    }

private void Browser_ScriptNotify(object sender, NotifyEventArgs e)
    {
        TestResultTextBlock.Text = e.Value.ToString();
    }

//When textblock is tapped, run the javascript function.
private void CheckTextBlock_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
         object result1 = Browser.InvokeScript("printIt");                        
    }

index.html (which holds the javascript)

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
    function printIt() {
        // show page load performance - show a few important bits, not everything
        var performanceHTML = "";
        if (featureDetect.supported) {
            if (featureDetect.unprefixed) {
                var t = window.performance.timing;
            } else if (featureDetect.prefixed == "ms") {
                var t = window.msPerformance.timing;
            } else if (featureDetect.prefixed == "webkit") {
                var t = window.webkitPerformance.timing;
            } else {
                alert("Unexpected error while fetching navigation timing data.");
                return;
            }

            var start = t.navigationStart;
            var sortable = [];
            var maxTime = 0;
            var order = ['navigationStart', 'redirectStart', 'redirectEnd',
              'fetchStart', 'domainLookupStart', 'domainLookupEnd', 'connectStart',
              'secureConnectionStart', 'connectEnd', 'requestStart', 'responseStart',
              'responseEnd', 'unloadEventStart', 'unloadEventEnd', 'domLoading', 'domInteractive',
              'msFirstPaint', 'domContentLoadedEventStart', 'domContentLoadedEventEnd',
              'domContentLoaded', 'domComplete', 'loadEventStart', 'loadEventEnd'];

            var perfEvents = Object.keys(t).length ? Object.keys(t) : Object.keys(Object.getPrototypeOf(t));
            perfEvents.forEach(function (e) {
                if (t[e] && t[e] > 0) {
                    duration = t[e] - start;
                    sortable.push([e, duration]);
                    if (duration > maxTime) {
                        maxTime = duration;
                    }
                }
            });
            sortable.sort(function (a, b) {
                return a[1] !== b[1] ? a[1] - b[1] : order.indexOf(a[0]) - order.indexOf(b[0]);
            });

            // If you wanted to log the data to the console, sortable is what you want
            // console.log(sortable.toString());

            // wrapping in a table simply for layout reasons
            performanceHTML = "<table><thead><tr><th scope=\"col\" id=\"xyz\">Property</th><th scope=\"col\" id=\"xyz\">Value</th></tr>";
            sortable.forEach(function (s) {
                performanceHTML = performanceHTML + "<tr><td>" + s[0] + "</td><td>" + s[1] + "ms</td>";
            });
            performanceHTML = performanceHTML + "</table>";

        }
        document.getElementById('performance_div').innerHTML = performanceHTML;
        document.getElementById('performance_div').style.visibility = 'visible';
    }
</script>

Mind you I am very new HTML/JavaScript and this is my first app using it. I am very familiar with XAML/C# which is what I am trying to use to render the results of the javascript function. What should I do to set this up properly?

Igor Kulman · Accepted Answer · 2014-03-30 11:16:32Z

1

You need to call window.external.notify(your_value) from your JavaScript code to make the Browser_ScriptNotify handler fire.

answered Mar 30, 2014 at 11:16

Igor Kulman

16.4k10 gold badges59 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matthew Over a year ago

Oh yes. My issue was with where to place this to return the string value. I believe my error also was with some of the data values returning double instead of string, and so a simple .toString() fixed that. I am accepting your answer, much appreciated.

Collectives™ on Stack Overflow

How to Return Data from Javascript to C#

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related