Reading the HTML values from a HtmlWebViewSource control in Xamarin Forms
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
asked Nov 23 '18 at 15:25
DomBurfDomBurf
5791830
add a comment |
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
asked Nov 23 '18 at 15:25
DomBurfDomBurf
5791830
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
add a comment |
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
asked Nov 23 '18 at 15:25
DomBurfDomBurf
5791830
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
xamarin webview xamarin.forms
asked Nov 23 '18 at 15:25
DomBurfDomBurf
5791830
asked Nov 23 '18 at 15:25
DomBurfDomBurf
5791830
edited Nov 26 '18 at 8:16
DomBurf
asked Nov 23 '18 at 15:25
DomBurfDomBurf
5791830
asked Nov 23 '18 at 15:25
DomBurfDomBurf
5791830
asked Nov 23 '18 at 15:25
DomBurfDomBurf
5791830
5791830
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
add a comment |
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
add a comment |
1 Answer
1
active
oldest
votes
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;");
}
answered Nov 27 '18 at 9:52
DomBurfDomBurf
5791830
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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;");
}
answered Nov 27 '18 at 9:52
DomBurfDomBurf
5791830
add a comment |
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;");
}
answered Nov 27 '18 at 9:52
DomBurfDomBurf
5791830
add a comment |
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;");
}
answered Nov 27 '18 at 9:52
DomBurfDomBurf
5791830
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;");
}
answered Nov 27 '18 at 9:52
DomBurfDomBurf
5791830
answered Nov 27 '18 at 9:52
DomBurfDomBurf
5791830
answered Nov 27 '18 at 9:52
DomBurfDomBurf
5791830
answered Nov 27 '18 at 9:52
DomBurfDomBurf
5791830
5791830
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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