Reading the HTML values from a HtmlWebViewSource control in Xamarin Forms





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







4















We have a web and mobile app that generates a dynamic questionnaire using HTML. This allows us to create a wide variety of questions (text boxes, dropdowns, dates, radio buttons). We're currently re-building our app using Xamarin Forms, and would like to reuse our existing code that generates this questionnaire. Also, not all of the controls we need are implemented in Xamarin.



I have so far managed to generate the questionnaire in Xamarin using a WebView. This works perfectly. When the user submits the questionnaire, I can retrieve the HTML from the WebView. The problem is that the HTML doesn't show any of the responses the user has entered to the questions. For example, if the user typed a response into one of the text fields, this is not found anywhere in the HTML that is coming back from the WebView control.



Here is how I am creating the HTML questionnaire.



StringBuilder htmlString = new StringBuilder();
//build up my HTML string here
htmlString.Append("<div>.....");

var htmlWebView = new HtmlWebViewSource { Html = htmlString.ToString() };
WebView.Source = htmlWebView;


In the click event of the submit button I am retrieving the HTML from the WebView control like this.



var webViewSource = WebView.Source;
var htmlString = (string) WebViewSource.GetValue(HtmlWebViewSource.HtmlProperty);


I can upload and retrieve the HTML from the WebView. But how do I return the user's responses?



UPDATE



I can add very simple Javascript functions to my WebView's HTML as follows. This one simply returns 100.



private static string GetJavascriptFunction()
{
StringBuilder htmlString = new StringBuilder();
htmlString.Append("<html>");
htmlString.Append("<body>");
htmlString.Append("<script type="text/javascript">");
htmlString.Append("function getValue() {");
htmlString.Append("return 100;");
htmlString.Append("}");
htmlString.Append("</script>");
return htmlString.ToString();
}


Invoking the function as follows correctly returns 100.



string result = await WebView.EvaluateJavaScriptAsync("getValue()");


However if I want the Javascript to do any kind of DOM manipulation it always just returns null.



private static string GetJavascriptFunction()
{
StringBuilder htmlString = new StringBuilder();
htmlString.Append("<html>");
htmlString.Append("<body>");
htmlString.Append("<script type="text/javascript">");
htmlString.Append("function getValue() {");
htmlString.Append("return document.body.innerHTML;");
htmlString.Append("}");
htmlString.Append("</script>");
return htmlString.ToString();
}


This now returns null.



Is there any way to use Javascript to return the values from the HTML in a WebView control?










share|improve this question

























  • I don't think you understand how HTML works. Unless you are also using JavaScript to actually set the values in your HTML, the values are never in the HTML itself. Go to a random form on the internet and inspect it with the developer tools, the values are not updated when you type them in. If you want to do this, you will need to have some JavaScript in place that updates the HTML when the user enters something.

    – Gerald Versluis
    Nov 23 '18 at 15:54











  • We're using javascript in our current web / mobile app to read the responses as we have direct access to the HTML. Is there a way to do something similar with the HTML in a WebView control?

    – DomBurf
    Nov 23 '18 at 16:02











  • I think you can trigger C# methods from JavaScript with the WebView so you should be able to create something with that to get the values out

    – Gerald Versluis
    Nov 23 '18 at 16:03











  • Okay thanks, let me have a look into that.

    – DomBurf
    Nov 23 '18 at 16:04


















4















We have a web and mobile app that generates a dynamic questionnaire using HTML. This allows us to create a wide variety of questions (text boxes, dropdowns, dates, radio buttons). We're currently re-building our app using Xamarin Forms, and would like to reuse our existing code that generates this questionnaire. Also, not all of the controls we need are implemented in Xamarin.



I have so far managed to generate the questionnaire in Xamarin using a WebView. This works perfectly. When the user submits the questionnaire, I can retrieve the HTML from the WebView. The problem is that the HTML doesn't show any of the responses the user has entered to the questions. For example, if the user typed a response into one of the text fields, this is not found anywhere in the HTML that is coming back from the WebView control.



Here is how I am creating the HTML questionnaire.



