I have the following HTML code that is being displayed in a WebBrowser control:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Welcome</title>
<style type="text/css">
/*<![CDATA[*/
body {
font: 8pt Verdana;
background: ThreeDFace;
}
#appname {
line-height: 1;
}
#appname h1 {
margin: 0;
font: bold 10pt Verdana;
}
#appname p {
margin: 0;
}
#actions_list {
list-style-type: none;
padding: 0;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var ACTION_NEWPROJECT = 0x0001;
var ACTION_NEWFILE = 0x0002;
var ACTION_OPENPROJECT = 0x0003;
var ACTION_OPENFILE = 0x0004;
//]]>
</script>
</head>
<body>
<div id="appname">
<h1>Application</h1>
<p>Slogan</p>
</div>
<div id="actions">
<ul id="actions_list">
<li>New project</li>
<li>New file</li>
<li>Open project</li>
<li>Open file</li>
</ul>
</div>
<div id="recentfiles">
<p>Recent files:</p>
<ul id="recentfiles_list"></ul>
</div>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
var recentFiles = window.external.GetRecentFiles();
var recentFilesDOMContainer = document.getElementById("recentfiles_list");
for (var i = 0; i < recentFiles.length; i++) {
var index = 0+i;
var fileDOMParent = window.document.createElement("li");
var fileDOMElement = window.document.createElement("a");
fileDOMElement.href = "#";
fileDOMElement.onclick = function() {
window.external.OpenRecentFile(index);
return false;
};
fileDOMElement.innerText = recentFiles[i];
fileDOMParent.appendChild(fileDOMElement);
recentFilesDOMContainer.appendChild(fileDOMParent);
}
};
//]]>
</script>
</body>
</html>
To communicate with the application I am using the WebBrowser.ObjectForScripting property so I can access a class with functions via window.external. That is also working perfectly.
But when I try to open the page below I get the following error:
Script Error
Line: 61
Char: 25
Error: Function expected
Code 0
Why is this happening? It seems to occur at the for loop.
the only thing I can think of is that recentFiles does not have an array in it. Did you try opening the developer console and typing in recentFiles to see what it contains? :)
Related
I am trying to generate a pdf from an HTML string. To create an HTML string I have converted the cshtml to a string using the following code.
protected override void ExecuteCore() { }
public static string RenderViewToString(string controllerName, string viewName, object viewData)
{
using (var writer = new StringWriter())
{
var routeData = new RouteData();
routeData.Values.Add("controller", controllerName);
var fakeControllerContext = new ControllerContext(new HttpContextWrapper(new HttpContext(new HttpRequest(null, "http://google.com", null), new HttpResponse(null))), routeData, new HomeController());
var razorViewEngine = new RazorViewEngine();
var razorViewResult = razorViewEngine.FindView(fakeControllerContext, viewName, "", false);
var viewContext = new ViewContext(fakeControllerContext, razorViewResult.View, new ViewDataDictionary(viewData), new TempDataDictionary(), writer);
razorViewResult.View.Render(viewContext, writer);
return writer.ToString();
}
}
I am calling this method:
var str = HomeController.RenderViewToString("Home", "Pdf", name);
when there is HTML only in the cshtml this method renders the HTML properly and I am able to convert that to Pdf without any error.
But I have to generate the HTML dynamically, so I used Vue js 3 to render the HTML.
After using the vue js RenderViewToString is not able to generate the HTML (though no error), but in the output it returns the variable name as it is.
RenderViewToString returns the following html string:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css">
<title>Hello, world!</title>
<style>
body {
font-family: arial, helvetica, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #000000;
background-color: #ffffff;
}
</style>
<script src="https://unpkg.com/vue#3"></script>
</head>
<body>
<div id="app">
<div class="container-fluid p-4">
<div id="message"></div>
{{message}}
<todo-item></todo-item>
</div>
</div>
<script type="text/javascript">
const {
createApp
} = Vue
// Create Vue application
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
}
})
// Define a new component called todo-item
app.component('todo-item', {
template: `<li>This is a todo</li>`
})
// Mount Vue application
app.mount("#app");
</script>
</body>
</html>
Can this be made workable? Or this is not a right way to do this thing?
I am trying to print one gridview . For that I gave a button and on button click I call javascript for printing tha grid.
function doPrint() {
var prtContent = document.getElementById('<%= grdHistoricalData.ClientID %>');
prtContent.border = 0; //set no border here
var WinPrint = window.open('', '', 'left=50,top=100,border=1px,width=1000,textAlign=center,height=1000,toolbar=0,scrollbars=1,status=0,resizable=1');
WinPrint.document.write(prtContent.outerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
This code is working fine but only thing is that print preview of gridview data is displaying left align.Normally Girdview Data is showing center align but when we print data shows in left align.
Gridview normal appearance
Print Preview of Gridview
Please help to do center align in print preview of Gridview.
There are several solutions I use in different circumstances.
1) external file. Load a small file to a iframe and call for data from parent.
<!--print.html -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Printer version</title>
<script type="text/javascript">
window.onload = function () {
var a = this.parent.getContent();
document.body.innerHTML = a;
}
function printMe() {
window.print();
}
</script>
<link href="/Styles/print.css" media="print" rel="stylesheet" />
</head>
<body>
</body>
</html>
Parent document.
<div id="divPrint" style="display:none;">
<div class="popup">
<div style="overflow:hidden;">Printer Version
<div style="float:right;">
<input type="button" ID="btnPrnClose" value="X" onclick="return closePrint()" />
</div>
</div>
<iframe id="frPrint" style="width:100%;"></iframe>
</div>
</div>
</div>
<script type="text/javascript">
function getContent() {
return '<div>' +
'<div class="right no-print" onclick="printMe();" style="cursor: pointer;" title="Print"> \
<img alt="Print" src="/images/printer.png" /></div>' + document.getElementById('gvOuterContainer').innerHTML+ '</div>';
}
function closePrint() {
document.getElementById('divPrint').style.display = 'none';
}
function PrintMessage() {
document.getElementById('divPrint').style.display = '';
document.getElementById('frPrint').src = "print.html?a=" + Math.random();//force no-cache
return false;
}
</script>
2) Print from the page.
<style type="text/css" media="print">
*
{
border: none!important;
}
.noprint,.popup
{
display: none!important;
}
#scrollContainer
{
width: auto!important;
}
.pop-show
{
display: table!important;
left: 0;
margin-left: 0;
top: 0;
width: 100%!important;
z-index: 100;
}
/* and so on */
</style>
Details may differ.
Finally got answer , I need to set gridview property that resolve this issue
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
I was searching some examples and articles related to saving and loading a route into a bing map but i couldn't find anything, so currently i am asking if this is possible.
Please let me know if this is supported by the bing maps for windows phone.
I used to use bing map api on my web
I`m not sure if it will work well
initialize the map using the following code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key", mapTypeId: Microsoft.Maps.MapTypeId.road });
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>`
add code to make the route request when the button is clicked, and add code to the RouteCallback function to set the map view and draw the route.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key", mapTypeId: Microsoft.Maps.MapTypeId.road });
}
function ClickRoute(credentials)
{
map.getCredentials(MakeRouteRequest);
}
function MakeRouteRequest(credentials)
{
var routeRequest = "http://dev.virtualearth.net/REST/v1/Routes?wp.0=" + document.getElementById('txtStart').value + "&wp.1=" + document.getElementById('txtEnd').value + "&routePathOutput=Points&output=json&jsonp=RouteCallback&key=" + credentials;
CallRestService(routeRequest);
}
function RouteCallback(result) {
if (result &&
result.resourceSets &&
result.resourceSets.length > 0 &&
result.resourceSets[0].resources &&
result.resourceSets[0].resources.length > 0) {
// Set the map view
var bbox = result.resourceSets[0].resources[0].bbox;
var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));
map.setView({ bounds: viewBoundaries});
// Draw the route
var routeline = result.resourceSets[0].resources[0].routePath.line;
var routepoints = new Array();
for (var i = 0; i < routeline.coordinates.length; i++) {
routepoints[i]=new Microsoft.Maps.Location(routeline.coordinates[i][0], routeline.coordinates[i][1]);
}
// Draw the route on the map
var routeshape = new Microsoft.Maps.Polyline(routepoints, {strokeColor:new Microsoft.Maps.Color(200,0,0,200)});
map.entities.push(routeshape);
}
}
function CallRestService(request)
{
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", request);
document.body.appendChild(script);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<input id="txtStart" type="text" value="Seattle"/>
<input id="txtEnd" type="text" value="Portland"/>
<input type="button" value="Calculate Route" onclick="ClickRoute()"/>
</body>
</html>
I am using slayeroffice's custom alert box, slayeroffice(period)com/code/custom_alert/. (Can't post more than two links) On my browser it shows up like this. The alert box is the blue one in the middle of the screen.
http://i.stack.imgur.com/u1TEz.png
On my local it shows up like this, I highlighted the alert box. I wish i could image link this.
It works on the same version version of browser but one of them is on local.
http://i.stack.imgur.com/0xehV.png
What am I doing wrong?
Here's my code integrated with slayeroffice's code.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Test1.aspx.cs" Inherits="Test1" %>
<%# Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<script type="text/javascript">
function showPopUp(){
setTimeout(function() {alert("Warning");}, 5000);
}
function delayer(){
showPopUp();
}
// constants to define the title of the alert and button text.
var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";
// over-ride the alert method only if this a newer browser.
// Older browser will see standard alerts
if(document.getElementById) {
window.alert = function(txt) {
createCustomAlert(txt); //overrides alert method
}
}
function createCustomAlert(txt) {
// shortcut reference to the document object
d = document;
// if the modalContainer object already exists in the DOM, bail out.
if(d.getElementById("modalContainer")) return;
// create the modalContainer div as a child of the BODY element
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
// make sure its as tall as it needs to be to overlay all the content on the page
mObj.style.height = document.documentElement.scrollHeight + "px";
// create the DIV that will be the alert
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
if(false) alertObj.style.top = document.documentElement.scrollTop + "px";
// center the alert box
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
// create an H1 element as the title bar
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));
// create a paragraph element to contain the txt argument
msg = alertObj.appendChild(d.createElement("p"));
msg.innerHTML = txt;
// create an anchor element to use as the confirmation button.
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
btn.href = "#";
// set up the onclick event to remove the alert when the anchor is clicked
btn.onclick = function() { removeCustomAlert();return false; }
}
// removes the custom alert from the DOM
function removeCustomAlert() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}
</script>
<form id="form1" runat="server">
<div>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="delayer();return false;" />
</form>
</body>
</html>
You are missing the styles:
<style type="text/css">
#modalContainer {
background-color:transparent;
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:10000;
background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
}
#alertBox {
position:relative;
width:300px;
min-height:100px;
margin-top:50px;
border:2px solid #000;
background-color:#F2F5F6;
background-image:url(alert.png);
background-repeat:no-repeat;
background-position:20px 30px;
}
#modalContainer > #alertBox {
position:fixed;
}
#alertBox h1 {
margin:0;
font:bold 0.9em verdana,arial;
background-color:#78919B;
color:#FFF;
border-bottom:1px solid #000;
padding:2px 0 2px 5px;
}
#alertBox p {
font:0.7em verdana,arial;
height:50px;
padding-left:5px;
margin-left:55px;
}
#alertBox #closeBtn {
display:block;
position:relative;
margin:5px auto;
padding:3px;
border:2px solid #000;
width:70px;
font:0.7em verdana,arial;
text-transform:uppercase;
text-align:center;
color:#FFF;
background-color:#78919B;
text-decoration:none;
}
</style>
I've an aspx page and that page has a table like below
<table id="tbl1" runat="server">
<tr>
<td>
Hello world
</td>
</tr>
</table>
Now I want to get the position of the table (x,y coordinates) from code behind (C#).
Is there any way to get it?
Try this
ASPX:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function getPosition(elmID) {
var elmPosition = $("#"+elmID).position();
$("#<%= hdnPosition.ClientID%>").val(elmPosition.left + "," + elmPosition.top);
}
$(document).ready(function () {
$("#<%= btnGetPosition.ClientID %>").click(function () {
getPosition("tbl1");
});
});
</script>
</head>
<body>
<form id="frmMain" runat="server">
<table id="tbl1" runat="server">
<tr>
<td>
Hello world
</td>
</tr>
</table>
<asp:HiddenField ID="hdnPosition" runat="server" />
<asp:Button ID="btnGetPosition" runat="server" Text="Get position"
onclick="btnGetPosition_Click"/>
</form>
</body>
</html>
Codebehind:
protected void btnGetPosition_Click(object sender, EventArgs e)
{
string position = hdnPosition.Value;
}
You can achieve this with many ways
add a placeholder and put your table at runtime:-
<asp:placeholder id="PlaceHolder1" runat="server" xmlns:asp="#unknown">
</asp:placeholder>
set CSS at runtime
style1
{
position:absolute;
left:100px; //Example
top:150px; //Example
}
in CS code, use
Table.CssClass = "style1";
You can use Control.Style Property to set style of a control:
Table tbl = new Table();
tbl.Style[HtmlTextWriterStyle.Position] = "Absolute";
tbl.Style[HtmlTextWriterStyle.Top] = "10px";
If you want it in complete JavaScript. For example:
<!DOCTYPE html>
<head>
<title>Overlapping tables</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
table.first
{
position: absolute;
margin: 0;
padding: 0;
color: #000000;
background-color: #ff0000;
text-align: center;
}
table.second
{
margin: 0;
padding: 0;
position: relative;
text-align: center;
color: #00ff00;
background-color: transparent;
}
</style>
<script type="text/javascript"><!--
onload = setPos;
function setPos ()
{
var table_1 = new namedTable ('first_table');
var table_2 = new namedTable ('second_table');
table_2.style.top = table_1.style.top - 1;
table_2.style.left = table_1.style.left - 1;
}
function namedTable(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
//--></script>
</head>
<body>
<table class="first" id="first_table">
<tr>
<td>
<h1>TABLE</h1>
</td>
</tr>
</table>
<table class="second" id="second_table">
<tr>
<td>
<h1>TABLE</h1>
</td>
</tr>
</table>
</body>
</html>
Notes:
1) The document still validates (both CSS and HTML) at w3.org.
2) It is tested in Mozilla and Internet Explorer.
3) By force of habit I use the doc-type xhtml1-strict.dtd, but you should
not use this doctype when publishing for Mozilla. Use HTML
transitional instead - or simply put in no header (which will let the
browsers run in Quirk mode, and be more lenient towards scripting
errors).
4)
If you further want to study this topic, here is a link to the most
precise and lightweight Javascript Positioning techniques I know of:
http://www.quirksmode.org/
Good luck!