Blazor JS scripts into a blazor component - javascript

I am building a Blazor app, I need to dynamically add a JavaScript file that is used only in a single Blazor component. As you would be aware Blazor allows adding script tags only to the root HTML document. This makes it difficult to add JavaScript files that are required only in a single component.
The script is
It is important to set the data-main="payment-js" attribute on the script tag.
Are there any restrictions around iframe rendering in Blazor? The script renders multiple iframes on the specific Blazor components as part a PCI compliant payment system integration.
The script works in a simple HTML file.
I would be grateful for any assistance

Edit:
Maybe MarkupString could help:
#((MarkupString)script)
#code {
string script = "<script data-main="payment-js" src="gateway.tillpayments.com/js/integrated/…>";
}
Old answer:
You could use the special HeadContent component to add the script in the <head> tag from your component.
<HeadContent>
<script suppress-error="BL9992" data-main="payment-js" src="gateway.tillpayments.com/js/integrated/…>
</HeadContent>
You have to add attribute suppress-error="BL9992" so that it won't give you Error RZ9992.
More info: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/control-head-content?view=aspnetcore-6.0#control-head-content-in-a-razor-component
Also there is this library for loading scripts in blazor: https://github.com/excubo-ag/Blazor.ScriptInjection

This can be achieved by using a script loader and JSRuntime. Check this out.

Related

How to add widget script to Blazor page

I need to add widget script to my Blazor project.
If I'm adding script to _Host.cshtml this widget runs on all project pages.
But I need to run it only on selected pages.
I can't insert
<script src="//code-ya.jivosite.com/widget/kiMhndUDCT" async></script>
to .razor component.
How can i do that with JSRuntime?
Thanks!
Here is what I would do:
Create a Component: Blazor Components
Within that Component, use JS Interop
Add this "Widget Blazor Componenet" that you just made to your pages you need.

How to embed / call external javascript in Angular 8 Application utilizing Caspio Datapage