StringBuilder htmlString = new StringBuilder();
//build up my HTML string here
htmlString.Append("<div>.....");

var htmlWebView = new HtmlWebViewSource { Html = htmlString.ToString() };
WebView.Source = htmlWebView;


In the click event of the submit button I am retrieving the HTML from the WebView control like this.



var webViewSource = WebView.Source;
var htmlString = (string) WebViewSource.GetValue(HtmlWebViewSource.HtmlProperty);


I can upload and retrieve the HTML from the WebView. But how do I return the user's responses?



UPDATE



I can add very simple Javascript functions to my WebView's HTML as follows. This one simply returns 100.



private static string GetJavascriptFunction()
{
StringBuilder htmlString = new StringBuilder();
htmlString.Append("<html>");
htmlString.Append("<body>");
htmlString.Append("<script type="text/javascript">");
htmlString.Append("function getValue() {");
htmlString.Append("return 100;");
htmlString.Append("}");
htmlString.Append("</script>");
return htmlString.ToString();
}


Invoking the function as follows correctly returns 100.



string result = await WebView.EvaluateJavaScriptAsync("getValue()");


However if I want the Javascript to do any kind of DOM manipulation it always just returns null.



private static string GetJavascriptFunction()
{
StringBuilder htmlString = new StringBuilder();
htmlString.Append("<html>");
htmlString.Append("<body>");
htmlString.Append("<script type="text/javascript">");
htmlString.Append("function getValue() {");
htmlString.Append("return document.body.innerHTML;");
htmlString.Append("}");
htmlString.Append("</script>");
return htmlString.ToString();
}


This now returns null.



Is there any way to use Javascript to return the values from the HTML in a WebView control?










share|improve this question

























  • I don't think you understand how HTML works. Unless you are also using JavaScript to actually set the values in your HTML, the values are never in the HTML itself. Go to a random form on the internet and inspect it with the developer tools, the values are not updated when you type them in. If you want to do this, you will need to have some JavaScript in place that updates the HTML when the user enters something.

    – Gerald Versluis
    Nov 23 '18 at 15:54











  • We're using javascript in our current web / mobile app to read the responses as we have direct access to the HTML. Is there a way to do something similar with the HTML in a WebView control?

    – DomBurf
    Nov 23 '18 at 16:02











  • I think you can trigger C# methods from JavaScript with the WebView so you should be able to create something with that to get the values out

    – Gerald Versluis
    Nov 23 '18 at 16:03











  • Okay thanks, let me have a look into that.

    – DomBurf
    Nov 23 '18 at 16:04














4












4








4








We have a web and mobile app that generates a dynamic questionnaire using HTML. This allows us to create a wide variety of questions (text boxes, dropdowns, dates, radio buttons). We're currently re-building our app using Xamarin Forms, and would like to reuse our existing code that generates this questionnaire. Also, not all of the controls we need are implemented in Xamarin.



I have so far managed to generate the questionnaire in Xamarin using a WebView. This works perfectly. When the user submits the questionnaire, I can retrieve the HTML from the WebView. The problem is that the HTML doesn't show any of the responses the user has entered to the questions. For example, if the user typed a response into one of the text fields, this is not found anywhere in the HTML that is coming back from the WebView control.



Here is how I am creating the HTML questionnaire.



StringBuilder htmlString = new StringBuilder();
//build up my HTML string here
htmlString.Append("<div>.....");

var htmlWebView = new HtmlWebViewSource { Html = htmlString.ToString() };
WebView.Source = htmlWebView;


In the click event of the submit button I am retrieving the HTML from the WebView control like this.



var webViewSource = WebView.Source;
var htmlString = (string) WebViewSource.GetValue(HtmlWebViewSource.HtmlProperty);


I can upload and retrieve the HTML from the WebView. But how do I return the user's responses?



UPDATE



I can add very simple Javascript functions to my WebView's HTML as follows. This one simply returns 100.



