Sometimes javaScript files need to be sourced in the head of an HTML document; however the >net framework does not appear to update tIf you add a link element into the head of the .Net master page, e.g to use a style sheet, then the .Net framework takes care of sorting out the relative URI resource, so that the correct path for the style sheet is always used.
e.g. linking to a style sheet in the head of a master page
<link href="StyleSheetFile.css" rel="stylesheet" type="text/css" />
would be automatically converted, if you went in to a sub directory, to
<link href="../StyleSheetFile.css" rel="stylesheet" type="text/css" />
However a source used to load a JavaScript file does not behave in the same way and the path remains as defined in the master page.
e.g. linking to a javascript file in the head of a master page, no matter how deep in to the directory structure you go, will stay as
<script src="JavaScriptFile.js" type="text/javascript" />
Using the ClientScriptManager class, along with ResolveClientUrl and RegisterClientScriptInclude, results in a correctly referenced JavaScript file no matter where the user is in the site, but adds the source code just after the opening Form tag within the page. Not what is always needed!!
To get round this and provide a way for the JavaScript to remain referenced correctly from the master page, such as custom controls, but a quick and simple solution is to use a Literal control in the head of the masterpage, and from the code behind add the javascript source links.
Masterpage.master file
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<asp:Literal ID="txtSourceJS" runat="server" />
</div>
</form>
</body>
</html>
MasterPage.master.cs (master page code behind):
public partial class MasterPage : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
this.txtSourceJS.Text = this.txtSourceJS.Text + "<script src=\"" + ResolveClientUrl("~/JavaScriptFile01.js") + "\" type=\"text/javascript\" />";
this.txtSourceJS.Text = this.txtSourceJS.Text + "<script src=\"" + ResolveClientUrl("~/JavaScriptFile02.js") + "\" type=\"text/javascript\" />";
}
}
e.g. linking to a style sheet in the head of a master page
<link href="StyleSheetFile.css" rel="stylesheet" type="text/css" />
would be automatically converted, if you went in to a sub directory, to
<link href="../StyleSheetFile.css" rel="stylesheet" type="text/css" />
However a source used to load a JavaScript file does not behave in the same way and the path remains as defined in the master page.
e.g. linking to a javascript file in the head of a master page, no matter how deep in to the directory structure you go, will stay as
<script src="JavaScriptFile.js" type="text/javascript" />
Using the ClientScriptManager class, along with ResolveClientUrl and RegisterClientScriptInclude, results in a correctly referenced JavaScript file no matter where the user is in the site, but adds the source code just after the opening Form tag within the page. Not what is always needed!!
To get round this and provide a way for the JavaScript to remain referenced correctly from the master page, such as custom controls, but a quick and simple solution is to use a Literal control in the head of the masterpage, and from the code behind add the javascript source links.
Masterpage.master file
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<asp:Literal ID="txtSourceJS" runat="server" />
</div>
</form>
</body>
</html>
MasterPage.master.cs (master page code behind):
public partial class MasterPage : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
this.txtSourceJS.Text = this.txtSourceJS.Text + "<script src=\"" + ResolveClientUrl("~/JavaScriptFile01.js") + "\" type=\"text/javascript\" />";
this.txtSourceJS.Text = this.txtSourceJS.Text + "<script src=\"" + ResolveClientUrl("~/JavaScriptFile02.js") + "\" type=\"text/javascript\" />";
}
}
Comments
Post a Comment