Use Site Url in SharePoint MasterPage

Use Site Url in SharePoint

 
 
There are several ways to reference site collection or site url in masterpage, layout page, application page and web parts.


1. Token: ~sitecollection ~site

These tokens only works with SharePoint server side controls. They do not work with ASP.NET control or HTML control.

2. SharePoint Server Token <% $SPUrl:~sitecollection/...%>

This token is only available for SharePoint Office Server not the SharePoint Foundation Server and it only works with a few SharePoint server controls.

If it doesn't work, you can use asp.net letral control to work around as

<script type="text/javascript" src='<asp:Literal runat="server" Text="<% $SPUrl:~Site/appBin/js/jquery.min.js %>" />'></script>

3. Emedded Code: <%=SPContext.Current.Site.ServerRelativeUrl %>

You can use the embedded code any where in application page and web parts but don't use it in master page and page layout even though they seem work, because master page and page layout can be customized. The embedded code is only allowed in the uncustomized pages.

4. SharePoint Control: <SharePoint:ProjectProperty Property="Url" runat="server"/>

You can use the value returned by this control as control attribute but this is more like an hack, but it works.

If you don't want to use it directly in attribute, you can use asp.net leteral control like this

<asp:literal runat=”server” Text=”&lt;link href=’”/>
 <SharePoint:ProjectProperty Property=”SiteUrl” runat=”server” />
 <asp:literal runat=”server” Text=”/Style Library/My Branding/MyStyles.css’ rel=’stylesheet’ type=’text/css’/&gt;”/>
 

Here is when to use which option with different controls

1. <SharePoint:ScriptLink>
The only way works for ScripLink is the token ~sitecollection

<SharePoint:ScriptLink ID="ScriptLink2" language="javascript" name="~sitecollection/_layouts/TestScript1.js" OnDemand="true" runat="server"/>

2. <Script>

Use ScriptLink to include JavaScript in SharePoint. If you have to use <Script>, then this usage will work

<script src='<SharePoint:ProjectProperty ID="ProjectProperty2" Property="Url" runat="server"/>/_layouts/TestScript4.js'></script>

3. <SharePoint:CssRegistration>

The only way works for ScripLink is the SharePoint Office Server token <% $SPUrl:~sitecollection %>

<SharePoint:CssRegistration ID="CssRegistration3" Name="<% $SPUrl:~sitecollection/_layouts/TestStyle2.css %>" After="corev4.css" runat="server"/>

 
4. <Link>

For link, try this first
 

<link rel="stylesheet" type="text/css" href="<% $SPUrl:~sitecollection/_layouts/TestStyle3.css %>">

If it doesn't work, try

<link rel="stylesheet" type="text/css" href="<SharePoint:ProjectProperty ID="ProjectProperty22" Property="SiteUrl" runat="server"/>Style%20Library/test.css"/>

5. <img>

<img src='<SharePoint:ProjectProperty ID="ProjectProperty22" Property="SiteUrl" runat="server"/>/_layouts/SiteUrlTest/blog3.png' />

Conclusion:

When you need to reference site collection url such as /sites/hr/..., try the token "~sitecollection" first. If it doesn't work, try the SharePoint Office Server token "<% $SPUrl:~sitecollection/...%>".

As last resort, try the control <SharePoint:ProjectProperty Property="Url" runat="server"/> as control attribute value or combine it usage with literal control.