private static string GetJavascriptFunction()
{
StringBuilder htmlString = new StringBuilder();
htmlString.Append("<html>");
htmlString.Append("<body>");
htmlString.Append("<script type="text/javascript">");
htmlString.Append("function getValue() {");
htmlString.Append("return 100;");
htmlString.Append("}");
htmlString.Append("</script>");
return htmlString.ToString();
}


Invoking the function as follows correctly returns 100.



string result = await WebView.EvaluateJavaScriptAsync("getValue()");


However if I want the Javascript to do any kind of DOM manipulation it always just returns null.



private static string GetJavascriptFunction()
{
StringBuilder htmlString = new StringBuilder();
htmlString.Append("<html>");
htmlString.Append("<body>");
htmlString.Append("<script type="text/javascript">");
htmlString.Append("function getValue() {");
htmlString.Append("return document.body.innerHTML;");
htmlString.Append("}");
htmlString.Append("</script>");
return htmlString.ToString();
}


This now returns null.



Is there any way to use Javascript to return the values from the HTML in a WebView control?










share|improve this question
















We have a web and mobile app that generates a dynamic questionnaire using HTML. This allows us to create a wide variety of questions (text boxes, dropdowns, dates, radio buttons). We're currently re-building our app using Xamarin Forms, and would like to reuse our existing code that generates this questionnaire. Also, not all of the controls we need are implemented in Xamarin.



I have so far managed to generate the questionnaire in Xamarin using a WebView. This works perfectly. When the user submits the questionnaire, I can retrieve the HTML from the WebView. The problem is that the HTML doesn't show any of the responses the user has entered to the questions. For example, if the user typed a response into one of the text fields, this is not found anywhere in the HTML that is coming back from the WebView control.



Here is how I am creating the HTML questionnaire.



StringBuilder htmlString = new StringBuilder();
//build up my HTML string here
htmlString.Append("<div>.....");

var htmlWebView = new HtmlWebViewSource { Html = htmlString.ToString() };
WebView.Source = htmlWebView;


In the click event of the submit button I am retrieving the HTML from the WebView control like this.



var webViewSource = WebView.Source;
var htmlString = (string) WebViewSource.GetValue(HtmlWebViewSource.HtmlProperty);


I can upload and retrieve the HTML from the WebView. But how do I return the user's responses?



UPDATE



I can add very simple Javascript functions to my WebView's HTML as follows. This one simply returns 100.



private static string GetJavascriptFunction()
{
StringBuilder htmlString = new StringBuilder();
htmlString.Append("<html>");
htmlString.Append("<body>");
htmlString.Append("<script type="text/javascript">");
htmlString.Append("function getValue() {");
htmlString.Append("return 100;");
htmlString.Append("}");
htmlString.Append("</script>");
return htmlString.ToString();
}


Invoking the function as follows correctly returns 100.



string result = await WebView.EvaluateJavaScriptAsync("getValue()");


However if I want the Javascript to do any kind of DOM manipulation it always just returns null.



private static string GetJavascriptFunction()
{
StringBuilder htmlString = new StringBuilder();
htmlString.Append("<html>");
htmlString.Append("<body>");
htmlString.Append("<script type="text/javascript">");
htmlString.Append("function getValue() {");
htmlString.Append("return document.body.innerHTML;");
htmlString.Append("}");
htmlString.Append("</script>");
return htmlString.ToString();
}


This now returns null.



Is there any way to use Javascript to return the values from the HTML in a WebView control?







xamarin webview xamarin.forms






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 26 '18 at 8:16







DomBurf

















asked Nov 23 '18 at 15:25









DomBurfDomBurf

6521934




