Menu
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?
596
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;");
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With