I am writing a small application in VS2012 containing a webbrowser control. I would like to load a html file containing javascript. The webbrowser control is not able to deal with javascript default. So I have been doing some reading.
I have the following html file:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var centerlatlng = new google.maps.LatLng(45.046006, -105.245867);
var myOptions = {
zoom: 13,
center: centerlatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body style="margin:0px; padding:0px;">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>
The html file located in the debug directory of my c# project (VS2012).
I would like to load this html file and call the initialize function. I have been searching for a long time on a clear tutorial on how to do this but without any success. With the knowledge I have I tried the following. However, not with the expected result.
Code:
maps_browser.DocumentText = File.ReadAllText("GPSmap.html");
maps_browser.Document.InvokeScript("initialize");
So my questions are:
How do I load a *.html file containing javascript into the webbrowser?
How do I call javascript functions from the html file?
How to properly navigate to the html file?
Thanks in advance for any advice :)
It looks like that the following code works for me:
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
maps_webbrowser.DocumentText = File.ReadAllText(#"GPSmap.html");
}
private void maps_webbrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
Debug.WriteLine(maps_webbrowser.DocumentText.ToString());
maps_webbrowser.Document.InvokeScript("initialize");
}
}
Related
I have an ASP.Net website with C# code Behind. I'm trying to get the selected Value on a double click from an asp.net List Box. All the solutions I see are for Windows Forms, were there is actually a Doubleclick event. No such luck for the System.Web.UI.WebControls version of the ListBox.
Need the doubleclick to trigger a method in the code behind that allows me to read the selected value.
There are a lot of posts out there on this, but they are not applicable to System.Web.UI.WebControls.ListBox.
Here is a sampling of the code:
.aspx page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="XXX-AddressBook.aspx.cs" EnableViewState="true" Inherits="VRV_AddressBook" %>
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<%-- <meta http-equiv="X-UA-Compatible" content="IE=7, chrome=1"/>--%>
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<style>
</style>
<script type="text/javascript">
</SCRIPT>
<title> Address Book</title>
</head>
<form id="frmAddressBook" runat="server">
<div>
<asp:ListBox ID="lstbxddNames" runat="server" Rows="17" SelectionMode="Multiple"></asp:ListBox>
</div>
</form>
</body>
</html>
Proposed Method from .aspx.cs page, with no way of triggering because there is no doubleclick action in the Web Ap version:
private void lstbxddNames_DoubleClick(object sender, System.EventArgs e)
{
if (lstbxddNames.Items.Count > 0)
{
for (int i = 0; i < lstbxddNames.Items.Count; i++)
{
if (lstbxddNames.Items[i].Selected)
{
string Test = lstbxddNames.Items[i].Value.ToString();
}
}
}
}
Here is how I am loading the ListBox:
DataTable dt_UserRS = new DataTable();
I then load the contents of the Datatable from a SQL Query (Code not shown)
if (Choice.ToUpper() == "GLOBAL")
{
lstbxddNames.DataSource = dt_UserRS;
lstbxddNames.DataTextField = "Name";
lstbxddNames.DataValueField = "Email";
lstbxddNames.DataBind();
}
Here is the solution that i am using. I actually tried this before posting, but I put it in the wrong place in the PageLoad(I put it in the if (!IsPostBack) section in error).
protected void Page_Load(object sender, EventArgs e)
{
if (Request["__EVENTARGUMENT"] != null && Request["__EVENTARGUMENT"] == "lstdbclick")
{
lstbxddNames_DoubleClick(lstbxddNames.SelectedValue.ToString());
// string TEST = lstbxddNames.SelectedValue.ToString();
}
lstbxddNames.Attributes.Add("ondblclick", ClientScript.GetPostBackEventReference(lstbxddNames, "lstdbclick"));
if (!IsPostBack)
{
ViewState["ViewStateId"] = System.Guid.NewGuid().ToString(); //PART OF PAGE REFRESH DETECTION
Session["SessionId"] = ViewState["ViewStateId"].ToString();
Made sure it would hit the method as well:
private void lstbxddNames_DoubleClick(string Value)
{
if (!String.IsNullOrEmpty(Value))
{
string Test = Value;
}
}
What is happening here?
One thing I don't understand is why were adding the attribute? If I can detect the doubleclick with the event argument, why am I adding the attribute?
In your listbox loop you can wire the double click event to each item. e.g.
item.Attributes.Add("ondblclick", "functionCall();");
So I've been browsing other threads, however none of the fixes I've found have solved my issue. I hope some of the more experienced coders here will be kind enough to help me out, mods I'm sorry if it turns out I'm being stupid here.
So I've built an app in Angular for an asp.net web app, the angular module should be displaying data from an entity model and displaying it inside a div.
Right now the code is not working, and I have no errors. From what I've seen I suspect its the Booking-controller however I cannot fathom what's wrong.
Here's my code
_Layout.cshtml
` <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Web App</title>
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/js")
#Scripts.Render("~/bundles/angular")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/bootstrap")
</head>
<body ng-app="BookingsApp">
//a bunch of navbar stuff and other content
#RenderSection("scripts", required: false)
</body>
</html>
`
HomeController.cs
`using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace WebApp.Controllers
{
public class HomeController : Controller
{
//More navigation stuff
public JsonResult GetAll()
{
List<Booking_form> Booking = new List<Booking_form>();
using (BookingEntities1 ed = new BookingEntities1())
{
Booking = ed.Booking_forms.ToList();
return new JsonResult { Data = Booking, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
}
}
Page where I expect booking to be displayed
#section scripts{
<script src="~/Content/Angular/BookingModule.js"></script>
<script src="~/Content/Angular/BookingController.js"></script>
<script src="~/Content/Angular/BookingService.js"></script>
<link href="~/Content/TableStyle.css" rel="stylesheet" />
}
<div ng-controller="BookingController">
<table>
<tr>
<th>Id</th>
<th>Class</th>
<th>Day</th>
</tr>
<tr></tr>
<tr ng-repeat="e in BookingList">
<td>{{e.BookingId}}</td>
<td>{{e.ClassName}}</td>
<td>
{{e.Day}}
</td>
</tr>
</table>
</div>
Angular Module
var app = angular.module('BookingsApp',[]);
Angular Service
app.service('BookingService', function ($http) {
this.getBookings=function () {
return $http.get('/HomeController/GetAll');
}
});
Angular Controller
`app.controller('BookingController',function($scope,BookingService) {
function getBookingList() {
BookingService.getBookings().then(function (emp) {
$scope.BookingList = emp.data;
}, function (error) {
alert('Failed to fetch data');
});
}
});
`
I'd prefer to have a div on the page displaying the info with the ng-app="BookingApp" line, however this caused the BookingController reference to cause errors.
Any help would be greatly appreciated.
Edit:
Having looked again through browser console this message appears for all 3 angular scripts:
`Resource interpreted as Stylesheet but transferred with MIME type application/javascript: "http://localhost:49532/Content/Angular/BookingModule.js".
Solved, had to do a complete rebuild and make use of the service factory. For anyone else encountering this issue, see the provided link for a tutorial.
http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/05/13/how-to-use-angularjs-in-asp-net-mvc-and-entity-framework-4.aspx
note this solution will not work if solution uses multiple tables with foreign key dependencies.
I am trying to do a simple form submit, which will take my application to another url in another domain. I have seen it working on my SYS environment but when I am doing that on Prod, it does not work.
For ex, my website is something like this https://dosomething.com/Index
The value from document.getElementById("hidUrl").value is like https://anotherdomain.com/id=1
Ideally when the form submits, I should be redirected to the page https://www.anotherdomain.com/id=1 (which is what I have seen on my test server) but on production, it is taking me to https://dosomething.com/Index/www.anotherdomain.com/id=1 and I am getting 404 error
404 - File or directory not found.
The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.
I am not sure why is this happening. Has anyone have got any idea?
Much appreciated.
Thanks
Here is the HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function submitAuthenticationForm() {
document.getElementById("userName").value = document.getElementById("hidUserName").value;
document.getElementById("token").value = document.getElementById("hidToken").value;
document.getElementById("hiddenForm").action = document.getElementById("hidUrl").value;
document.getElementById("hiddenForm").submit();
}
</script>
</head>
<body onload="javascript:submitAuthenticationForm();">
<form method="post" id="hiddenForm" runat="server">
<div>
<asp:HiddenField ID="hidUserName" runat="server"/>
<asp:HiddenField ID="hidToken" runat="server"/>
<asp:HiddenField ID="hidUrl" runat="server"/>
</div>
</form>
</body>
</html>
Here is what the code behind cs file doing:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
hidUserName.Value = Session["authUserName"].ToString();
hidToken.Value = Session["authToken"].ToString();
hidUrl.Value = Session["authUrl"].ToString();
Session["authUserName"] = null;
Session["authToken"] = null;
Session["authUrl"] = null;
}
}
I am trying to hide some divs on a webpage within Windows Phone 8.
The HTML looks like this:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head></head>
<body>
<div class="topbar_container">...</div>
<div id="banners">...</div>
</body>
</html>
In the C#:
private void Browser_LoadCompleted(object sender, NavigationEventArgs e)
{
Browser.InvokeScript("eval", "document.getElementsByClassName('topbar_container')[0].style.display = 'none';");
//this works
Browser.InvokeScript("eval", "document.getElementsById('banners')[0].style.display = 'none'");
//This dont work
}
What did I do wrong?
In your second InvokeScript, you've mistakenly invoked a function called document.getElementsById. It should be:
document.getElementById
(Not plural "Elements").
after three days of trying I'm near giving it up..
I try to use the Google Maps API to create a map with a longer line formed by several points. Unfortunately not even uploading a XML file worked out for me (Though I successfully authorized myself with my Google account).
Can someone please give me help and post a C#/VB code (snippet) on how to create a map and draw a line on it? Thanks for you help!
Norbert
If you use javascript API for Google map, here is a sample:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Polyline Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>