6521934













  • I don't think you understand how HTML works. Unless you are also using JavaScript to actually set the values in your HTML, the values are never in the HTML itself. Go to a random form on the internet and inspect it with the developer tools, the values are not updated when you type them in. If you want to do this, you will need to have some JavaScript in place that updates the HTML when the user enters something.

    – Gerald Versluis
    Nov 23 '18 at 15:54











  • We're using javascript in our current web / mobile app to read the responses as we have direct access to the HTML. Is there a way to do something similar with the HTML in a WebView control?

    – DomBurf
    Nov 23 '18 at 16:02











  • I think you can trigger C# methods from JavaScript with the WebView so you should be able to create something with that to get the values out

    – Gerald Versluis
    Nov 23 '18 at 16:03











  • Okay thanks, let me have a look into that.

    – DomBurf
    Nov 23 '18 at 16:04



















  • I don't think you understand how HTML works. Unless you are also using JavaScript to actually set the values in your HTML, the values are never in the HTML itself. Go to a random form on the internet and inspect it with the developer tools, the values are not updated when you type them in. If you want to do this, you will need to have some JavaScript in place that updates the HTML when the user enters something.

    – Gerald Versluis
    Nov 23 '18 at 15:54











  • We're using javascript in our current web / mobile app to read the responses as we have direct access to the HTML. Is there a way to do something similar with the HTML in a WebView control?

    – DomBurf
    Nov 23 '18 at 16:02











  • I think you can trigger C# methods from JavaScript with the WebView so you should be able to create something with that to get the values out

    – Gerald Versluis
    Nov 23 '18 at 16:03











  • Okay thanks, let me have a look into that.

    – DomBurf
    Nov 23 '18 at 16:04

















I don't think you understand how HTML works. Unless you are also using JavaScript to actually set the values in your HTML, the values are never in the HTML itself. Go to a random form on the internet and inspect it with the developer tools, the values are not updated when you type them in. If you want to do this, you will need to have some JavaScript in place that updates the HTML when the user enters something.

– Gerald Versluis
Nov 23 '18 at 15:54





I don't think you understand how HTML works. Unless you are also using JavaScript to actually set the values in your HTML, the values are never in the HTML itself. Go to a random form on the internet and inspect it with the developer tools, the values are not updated when you type them in. If you want to do this, you will need to have some JavaScript in place that updates the HTML when the user enters something.

– Gerald Versluis
Nov 23 '18 at 15:54













We're using javascript in our current web / mobile app to read the responses as we have direct access to the HTML. Is there a way to do something similar with the HTML in a WebView control?

– DomBurf
Nov 23 '18 at 16:02





We're using javascript in our current web / mobile app to read the responses as we have direct access to the HTML. Is there a way to do something similar with the HTML in a WebView control?

– DomBurf
Nov 23 '18 at 16:02













I think you can trigger C# methods from JavaScript with the WebView so you should be able to create something with that to get the values out

– Gerald Versluis
Nov 23 '18 at 16:03





I think you can trigger C# methods from JavaScript with the WebView so you should be able to create something with that to get the values out

– Gerald Versluis
Nov 23 '18 at 16:03













Okay thanks, let me have a look into that.

– DomBurf
Nov 23 '18 at 16:04





Okay thanks, let me have a look into that.

– DomBurf
Nov 23 '18 at 16:04












1 Answer
1






active

oldest

votes


















0














After a few failed attempts I have managed to get this working. Here are the functions I have impemented for retrieving the responses from the user from the WebView.



private async Task<string> GetValueFromTextbox(string controlId)
{
return await WebView.EvaluateJavaScriptAsync($"document.getElementById('{controlId}').value;");
}
private async Task<string> GetValueFromCheckbox(string controlId)
{
return await WebView.EvaluateJavaScriptAsync($"document.getElementById('{controlId}').checked;");
}
private async Task<string> GetValueFromRadioButton(string controlname)
{
return await WebView.EvaluateJavaScriptAsync($"document.querySelector('input[name="{controlname}"]:checked').value;");
}
private async Task<string> GetValueFromDropdownn(string controlId)
{
return await WebView.EvaluateJavaScriptAsync($"document.getElementById('{controlId}').options[document.getElementById('{controlId}').selectedIndex].text;");
}





