I have an large existing ASP.NET WebForms application. This application has a masterpage who manager security, navigation, ...
Pages developped are in a ContentPlaceHolder.
I would like to develop new pages in JS with web components. To use a web component on a page, it must be imported (<link rel="import" href="...">). This import must be on the <head> part of the page. In my case, the <head> is on the master page. So I have to import all the existing web components in the master page to be able to use them.
It does not sound like a very good idea.
How can I do it otherwise ?
Asp.Net lets you place ContentPlaceHolder in head tag. You can load the web components required by the page instead of loading them all in Master Page.
Master Page
<html>
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="cpHead" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="cpBody" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Web Form
<asp:Content ID="Content1" ContentPlaceHolderID="cpHead" runat="server">
<link rel="import" href="...">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpBody" runat="server">
</asp:Content>
Your HTML will look like
<html>
<head>
<title></title>
<link href="..." rel="import">
</head>
<body>
</body>
</html>
You would normally use RegisterClientScriptInclude. This will add the script file to the top of the page, but not in the <head>.
ClientScript.RegisterClientScriptInclude("myScript", "myJavaScriptFile.js");
If you really want it in the <head> you need to use a HtmlGenericControl
HtmlGenericControl genericControl = new HtmlGenericControl("script");
genericControl.Attributes.Add("type", "text/javascript");
genericControl.Attributes.Add("src", "myJavaScriptFile.js");
this.Page.Header.Controls.Add(genericControl);
It does not matter where you place this code (Master, Page, User Control). Aspnet will ensure they end up in the right place client side.
Related
In MVC one can use in _Layout.cshtml:
#if (IsSectionDefined("styles"))
{#RenderSection("styles", required: false)}
together with #Section styles on content page / layout to include css styles within <head> if given section is needed.
Is there an efficient way to mimic the same behaviour in Web Forms?
To summarise: I would like to have a possibility to render css and js on master page, only if they are required by specific child page based on that master page. So it will be not be included on pages which do not require those css and js files.
You could use ContentPlaceHolder. In your master page, define a content place holder as follows:
<head runat="server">
<title>..</title>
<meta charset="utf-8"/>
..
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
..and those child pages that require a special css or js files can use this content place holder to inject their needed files, e.g.:
<%# Page Title="" Language="C#" MasterPageFile=".." AutoEventWireup="true" CodeBehind=".." %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="some css file dedicated only to this child page" rel="stylesheet" />
<script src="..js.."></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
..
<h1><asp:Label ID="lblPageTitle" runat="server" Text=""></asp:Label></h1>
..
</asp:Content>
I am having two web pages default.aspx and main.aspx. How to show main.aspx content in default.aspx. i need to embed the content in one part of the default.aspx
You shoud change Main.aspx to a usercontrol(.ascx) then you can include it like this
<%# Register TagPrefix="uc" TagName="Main" Src="~/Controls/Main.ascx" %>
<uc:Main id="main" runat="server" />
I believe you want to embed the content in an iframe.
So in default.apx, you should embed:
<iframe src="http://www.main.aspx"></iframe>
Using JQuery
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Load remote content into object element</title>
</head>
<body>
<div id="siteloader"></div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$("#siteloader").html('<object data="http://tired.com/">');
</script>
</body>
</html>
For more reference
You have some choices here:
1. Use iframe HTML tag
2. Use UserControl (.ascx)
3. Use MasterPage
How do I include CSS reference in only certain pages on my asp.net website? If I include the reference in my master page, all pages of the website share the CSS reference.
Just add a CSS ContentPlaceHolder with a default value in it.
Basically, the CSS file you specify as default will be included unless you override that placeholder with an <asp:Content /> tag from a child page.
Your Master Page should look something like this.
<head>
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="/css/master.css" type="text/css" />
</asp:ContentPlaceHolder>
</head>
Then from any pages using that Master Page, you can simply override that with a different stylesheet.
On (example) AboutUs.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="Stylesheets" runat="server">
<link rel="stylesheet" href="/css/form.css" type="text/css" />
</asp:Content>
In my situation, i used the same masterpage from different locations in the solution. And since the ~ (Tilde) prefix on the reference to my css files, i added a response.write to the reference like so:
<%= ResolveUrl("~/css/myStyle.css") %>
You can use more than one Master page on your site.
You can also use nested master pages. The Top level might have the general site structure, and then one Master nested master page for each of your different areas.
When you right click your project and select Add, you choose the option WebContentForm, instead of WebForm. Then you can select the appropriate masterpage.
In your nested masterpages, you set the MasterPageFile equal to your top level masterpage.
Edit When combined with #Marko's approach you could have the following...
The advantage here is that all of your overrides only have to be written once.
Top Level MasterPage:
<head>
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="/css/default.css" type="text/css" />
</asp:ContentPlaceHolder>
</head>
Nested MasterPage with no override
<%# Page Language="C#" MasterPageFile="~/Site.master"%>
//don't reference the Stylesheets ContentPlaceHolder and the default is rendered
Nested MasterPage One with override.css
<%# Page Language="C#" MasterPageFile="~/Site.master"%>
<asp:Content ID="Content1" ContentPlaceHolderID="Stylesheets" runat="server">
<link rel="stylesheet" href="/css/override.css" type="text/css" />
</asp:Content>
Nested MasterPage Two with secondOverride.css
<%# Page Language="C#" MasterPageFile="~/Site.master"%>
<asp:Content ID="Content1" ContentPlaceHolderID="Stylesheets" runat="server">
<link rel="stylesheet" href="/css/secondOverride.css" type="text/css" />
</asp:Content>
Then, just set the appropriate master page on any of your web forms.
I have a page which has a masterpage. Do I put script and link tags inside the asp:content place holders or outside or does it matter.
When I put it outside, I get the following warning:
Only Content controls are allowed directly in a content page that contains Content controls.
I can see five (or 8) ways of doing it:
In the codebehind (.cs or .vb) using:
Scriptmanager.RegisterClientScriptinclude - using an absolute/relative path
Scriptmanager.RegisterClientScriptInclude - using an embedded resource
Scriptmanager.RegisterSlientScriptBlock - with your source inside
Adding it inline to your ASPX page in the designer
Sticking it inside the asp:content where the content lives inside the body tag.
Sticking it inside the asp:content where the content lives inside the head (You've said this isn't an option, so ignore this).
Adding it programmatically using the ScriptManager inside a control you use on the page as above.
"Only Content controls are allowed directly in a content page that contains Content controls" - did you forget the runat="server"?
If it's scripts and links for all pages, it should go outside any ContentPlaceHolders. If it's scripts and links for this page, it should go inside a Content inside the head. If it's default scripts, put it inside a head ContentPlaceHolder, and it can be replaced by the child page if needed. (VS usually complains about a ContentPlaceHolder in the head, but it works fine for me).
// master Page
<head runat="server">
<asp:ContentPlaceHolder id="head" runat="server">
<!-- Default scripts and CSS -->
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="jquery.js"></script>
</asp:ContentPlaceHolder>
<!-- Mandatory scripts and css -->
<link rel="stylesheet" type="text/css" href="all.css" />
<script type="text/javascript" src="all.js"></script>
</head>
<body>
Master Page!
<asp:ContentPlaceHolder id="body" runat="server" />
</body>
// Child (no JQuery)
<asp:Content ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" type="text/css" href="default.css" />
<!-- Don't need JQuery -->
<script type="text/javascript" src="prototype.js"></script>
</asp:Content>
<asp:Content ContentPlaceHolderID="body" runat="server">
Child Page!
</asp:Content>
// Child 2 (with JQuery)
<asp:Content ContentPlaceHolderID="body" runat="server">
Child Page!
</asp:Content>
If you are referring to <asp:Content /> tags, you can't put anything outside of them in an .aspx page. So you're limited to putting them inside the <asp:Content /> tag. If you want <script /> and <link /> tags you need to either put a <asp:ContentPlaceHolder /> in the <head> of your master page, or add them dynamically via the Page's Controls collection.
Outside. Tthe inside of the ContentPlaceholders is going to be replaced with content from your pages anyhow so it doesn't make much sense to put anything in there.
outside. in the master page
The place holders are the wrapping controls for pages which descend from master pages.
Use asp.net scriptreference tag in master page to add reference to javascript file and you will be able to access all you need in the javascript file as if you would have added to the local page.
I have no issues when doing using JQuery in a aspx page without a masterpage, but when I try to use it in pages that have a masterpage, it doesn't work, so I end up putting the jquery files and other script files in the page instead of the master. Now if I have 10 pages, I am doing this for all 10, which I know is incorrect. In the sample masterpage below, where would I put my script files.
<html>
<head runat="server">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<asp:ContentPlaceHolder ID="ContentPanel" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
I recently used the fancybox plugin and what I did was instead of putting the jquery script and fancybox scripts in the masterpage because I got frustrated on getting it to work, I just put it in the page where I wanted the script to run, specifically at the bottom, right before the closing asp:Content. Of course, now I have the issue of, if I wanted to use the fancybox plugin in other pages, I would put the jquery script and fancybox script on all 5 pages instead of just the masterpage. When dealing with masterpages, where does everything go using my example above?
You would declare your main jQuery scripts within the master page, as you would normally:
<head runat="server">
<link href="/Content/Interlude.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
And then any page specific JS files could be loaded within the Content controls that reference the Head ContentPlaceholder.
However, a better option would be to look into the ScriptManager and ScriptManagerProxy controls - these can provide you with a lot more control over the way your JS files are served to the client.
So you would place a ScriptManager control in you master page, and add a reference to the jQuery core code in that:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="/Scripts/jquery-1.3.2.min.js" />
</Scripts>
</asp:ScriptManager>
Then, in your page that requires some custom JS files, or a jQuery plugin, you can have:
<asp:Content ID="bodyContent" ContentPlaceholderID="body">
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
<Scripts>
<asp:ScriptReference Path="/Scripts/jquery.fancybox-1.2.1.pack.js" />
</Scripts>
</asp:ScriptManagerProxy>
The ScriptManager allows you to do things like control where on the page scripts are rendered with LoadScriptsBeforeUI (or better yet, after by setting it to False).
I use this method.
<script type="text/javascript" language="javascript" src='<%=ResolveUrl("~/scripts/jquery.js") %>' ></script>
Just place it above your tag...
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
Alright use a different contentplaceholder for your script. It should look like this
<script type="text/javascript" src="myscript.js" />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server">
</asp:ContentPlaceHolder>
Place this tag at the bottom of your masterpage, close to the </body> tag. This will allow you add scripts on the masterpage and also on your pages as well. Make sure that your scripts are loading in the right order by viewing the page source and ensuring the HTML rendered in the right way. Good luck.
Oh one more thing, make sure jQuery and then FancyBox load up before any other js you may have out there or else it won't work. Javascript loads in the order it was called, jQuery must load first!
This is what will work inside a Master page:
For Script file:
<script type="text/javascript" src="<%= ResolveUrl("~/script/scriptFile.min.js") %>"></script>
For CSS file:
<link rel="stylesheet" href="~/styles/CssFile.min.css" runat="server" />
Additional Notes:
Use the minified versions as could as possible (FileName.min.js) and
(FileName.min.css) to reduce loading time and improve SEO.
Put the CSS before the </head> and the script before the </body> to
enhance performance and improve SEO.
The tile character (~) in the path will resolve automatically to the root of your website.
Do not forget to use runat="server" for the stylesheet only. The script must not have runat="server" because it already uses server operators <%= %>.
You can use the online http://jscompress.com/ to compress your javascript and https://csscompressor.net/ to compress your CSS files.