I was wondering if there is a way to add JavaScript files to individual views if I am using a wrapper .cshtml file.
Basically I have a wrapper cshtml file called _Layout that I am using for all my front end views. It basically has the <header> section and the HTML for my header/navigation and the footer. It also contains references to all the JavaScript files I need on each page after the footer.
However, on my contact view I want to use another JavaScript file, but I don't want to add it to the wrapper as that will add it to every single view.
Is there anyway to get add the file to the wrapper using a conditional statement - i.e. if Contact view then reference the contact JS file?
You can use Razor's section. It allows you to create "sections" in your layout page, and then add to them from your view pages.
You might already have a section "Scripts" declared in your layout page. If not, all you need to do is add #RenderSection("Scripts", required: false) in your layout, immediately after your other script tags. This creates a section called "Scripts" which we will add to later.
Then, you can add to that section by adding the following to your individual views:
#section Scripts {
<script type="text/javascript" src="..."></script>
}
You can do this with other elements as well; you aren't limited only to scripts. You'll just have to add another #RenderSection("SectionName", required: false) to your layout page.
You might also be interested in reading Scott Gu's slightly dated (2010) blog post on Layouts and Sections with Razor.
Related
I have a javascript code and I need to put it in Layout to use for all my views in .NET Core. I use
<script src="~/js/template.js"></script>
it works, but only for first page. I tried to use also #Scripts.Render(), but it's an old method from .NET Framework.
Create View for all page like Layout page, you can use default _Layout.cshtml in Shared Folder
Add link js before end body tag
Add #RenderSection("scripts", required: false) after your link js
For use layout use Layout - 'your layout path' for your page if use _Layout.cshtml no need this line.
use end page
#Section Screipts{
// between tag script write code
}
If found this Stack Overflow page that shows you how to add a Javascript include to an ASP.NET/MVC (Razor) view, so that it ends up in the HEAD section of the web page:
Add CSS or JavaScript files to layout head from views or partial views
It works great. But I'm wondering if there is a way to do it in a way that takes advantage of bundling? I found this SO post that says it isn't possible and to use something called Cassette, but it's from 2012 so I'm wondering if there's a way to do it now native to ASP.NET/MVC/Razor:
MVC Bundles: How to add assets in views and have them render combined with the main layout page bundle
I found this SO post that talks about adding new bundles dynamically but it appears to add them only to the BODY section, not the HEAD:
MVC Bundles: How to add assets in views and have them render combined with the main layout page bundle
Your comment has helped me understand what you want to do now. As far as rendering out bundles from a view, it works the same way the answer to your first question.
First, make a bundle for those file(s) that you want.
BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/mySpecialBundle").Include(
"~/Scripts/notOftenUsedScript.js",
"~/Scripts/someOtherScript.js"));
Next, in your layout, define a section where you want to be able to render out the JavaScript bundle.
_layout.cshtml
#RenderSection("scripts", required: false)
Now, in any view that you want to render the special bundle, reference this section and use the same syntax that you would in the layout page for bundle rendering.
ExampleView.cshtml
#section scripts{
<!---Test section rendering-->
#Scripts.Render("~/bundles/mySpecialBundle")
}
The #Scripts.Render and #Styles.Render will work from any razor page in your application. Using the section allows us to control where the output from our view page will land in the master page.
With that said, if the JS is truly lightweight, then after the first time your user hits a page with the special bundle, it should be cached by their browser. So, the performance hit from just having this in your layout all the time would probably be minimal the first page hit and non-existent for each page hit afterwards.
In my ASP.NET MVC4 application I got 1 javascript file for my functions across the site.
This works pretty good - however I want to run certain code in certain views.
Usually I would solve this by simply putting a short script tag in the view calling the desired function.
However I load my js files at the bottom of the body tag so this script tag would call a function before it being loaded which would obviously not work.
How can I call individual parts of my js file from different views while keeping my js files at the bottom of the body?
There are a few things going on here.
I would not be putting JavaScript directly in the page. Many reasons for this, and is not the focus of your question, but something I wanted to bring up.
You can have a separate JS file that gets loaded after your main JS file that actually does the call to the functions from "main".
My approach is to tag said views with an id:
<div id="specific-page-name"></div>
Then in my javascript simply do:
if ($('#specific-page-name').length) {
// Run code
}
This way you can still separate your views from js code.
Finally, if I have to use model data in js I can do something like:
<div data-model-data="#Model.Data"></div>
And simply read it as:
$('div').data('model-data');
I'm detailing the answer given by Matt in his comment : in your layout, you can specify that you want some additional HTML content (in your case, that will be your JS). You'll want to add it after your main JS block.
#RenderSection("AddScripts", required: false)
Then in your view, you can add a section and it won't be rendered in the view, but in the corresponding section in the layout (after your main JS block).
#section AddScripts {
<script type="text/javascript">
...
</script>
}
I'am making a dynamic website in which the positioning and components of certain components like the fixed header, menubar, footer etc are common in almost all the pages. So how do I include this fixed components in my every webpage? I'am using JSP and javascript.
Thanks in advance.
If you are including static content then you can use
<%#include file="includes/header.html" %>
or for dynamic content
<jsp:include page="includes/header.jsp" />
From http://docs.oracle.com/cd/E19159-01/819-3669/bnajb/index.html:
Reusing Content in JSP Pages
There are many mechanisms for reusing JSP content in a JSP page. Three
mechanisms that can be categorized as direct reuse are discussed here:
The include directive
Preludes and codas
The jsp:include element
An indirect method of content reuse occurs when a tag file is used to
define a custom tag that is used by many web applications.
The include directive is processed when the JSP page is translated
into a servlet class. The effect of the directive is to insert the
text contained in another file (either static content or another JSP
page) into the including JSP page. You would probably use the include
directive to include banner content, copyright information, or any
chunk of content that you might want to reuse in another page. The
syntax for the include directive is as follows:
<%# include file="filename" %>
For example, all the Duke’s Bookstore application pages could include
the file banner.jspf, which contains the banner content, by using the
following directive:
<%# include file="banner.jspf" %>
Another way to do a static include is to use the prelude and coda
mechanisms described in Defining Implicit Includes. This is the
approach used by the Duke’s Bookstore application.
Because you must put an include directive in each file that reuses the
resource referenced by the directive, this approach has its
limitations. Preludes and codas can be applied only to the beginnings
and ends of pages. For a more flexible approach to building pages out
of content chunks, see A Template Tag Library.
The jsp:include element is processed when a JSP page is executed. The
include action allows you to include either a static or a dynamic
resource in a JSP file. The results of including static and dynamic
resources are quite different. If the resource is static, its content
is inserted into the calling JSP file. If the resource is dynamic, the
request is sent to the included resource, the included page is
executed, and then the result is included in the response from the
calling JSP page. The syntax for the jsp:include element is:
<jsp:include page="includedPage" />
The hello1 application discussed in Packaging Web Modules uses the
following statement to include the page that generates the response:
<jsp:include page="response.jsp"/>
So you may use
<jsp:include page="includepage.jsp" />
You can use
<head>
<?php include("path/webpage.html"); ?>
</head>
I'm moving my script references from < head> in the master to bottom right before < /body>.
This has caused some problems with my load order.
In my master I have a ContentPlaceHolder, and I can use this fine from my Views to add additional javascripts.
But how can I add javascripts to this section from a PartialControl?
If I just include the scripts from the control the scripts will load in the wrong order (The script from the PartialControl will render before the scripts in the master). I need to be able to add scripts from my partial view to my ContentHolder in the page.
How shall I tackle this problem? At first I was thinking of an HtmlHelperExtension, but I can't reach the master page from the HtmlHelper object.
Thanks in advance.