I have a view Email1.cshtml (Build Action=Embedded Resource):
#model Email1Model;
<html>
<head>
</head>
<body>
<h1>Hello, #Model.Name</h1>
</body>
</html>
I render the cshtml view to string using ViewRenderService. The only difference is that I use IRazorViewEngine.GetView() instead of FindView();
However, in the output I some application insights stuff:
<html> <head>
<script type="text/javascript">
var appInsights=window.appInsights||function(config){....);
window.appInsights=appInsights;
appInsights.trackPageView();
</script> </head> <body>
<h1>Hello, Liero</h1> </body> </html>
In the startup.cs:
services.AddApplicationInsightsTelemetry(opt => opt.InstrumentationKey = appInsightsKey);
Question:
How do I turn off the javascript in specific views that I render using ViewRenderService?
If you _layout.cshtml has #Html.Raw(JavaScriptSnippet.FullScript) that will inject application insights javascript into each page, you could try adding a conditional in _layout.cshtml using:
#if (condition true for instrumenting)
{
#Html.Raw(JavaScriptSnippet.FullScript)
}
Related
I am trying to inject some React code into an HTML document. I am following React's own documentation and feeding their starter code (a simple like button) into the page. Everything was working great. I changed it to use JSX, changed it to a functional component using hooks instead of a class component with state. No problems.
However, whenever I include an import call and try to bring in another component, the component breaks on the page and stops displaying, but doesn't throw any kind of error I can see.
How do I develop in a "react-y" way with components and modularity while injecting it into an html page?
Here is the code I'm working with at the moment:
HTML document
<body>
<div id="react-root"></div>
<!-- inject react, reactDOM and JSX engine -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- point to component -->
<script src="transpiled/app.js"></script>
</body>
React Component
'use strict';
import {SecondComponent} from './components/SecondComponent';
const e = React.createElement;
const LikeButton = () => {
const [liked, setLiked] = React.useState(false);
if (liked) return 'You liked this functional component.'
const handleLikeClick = () => {
setLiked(true);
}
return (
<div>
<button onClick={handleLikeClick}>new like button with jsx</button>
{liked && <SecondComponent/>}
</div>
)
}
const domContainer = document.querySelector('#react-root');
ReactDOM.render(e(LikeButton), domContainer);
Like I said, any sort of import statement seems to be where it breaks. Can't find resources online about it. Thanks in advance for your help!
UPDATE: After a bit of research importing modules between several <script> tags is now possible.
This can be achieved adding the Babel Plugin attribute data-plugins and setting the value to "transform-es2015-modules-umd" which will enable the UMD pattern.
You'll also need to set type="text/babel" on each <script> tag.
This will allow you to use the import statements directly inside each file. Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./Header.js"></script>
<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./App.js"></script>
</body>
</html>
Working Gist Example
I want to get the data from the another html file using angularjs $http get method, but i did't get anything
below is my code
<!DOCTYPE html>
<html>
<head ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<p>{{welcome}}</p><br />
<h1>{{error}}</h1>
</div>
<script>
var app=angular.module('myApp',[])
app.controller('myCtrl',['$scope','$http',function($scope,$http){
$http.get('home.html').than(function(response){
$scope.welcome=response.data;
},function(reason){
$scope.error=reason.data;
});
}]);
</script>
</body>
</html>
Below is my another html file code
<p>This is home page</p>
it should be then not than
.then(function(response){
Demo
I created a web page wherein I want to display there another HTML file. I used jQuery to do this but wasn't able to display the content of the file I have included. Why do you think this happened. Thanks a lot.
Here's my code for my mainpage.
sample.html
<html>
<head>
<title> Sample Only </title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script>
$(function(){
$('#footerLang').load("sampleFooter.html");
});
</script>
</head>
<body>
<div id="footerLang">
<h1></h1>
</div>
</body>
</html>
sampleFooter.html
<p> THIS IS A FOOTER </p>
It is highly possibly because you are placing the following block in head without $(document).on("ready", function() { ...; });
$(function(){
$('#footerLang').load("sampleFooter.html");
});
In this case jQuery will unable to find the #footerLang element since the DOM is not ready, you could revise the script as follow
$(function(){
$(document).on("ready", function () {
$('#footerLang').load("sampleFooter.html");
});
});
or move the script tag just before the </body>
<html>
<head>
<title> Sample Only </title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>
<body>
<div id="footerLang">
<h1></h1>
</div>
<script>
$(function(){
$('#footerLang').load("sampleFooter.html");
});
</script>
</body>
</html>
I found out that this was just a browser compatibility issue. I launch it in Firefox and it worked.
I am trying to develop a simple back-end widget for asp. Since, I am new to ASP, I chose JavaScript as ASP language. I think I don't have the right tool to write to output. Response.Write() sends output directly to the start of the page. What I am missing here?
Hers is the code that I made:
<!DOCTYPE html>
<html>
<body>
<h2>Hello world</h2>
<script language=Javascript runat=server>
Response.Write("Hello JS");
</script>
</body>
</html>
which is giving the following output:
Hello JS <!DOCTYPE html>
<html>
<body>
<h2>Hello world</h2>
</body>
</html>
There is a great answer on the subject here but basically if you want this to work change the above code block as follows;
<!DOCTYPE html>
<html>
<body>
<h2>Hello world</h2>
<% Call Response.Write("Hello JS"); %>
</body>
</html>
You can also replace the above line of code with <%= "Hello JS" %> as a shortened form of Response.Write() method.
if you want to use javascript then it should be like this:
<script language=Javascript>
alert("Hello JS");
</script>
or
<script language=Javascript>
alert('<%=SomeVarfromASP%>');
</script>
Those will give you POP up boxes with your message or in your case value of your variable in it.
Basically when you put "<%=" it is pretty much like you say please write this...
If you need something to be typed/printed on the page by JavaScript you will need to use more specialized functionality such as getelementbyid or similar.
Your code would look like:
<html>
<head>
<script type="text/javascript">
function ChangeGreet()
{
var vgreet = document.getElementById("JSGreet");
vgreet.innerHTML = 'Hello JS';
}
</script>
</head>
<body onload="ChangeGreet()">
<div>Hello MS</div>
<div id="JSGreet"> </div>
</body>
</html>
JavaScript and VBScript(Classic ASP) have their own syntax. Look it up at http://www.w3schools.com/js/DEFAULT.asp. It has great tutorials for beginners in both languages.
Source.HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red">Hello World</h1>
<p id="demo" style="color:red">Click the button below to remove the style attribute from the header above.</p>
</body>
</html>
Parser.html
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Parse</button>
<script>
function myFunction()
{
document.getElementsByTagName("H1")[0].removeAttribute("style");
document.getElementsByTagName("P")[0].removeAttribute("style");
};
</script>
</body>
</html>
Now what i need guidance for was , i need the Parse button from parser.html to apply the functions for source.html and save as output.html in same path of source.html...
Kindly help me out ...
What Willshaw said is correct. Javascript don't have that much power to solve your problem. You need to go for some serverside scripting.
I agree with the previous answer, it is a pretty strange way to do.
But, the DOM parsing being really easy with javascript, you could do the parsing on the client side, I guess, and then send the processed html to your backend, and save it in result.html.
I will use Jquery for the example, way easier.
Parser.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="btnLoad">Load Source</button>
<button id="btnParse">Parse</button>
<button id="btnSave">Save</button>
<div style="display:none" id="sourceContainer"></div>
<script>
$(document).ready( function() {
$(".btnLoad").click(function(){$("#sourceContainer").load("/source.html");})
$(".btnParse").click(function(){
$(".sourceContainer h1").removeAttr("style");
$(".sourceContainer p").removeAttr("style");
})
$(".btnSave").click(function(){
var data = {
html: $("#sourceContainer").html()
};
//replace first param by the backend url, add callback function
$.post("http://...", data, ...);
})
});
</script>
</body>
</html>