share|improve this answer
























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53449297%2freading-the-html-values-from-a-htmlwebviewsource-control-in-xamarin-forms%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    After a few failed attempts I have managed to get this working. Here are the functions I have impemented for retrieving the responses from the user from the WebView.



    private async Task<string> GetValueFromTextbox(string controlId)
    {
    return await WebView.EvaluateJavaScriptAsync($"document.getElementById('{controlId}').value;");
    }
    private async Task<string> GetValueFromCheckbox(string controlId)
    {
    return await WebView.EvaluateJavaScriptAsync($"document.getElementById('{controlId}').checked;");
    }
    private async Task<string> GetValueFromRadioButton(string controlname)
    {
    return await WebView.EvaluateJavaScriptAsync($"document.querySelector('input[name="{controlname}"]:checked').value;");
    }
    private async Task<string> GetValueFromDropdownn(string controlId)
    {
    return await WebView.EvaluateJavaScriptAsync($"document.getElementById('{controlId}').options[document.getElementById('{controlId}').selectedIndex].text;");
    }





    share|improve this answer




























      0














      After a few failed attempts I have managed to get this working. Here are the functions I have impemented for retrieving the responses from the user from the WebView.



      private async Task<string> GetValueFromTextbox(string controlId)
      {
      return await WebView.EvaluateJavaScriptAsync($"document.getElementById('{controlId}').value;");
      }
      private async Task<string> GetValueFromCheckbox(string controlId)
      {
      return await WebView.EvaluateJavaScriptAsync($"document.getElementById('{controlId}').checked;");
      }
      private async Task<string> GetValueFromRadioButton(string controlname)
      {
      return await WebView.EvaluateJavaScriptAsync($"document.querySelector('input[name="{controlname}"]:checked').value;");
      }
      private async Task<string> GetValueFromDropdownn(string controlId)
      {
      return await WebView.EvaluateJavaScriptAsync($"document.getElementById('{controlId}').options[document.getElementById('{controlId}').selectedIndex].text;");
      }





      share|improve this answer


























        0












        0








        0







        After a few failed attempts I have managed to get this working. Here are the functions I have impemented for retrieving the responses from the user from the WebView.



        private async Task<string> GetValueFromTextbox(string controlId)
        {
        return await WebView.EvaluateJavaScriptAsync($"document.getElementById('{controlId}').value;");
        }
        private async Task<string> GetValueFromCheckbox(string controlId)
        {
        return await WebView.EvaluateJavaScriptAsync($"document.getElementById('{controlId}').checked;");
        }
        private async Task<string> GetValueFromRadioButton(string controlname)
        {
        return await WebView.EvaluateJavaScriptAsync($"document.querySelector('input[name="{controlname}"]:checked').value;");
        }
        private async Task<string> GetValueFromDropdownn(string controlId)
        {
        return await WebView.EvaluateJavaScriptAsync($"document.getElementById('{controlId}').options[document.getElementById('{controlId}').selectedIndex].text;");
        }





        share|improve this answer













        After a few failed attempts I have managed to get this working. Here are the functions I have impemented for retrieving the responses from the user from the WebView.



        private async Task<string> GetValueFromTextbox(string controlId)
        {
        return await WebView.EvaluateJavaScriptAsync($"document.getElementById('{controlId}').value;");
        }
        private async Task<string> GetValueFromCheckbox(string controlId)
        {
        return await WebView.EvaluateJavaScriptAsync($"document.getElementById('{controlId}').checked;");
        }
        private async Task<string> GetValueFromRadioButton(string controlname)
        {
        return await WebView.EvaluateJavaScriptAsync($"document.querySelector('input[name="{controlname}"]:checked').value;");
        }
        private async Task<string> GetValueFromDropdownn(string controlId)
        {
        return await WebView.EvaluateJavaScriptAsync($"document.getElementById('{controlId}').options[document.getElementById('{controlId}').selectedIndex].text;");
        }






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 27 '18 at 9:52









        DomBurfDomBurf

        6521934




        6521934
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53449297%2freading-the-html-values-from-a-htmlwebviewsource-control-in-xamarin-forms%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            這個網誌中的熱門文章

            Xamarin.form Move up view when keyboard appear

            Post-Redirect-Get with Spring WebFlux and Thymeleaf

            Anylogic : not able to use stopDelay()