I am looking to build an Angular 8 application and call Caspio datapages from inside.
The standard approach to using a Caspio Datapage is to embed a script tag as follows:
<script type="text/javascript" src="https://c1acu417.caspio.com/dp/A57E7000f6812a2641704a929225/emb"></script>
However, it does not seem to be working.
So, for example, I am doing the following:
Setup a StackBlitz ( https://stackblitz.com/edit/angular-m6cshx?file=src%2Fapp%2Fapp.component.html )
Nothing shows up.
Here, it is working in static html:
https://codesandbox.io/s/cocky-dawn-8l7pv
Does anyone have any experience or ideas as how to achieve this in Angular?
Why cannot I simply embed that script?
Your problem
You cannot put script tags inside of an Angular Component's Template. If adding via script tag is the only option, you have to add it to the index.html.
You are adding the script tag as the type of module but it is not a module
If you want to bring this into your angular application, you have to put in your index.html page or, download the file manually and add it to the bundle. (Currently, you can't reference a script by url in your ng build step).
Advice
Figure out if this library has the ability to dynamically render the form. If you can have control of that, then you're good. Just add it to the index.html page. Otherwise, you're going to have to build a component that dynamically adds the script tag reference (with JavaScript) to that component once it's rendered. It's not a good way to do things, but it should work.
Here's an idea of how to add a script tag programmatically to a component:
const s = this.renderer2.createElement('script');
s.type = 'text/javascript';
s.src = 'https://path/to/your/script';
s.text = ``;
this.renderer2.appendChild(this._document.body, s);
Referenced Here: http://blog.davidjs.com/2018/09/insert-script-tags-in-angular-components/
Adding script tags in Angular component template
https://github.com/angular/angular/issues/4903

Using Struts tags in Javascript

We have some widgets developed using Dojo and Javascript. The dojo code invokes some application services using io script mechanism to overcome cross browser issues. Currently the action for the io script is hard coded as follows.
var host="myhost.com";
var url = "http://"+host+"/context/service";
Every time we need to create WAR, we have to change host details. Is there a way in JS we can configure this ie., some thing like reading it from properties.
I found this s:url struts tag. I assume we can use this tag inside javascript code in a JSP. Can i use it in plain JS out side of JSP?
Sure, if you have your container set up to process *.js files as JSP files.
IMO this is a bit brittle.
You can also do things like hide data in the DOM via hidden elements or <script> tags with reasonable type attributes (e.g., not "text/javascript", the default).
You can also put the data into JavaScript variables in the JSP and access them from external JS files.

Same sidebar across webpages

I'm pretty new to web development. What is the best practice in keeping the same sidebar and other elements across web pages on one's site? Do you store the sidebar html and call that? If so, how would one go about doing something like that?
There're many options to handle this problem but I've found easy one using jQuery. Use this if it suits your requirements.
Add the jQuery CDN in your HTML file.
Create a JS file as sidebar.js.
Copy all your HTML code of the sidebar and store as a string variable in a function of the JS file. as
function loadNavbarDiv() {
String navbar_code_str = '<nav><div>...</div></nav>
$('body').append(navbar_code_str);
}
Then in the HTML file, you want to add navigation bar, add folowing code in your <head>
<script src="sidebar.js"></script>
<script>
$(document).ready(function(){
loadNavDiv();
});
</script>
It's working fine for me.
Happy coding!
Here's one way to do it: use "include" files. No JavaScript required. The server does the work, instead of requiring the client to add the content.
SSI, or Server Side Includes, were first developed to allow Web
developers to "include" HTML documents inside other pages. If your Web
server supports SSI, it's easy to create templates for your Web site.
Save the HTML for the common elements of your site as separate files.
For example, your navigation section might be saved as navigation.html
or navigation.ssi.
Use the following SSI tag to include that HTML in each page.
<!--#include virtual="path to file/include-file.html" -->
Use that same code on every page that you want to include the file.
That page also describes some other approaches. But if you know this is called using include files, you can search for it more easily. For example, this article describes includes and how to call them from JavaScript if you must.
As long as you're only coding in html, you will need to copy your html into every page. You can store the css for the sidebar in one and the same file and call that on every page though.
Other scripting languages and frameworks might contain templates (php) or master pages (asp.net) for example which make it possible to use the same code in different pages.

How to get visual studio to recognize a cshtml file as javascript

I am writing a css/js page that has some dynamic parts in it.
To do this i am using a cshtml file containing css/js - i am using mvc.net and returning the css from a controller action.
The trouble is visual studio recognizes this page as html and not as javascript/css so it does not give me javascript/css coloring and IntelliSense.
My questions:
is there a better/easier way of creating dynamic css/js in .net
How can i get visual studio to recognize a cshtml page as javascript.
I know this is an old post...but...
What I did was just put the script tags around my javascript files in their own .cshtml file.
I created a separate controller (JavascriptController.cs), and I created a filter on that controller that removes the script tags. I set the filter in the OnActionExecuting method. by just doing
this.Response.Filter = new ScriptFilter(Response.Filter, Response.ContentEncoding);
So you get the syntax, you get razor without having to use RazorJS, and you can request the js files like regular routes in an MVC application. You just have to keep the script tags on the partial view while editing.
So you can call
/Javascript/{Action}
and you'll get your javascript file with your razor in it, and the filter will remove the script tags so you can include it like a normal script.
<script src="http://{host}/Javascript/{action}"></script>
What is wrong with putting <script> and <style> tags in a page and put your dynamic js/css there , in the end if it is dynamic there is no way for caching it so this approach will be fine.
you can write something like below:
<script>
function myFunction_#MyFunc(params)(obj) { return obj.field + #MyOtherFunc(params); }
<script>
and razor engine will evaluate #MyFunc(params) and #MyOtherFunc(params) before sending it to browser
The best solution is to follow unobtrusive javascript and unobtrusive styling and put your javascript into a .js file, put your css into a .css file and reference them in the markup in your cshtml file with a <script> and <link> tag.
e.g.
<script src="Scripts/scriptName.js" type="text/javascript"></script>
<link rel="stylesheet" href="Content/styleSheetname.css" type="text/css" />
This is good practice as it keeps your content(markup)/styling/behaviour separate.
For JavaScript you could try the RazorJS nuget package. But we've run into some inconsistencies while using it.
Still trying to find a better way to do this using Controller/Views and still be able to use intellisense and get decent coloring.

Categories