Windows 10 UWP Webview
I have the two html files located in a www folder under Assets (Assets/www/xxx.html) in a Windows 10 UWP, both files in VS 2015 are set to be copied to the output dir.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple Script</title>
</head>
<body>
<form action="submit.html" method="post">
Data:<input type="text" name="somedata" > <br> <br>
<input type="submit" value="Submit" >
</form>
</body>
</html>
and submit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dummy Submission</title>
</head>
<body>
<h2> Your data has been submitted - Thank You. </h2>
</body>
</html>
The Webview object is embbeded in the XMAL as below
<WebView x:Name="WebBrowser" HorizontalAlignment="Left" VerticalAlignment="Top" Height="532" Width="1014" NavigationStarting="WebBrowser_NavigationStarting"/>
And the index page is loaded by
/// Helper to perform the navigation in webview
/// </summary>
/// <param name="url"></param>
private void NavigateWebview(string url)
{
try
{
Uri targetUri = new Uri(url);
WebBrowser.Navigate(targetUri);
}
catch (FormatException myE)
{
// Bad address
WebBrowser.NavigateToString(String.Format("<h1>Address is invalid, try again. Details --> {0}.</h1>", myE.Message));
}
}
NavigateWebview(#"ms-appx-web:///Assets/www/index.html");
The page loads and displays correctly but it will not display the linked 'submit.html' page, its just blank.
If I trap the Navigation event it does occur but appears to be prefixed by a GUID as show below.
I have changed paths to absolute etc and read the docs in detail but I fail to see why this does not work.
Ideas Please Guys ...
If I trap the Navigation event it does occur but appears to be prefixed by a GUID as show below
The "GUID" is the package name of current app, it is the default value of Authority part of URI schemes. So if you only want to navigate to another page, this absolutely path is right. You can test by code NavigateWebview(#"ms-appx-web://{your package name}/Assets//www/submit.html");
The page loads and displays correctly but it will not display the linked 'submit.html' page, its just blank
For your issue, I change the form method to get, it will work.
<form action="submit.html" method="get" id="myform">
Data:<input type="text" name="somedata"> <br> <br>
<input type="submit" value="Submit">
</form>
Please Click Me to jump
form has two methods for submiting the form data. Get sends form data via a URL string, post sends form data via the server. In my opinion, post method post data firstly and then navigate, and the data are handled at server side. I haven't seen posted form data received and handled on a HTML page, so I guess you did not need use post method. For get method you can receive data and deal them in javascript, here is how to do.
Related
I'm trying to create a dashboard/graphical interface for managing purposes. How can I create buttons that call certain functions from a controller? It's in ASP.NET CORE 3, using the MVC-pattern.
What I want to do in the application is executing c# code by calling a method from my Index.cshtml page and passing parameters.
I've tried multiple solutions, namely those that state that the view and controller are synced with the controller function looking for the "equally named" view but it just doesn't work.
Edit: Found the solution: I needed to specify both the controller and ActionResult.
<form action="Home/Change" method="post">
<input type="text" name="DoorID" placeholder="Guid.." />
<br />
<input type="submit" value="Post" />
</form>
I was apparently not smart enough to read the countless tutorials.
Thanks for the help!
If you want to send a piece of data after the button click to the server, you should create a form in your view and a post action in your controller. However, if you don't want to post any data and you want to simply do something after button click, creat a get action in your controller and navigate to that action path using button click event. Finally, you can return the same page at your action and do what you want before hand.
Use [httpGet("path")] attribute on top of any public function in your controller to Mark it as action. Then you can invoke it in HTML using something like this <a asp-action="path">sth</a>
since you only wants to trigger a function on a btn click and pass some data i recommend you to make an ajax call to the back-end using java script or jquery is the more effective way.
it will look like this
$('#btn').click(function () {
$.post( "your action url ", { name: "John", time: "2pm" } )
.done(function(data)
{
// in case your action return some data it will be in the "data" variable
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- you need to have jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<input type="button" id="btn" value="click me ">
</body>
</html>
I have a simple HTML file with a button in which whenever I click it, it looks up to the registry and then runs a batch file. After a couple of clicks, I noticed it seems to freeze. Whenever I hover my cursor to the tab, it doesn't display details anymore. This part is crucial since I have to retrieve the description/details through IAccessible's accDescription.
Also, I noticed that whenever this issue happens, whenever I click on the button, the action URL in my form will appear in the address bar for a split second and then goes back to default html file path. Any help would be much appreciated.
Here's my HTML code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2" runat="server">
<title>Run Executable HTA</title>
</head>
<body>
<form action="appts:THxJRXxodHRwczovL3d3dy5nb29nbGUuY29tLnBo">
<input type="submit" value="Launch Portal to Left" />
</form>
</body>
</html>
The Html Amp Post goes to the current url?.
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" rc="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
</head>
<body>
<form class="-amp-form" method="post" target="_top" novalidate="" action-xhr="/Home/About">
<input name="name" class="data-input" required="" type="text" placeholder="Name...">
<input name="email" class="data-input" required="" type="email" placeholder="Email...">
<input class="button button-primary" type="submit" value="Subscribe">
</form>
</body>
</html>
Hovering over the submit input button in a browser shows the current url and clicking the button appears to do nothing (using httpFiddler there is no post or get request occuring). The solution is a standard MVC 5 application with the layout changed to include the amp ⚡ symbol in Html declaration and scripts included. Any ideas why it would show the current url when hovering over the button for example https://localhost:44331/Home/Index and not make any posts with the above code when the form button is clicked?
here is one of the resources i have been following from: https://ampbyexample.com/components/amp-form/
The post was working, it just wasn't redirecting to the view after posting. The browser uses the 'action' property on the form to show the url that the user will be sent to and as this value is omitted for an amp action-xhr post it was just showing the current url; however it was still posting to the correct url when clicked. What i was looking to do is a post and redirect and it seems that currently only Get amp requests support page redirection. This might change in the future but for now it needs to use Get requests for page redirecting.
On our website we have a link to another page. This looks like this
<a href="URL" title="Title" class="thisClass">
<img src="IMG" width="20" border="0"/>
</a>
What I want is that when the link is clicked then a popup comes up with ex. this information:
“The page you are trying to enter has xx images and can take long time to load. Are you sure you want to continue”
xx is a variable that can be given from the website where the link is present.
Then there should of course be an OK and CANCEL button on the popup. If the OK button is clicked then the URL be loaded to the browser, if CANCEL is clicked then nothing should happen (return to original page)
The website is programmed in asp.net c#.
We are not interested in a new webpage, but just a simple javascript popup given the user a warning that due to xx number of images the webpage will be slow to load.
This webpage is used on an intranet site and we like to warn users when they enter a website that we expect will take long time to load.
Take a look at the jQuery UI Dialog (http://jqueryui.com/dialog/) or Twitter's Bootstrap Modal (http://twitter.github.io/bootstrap/javascript.html#modals)
I think the both solutions can do what you need.
<a href="URL" title="Title" onclick="return confirm('The page you are trying to enter has xx images and can take long time to load. Are you sure you want to continue?');" class="thisClass">
<img src="IMG" width="20" border="0"/>
</a>
If you can do with the regular browsers' alert box, try this. Else you will have to resort to other jquery plugins to make it look more elegant that are mentioned on other answers.
You can user JqueryUi for this, this library includes Dialog which corresponds to your need.
This is the website :
http://jqueryui.com/dialog/#default
And a sample of code that I find in this url :
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
There is also example to manage confirmation (button OK and button CANCEL)
I hope that I help you ;)
I want to use Valums file upload javascript. However, when I run the demo or the tests provided by them I get an Origin null is not allowed by Access-Control-Allow-Origin. in Chrome. It doesn't work on firefox either, but it seems to work on Internet Explorer.
The code is too long to post and I don't know where it goes wrong, if you need a part of the code I can add it in.
The html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="fileuploader.css" rel="stylesheet" type="text/css">
<style>
body {font-size:13px; font-family:arial, sans-serif; width:700px; margin:100px auto;}
</style>
</head>
<body>
<p>Back to project page</p>
<p>To upload a file, click on the button below. Drag-and-drop is supported in FF, Chrome.</p>
<p>Progress-bar is supported in FF3.6+, Chrome6+, Safari4+</p>
<div id="file-uploader-demo1">
<noscript>
<p>Please enable JavaScript to use file uploader.</p>
<!-- or put a simple form for upload here -->
</noscript>
</div>
<script src="fileuploader.js" type="text/javascript"></script>
<script>
function createUploader(){
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader-demo1'),
action: 'do-nothing.htm',
debug: true
});
}
// in your app create uploader as soon as the DOM is ready
// don't wait for the window to load
window.onload = createUploader;
</script>
</body>
</html>
There's probably nothing wrong with your code, but you're trying to violate the same origin policy. Basically, if your site is http://aaa.com/, you cannot make AJAX called to http://bbb.com/.