I want to remove mentioning scripts every page like
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js"></script>
it should be mentioned at once.like a common place to refer for source.
i have my framework in 3.5. how can i achieve this.
create a new project to hold all JavaScript files that you need want throughout the application. You can embed all the script into the DLL. That way, if the DLL is deployed to the website, all JavaScript files are also automatically deployed.
You can check out complete tutorial given below.
Managing-Your-JavaScript-Library-in-ASP-NET
You can do it by using master page. Demo like
<master page>
<header>
//add script file here
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js"></script>
//Other scripts
</header>
<content>
<Sub pages>
//Here you can debase your pages(like dynamically change pages), So the header script will referred from above header
</content>
<footer>
<//footer>
<master page>
MSDN link for Master page
If you don't want to use a master page you could use a server control and add it to the pages as needed.
Adding a Master Page is good.
As an alternate way, you can achieve this by creating a base page and adding scripts from web.config file into the page's header by overriding Page class OnInit event.
Create a class as BasePage inheriting from System.Web.UI.Page like
public class BasePage : System.Web.UI.Page
{
}
On all the pages where you want to load the scripts, inherit them from BasePage
Earlier
public partial class _Default : System.Web.UI.Page
{
}
Now
public partial class _Default : BasePage
{
}
Mention your script files at One place - Web.Config as below
<appSettings>
<add key="ScriptJquery" value="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"/>
<add key="ScriptJqueryUI" value="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"/>
</appSettings>
In the BasePage Class override OnInit as below
public class BasePage : System.Web.UI.Page
{
protected override void OnInit(EventArgs e)
{
IEnumerable<string> scripts = ConfigurationManager.AppSettings.Keys.OfType<string>().Where(s => s.StartsWith("Script"));
foreach (string script in scripts)
{
Literal scriptTag = new Literal();
scriptTag.Text = string.Format(#"<script src=""{0}"" type=""text/javascript""></script>",ConfigurationManager.AppSettings[script].ToString());
Page.Header.Controls.Add(scriptTag);
}
base.OnInit(e);
}
}
Related
I'm using Spring Boot 2.7.5, Java 8 and Maven and have the following jars included in pom.xml:
spring-boot-devtools
spring-boot-starter-data-jpa
spring-boot-starter-test
spring-boot-starter-tomcat
spring-boot-starter-web
tiles-core
tiles-jsp
tomcat-embed-jasper
I want to use JQuery and DataTables. My static content is in src/main/resource/static:
src/main/resources
bootstrap-5.2.2-dist/
DataTables/
jquery-ui-1.13.2.custom/
jquery-3.6.1.min.js
myapp.css
myapp.js
I have a configuration class that has this
#Configuration
#EnableWebMvc
#ComponentScan(basePackages = { ... })
public class ApplicationConfiguration implements WebMvcConfigurer
{
#Override
public void addResourceHandlers(
ResourceHandlerRegistry registry)
{
registry//
.addResourceHandler("/static/**")//
.addResourceLocations("/static/");
}
}
In my JSP, I have tried the following, none of which work
<script type="text/javascript" src="jquery-ui-1.13.2.custom/jquery-ui.min.js"></script>
<script type="text/javascript" src="static/jquery-ui-1.13.2.custom/jquery-ui.min.js"></script>
<script type="text/javascript" src="/static/jquery-ui-1.13.2.custom/jquery-ui.min.js"></script>
In my application.properties, I have this:
spring.mvc.view.prefix=/WEB-INF/content/
spring.mvc.view.suffix=.jsp
server.servlet.context-path=/myapp
What am I missing or doing wrong?
Found a way to make it work. Not the best answer, but it is an answer (cue Wheel of Time quote):
I moved the static folder directly under the webapp folder. I then changed the script and link tags to have the src/href start with "static/".
I have no idea why this works but am still open to finding the right way to do it.
I'm trying to load a series of scripts from a component of an angular application, I want to do it in a specific component and not in the index.html but I can't find a way to do it, any help or advice?
this is my code home.component.html
<div class="row">
<div id="webchat" style="position: relative;z-index: 999999;"></div>
<script>
window.GB_SETUP={websocket_url: "wss://api-mychat.com", type:"config",
channel: "6342", session_id: "34345", style:"343234"};
</script>
<script src="https://myscript.com/script.js"></script>
<script src="https://myscript.com/script2.js"></script>
</div>
If I copy and paste as is in the index.html of the project it works great, but I want to do it inside a component
Angular ignores all script tags in templates for security reasons (to prevent cross-site-scripting / XSS).
To eliminate the risk of script injection attacks, Angular does not support the script element in templates. Angular ignores the script tag and outputs a warning to the browser console.
https://angular.io/guide/template-syntax#empower-your-html
As a workaround you could inject the script programmatically in your component's ts file, like so...
#Component({
...
})
export class HomeComponent implements OnInit {
...
constructor(
#Inject(DOCUMENT) private document: Document
) { }
ngOnInit(): void {
this.injectScript("https://myscript.com/script.js");
this.injectScript("https://myscript.com/script2.js");
}
public injectScript(src: string) {
if(this.document && src?.trim()) {
const script = this.document.createElement("script");
script.setAttribute("type","text/javascript");
script.setAttribute("src",src.trim());
this.document.head?.appendChild(script);
}
}
...
}
I have modified the Map Route in my Dot Net Core application that for every request goes to one controller, so not lots of controller or Action Result is needed for each page that we build.
greedy Routing
routes.MapRoute("", "/{*article}",
defaults: new { controller = "Pages", action = "Killme" });
In Page Controller build an object that has list of CSS and JavaScript locations, this object is being passed to Page view
public IActionResult Killme()
{
var PageInfo = GetPage_Data();
ViewBag.PageInfo = t;
return View("Pages");
}
and i have tried to pass this information as model or view bag to Page view.
in the Page view i try to build the JavaScript and CSS dynamically based on the model like
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
#{
RootObject PageInfo = ViewBag.PageInfo;
foreach (var JavaScript in PageInfo.js)
{
var JSsrc = JavaScript.src;
<script type="text/javascript" src="#JSsrc ">
</script>
}
<script type="text/javascript" src=""></script>
</head>
<body>
</body>
</html>
Now the Issue is when i build the JavaScript the controller is called 2 times and the page is being rendered 2 times, when i comment the
<script type="text/javascript" src="#JSsrc ">
</script>
the page controller will get called once,
any help regarding why this happening and what am i doing wrong would be appreciated
The reason for this behavior is that the staticFileHandler is either not configured or is not able to find your Javascript file and passes the request further down the pipeline. The MVC handler captures all requests (because of your route) and returns therefore the same page again.
First check that your startup class uses the staticFileHandler before the mvcHandler, so something like this:
public class Startup
{
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseStaticFiles();
..
app.UseMvc();
}
}
Secondly make sure that your Javascript is placed inside the wwwroot and uses the correct path.So a file like wwwroot/js/mysite.js should a script tag like:
<script src="/js/mysite.js"></script>
These improvements should resolve your issue.
As the question says all about it but to give you a little more information i included all the .js files in my Asp.NET Mvc application like below:
<script src="~/Scripts/jquery-1.10.2.js"></script>
Even that I have to include .js files in every single page in order to be able to work with jQuery else it doesn't work. I tried to include these script files in BundleConfig surprisingly the scripts where not working at all even on the layout page. What is the trick?!
In general you have got an App_Start/BundleConfig.cs in your project
public class BundleConfig
{
public static readonly string SiteJquery1Bundle = "~/bundles/jquery1";
public static readonly string SiteJquery2Bundle = "~/bundles/jquery2";
public static void RegisterBundles(BundleCollection bundles)
{
// We will choose bundle to render depending on IE version in view
bundles.Add(new Bundle(SiteJquery1Bundle)
.Include("~/Scripts/jquery-1.10.2.js"));
bundles.Add(new Bundle(SiteJquery2Bundle)
.Include("~/Scripts/jquery-2.1.3.min.js"));
}
In your Shared/_Layout.cshtml view add:
<html>
<head>
<title>...</title>
<!--[if lt IE 9]>
#Scripts.Render(BundleConfig.SiteJquery1Bundle)
<![endif]-->
<!--[if gte IE 9]><!-->
#Scripts.Render(BundleConfig.SiteJquery2Bundle)
<!--<![endif]-->
...
</head>
So, default ASP.NET MVC projects adds _ViewStart.cshtml which defines single layout in every view. And check bundle registration in Global.asax.cs
protected void Application_Start()
{
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
// ...
}
I have 2 Razor .cshtml files that have a similar structure like the following:
<script type="text/javascript" src='#Url.Content("~/Scripts/jqwidgets/jqxcore.js")'></script>
<script type="text/javascript" src='#Url.Content("~/Scripts/jqwidgets/jqxdata.js")'></script>
<script type="text/javascript" src='#Url.Content("~/Scripts/jqwidgets/jqxbuttons.js")'></script>
...
<More header stuff (different in both files)>
<script language="javascript" type="text/javascript">
function commonFunctionForJqWidgets() {
...
callSomethingFromJqWidgetsLibrary();
...
}
</script>
I am writing common code for these 2 files and would like to put the common code in another .js (or .cshtml) file instead of duplicating it in both places. However, the common code requires including some of the jqwidgets includes since it calls library functions for it.
What would be the proper way to handle this? Should I simply add a new .cshtml file, move all of the includes in there, and then define my common functions in there as well?
Usually when you have common UI code, you may put that inside a partial view which can be included in other views as needed. But in your case, It is more like a bunch of javascript files you want in multiple files. So you may create a script bundle which will have all those scripts and use that in your pages as needed.
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
// Your existing bundles here
bundles.Add(new ScriptBundle("~/bundles/jQxWidgets")
.Include(
"~/Scripts/jqwidgets/jqxcore.js",
"~/Scripts/jqwidgets/jqxdata.js",
"~/Scripts/jqwidgets/jqxbuttons.js",
"~/Scripts/SomeOtherCustomJsfileRelatedtojQxWidgets.js"));
}
}
And in your specific views, you can include this inside the Scripts section.
#section Scripts
{
#Scripts.Render("~/bundles/jQxWidgets")
}
Or if you have more than just the scripts as your common stuff, create a partial view and include your common stuff there and include this partial view in your other views as needed.
Create a partial view called CommonGrid.cshtml inside your ~/Views/Shared folder
<h2>Common header for both the pages </h2>
#section Scripts
{
#Scripts.Render("~/bundles/jQxWidgets")
}
And in your other views
UserList.cshtml
<h1>Users</h1>
#Html.Partial("CommonGrid")
ProductList.cshtml
<h1>Products</h1>
#Html.Partial("CommonGrid")
You can also make your CommonGrid strongly typed to a view model and create a property in your page specific view model of this type(of CommonGrid's viewmodel) and pass that in the Html.Partial method.