ASP.NET: urls in plain html files can't find app root - asp.net

A client I'm working with insists on including a plain-jane html file in the ASP.NET app and I can't get the link urls to work properly. Here's an example:
<li><a class="nav_history2" href="/history.html">History</a></li>
It finds the server root (as I expect) but how to modify it to respect the app root? I'm looking for an equivalent to the ~. The client has tried ../ but claims it still finds the root. How is that possible? What SHOULD it look like please?
I don't have the ability to run it on his prod server, so I can't see the problem directly.
----- Edit -----
If I follow the suggestions given in the first two answers it will work if I turn the html page into an aspx, but so far not in the raw html file.

If I remember correctly, you just need to make ASP.NET actively aware of the tag, and the ~ symbol will work. Try:
<a class="nav_history2" runat="server" href="~/history.html">

Related

CSS and image paths not working

Paths defined within master files are not working on a new server. They worked fine on production server and development machine. Here is an example of the file:
/HeadOffice/Styles/HeadOfficeCalendar.css
Unless I put full URL with the virtual name, the paths don't work.
working:
https://connect.server.co.uk/FesQA/HeadOffice/Styles/HeadOfficeCalendar.css
I can also include resolved URL within ASP>NET code tags but I don't want to change all those paths they are probably hundreds of them. so if the head office folder is in the same folder as master file it should just be able to reference like:
/HeadOffice/Styles/HeadOfficeCalendar.css
It seems the references within the master files and aspx files seems to work fine by adding ~ and runat = server. but images references within the CSS files are not working unless I include the full path.
DOESN'T WORK
url(/HeadOffice/Images/tlcorner.png)
DOES WORK
url(connect.server.co.uk/FesQA/HeadOffice/Images/tlcorner.png)
I know I've answered this before, but this has been known issue forever in VS.
Simple way to do this correctly is to drag the CSS file from Solution Explorer window to head section of master page in code view.
For other links on your site, make sure to include the runat="server" attribute and resolve your links like this (with "~" operator):
<img src="~/images/sample.jpg" runat="server" />

Understanding a url that references a CSS file in a SharePoint master page

For SharePoint, this is the entry you could put into your master page to link to a CSS file.
<SharePoint:CssRegistration
name="<% $SPUrl:~sitecollection/_catalogs/masterpage/dir/file.css %>"
runat="server"
after="SharepointCssFile"/>
Could someone please break down the pieces of this url? I don't understand the following parts of it and how they work together:
<% - I do know this means less than
$SPUrl:~sitecollection/ - Is this some kind of variable? What's ~ for?
%> - I do know this means greater than
CssRegistration is just one of the many ways of referencing CSS files in
SharePoint.
lower than (<) and greater than (>) obvious, and ~ refers to the root of the current web application.
CssRegistration is particularly interesting because you can use After to make sure your CSS is loaded after another CSS such as core.css
The real relevant parameter is name, which in this tag can be used with SPURL, which in turn can be used with sitecollection or site, to refer to the current sitecollection root, or just the current site/web.
Note that SPURL is only available on SharePoint Server, not Foundation.
To support Foundation you can use ProjectProperty, which takes Url or SiteUrl.
So to wrap up, SPUrl is a token available in SharePoint that we can use to specify a resource from a specific location, relative to the current page, web, site and others.

Where do I put my CSS, how do I link to it from the master page?

I have installed SharePoint 2010 on a single machine in farm mode pointing to a db on another server. I would like to start dabbling into branding the site by doing something that I initially thought to be trivially straightforward, link to a custom CSS from a SharePoint 2010 master page.
I have uploaded a custom css (Let's call it custom.css) using SharePoint designer in the Site Assets. What syntax do I need to put to link to it? I have tried the following:
<SharePoint:CssRegistration name="custom.css" After="corev4.css" runat="server"/>
But the server cannot find the CSS file. I receive the following error:
Cannot make a cache safe URL for "1033/styles/custom.css", file not found. Please verify that the file exists under the layouts directory.
I've assumed I need to use SharePoint:CssRegistration - Is my assumption correct?
So what is it exactly that I need to put in the name tag to link to a css uploaded via SharePoint designer?
Am I even on the right track or would you suggest an alternative way of putting this together?
I would use Alternate CSS first. But other options are:
If you put the CSS file in Style Library, you can do this:
<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/custom.css%>" runat="server"/>
Put the CSS on the server as 14\TEMPLATE\LAYOUTS\1033\STYLES\custom\custom.css and then you can do this:
<SharePoint:CssRegistration name="custom/custom.css" runat="server"/>
Putting the file into its own directory is considered best practice so that it does not interfere with updates to out of the box files.

Seeking global variable to define root url

I have a habit of hardcoding URLs into my HTML:
...logon to your account.
During development when I want to target a specific web-app version I will global search/replace the 'www.mySite' with something like 'myDev.mySite'.
Since this practice has become habitual I can't clearly remember if there's a drop-dead good reason I don't use relative address or if i'm just that persistently dumb.
I would like to think that .net has something similar to the way we define connectionstrings that I could define a root URL as a global variable but so far haven't found the feature.
In ASP.NET MVC, use
<a href='<%=Url.Action("Login")%>'>login</a>
it will automatically generate the URL that works.
<base href> pretty much does exactly what you want.
http://www.w3schools.com/TAGS/tag_base.asp
Jan's answer is the best for ASP.NET MVC, since you can independently change how URLs map to views. A more general solution for any ASP.NET site is by using the tilde. For example,
Page.ResolveClientUrl("~/My/Path.aspx")
Will automatically resolve the ~ to the web application root. Or if you use ASP.NET controls,
<asp:HyperLink runat="server" NavigateUrl="~/My/Path.aspx" Text="Link Text"/>
This will create a hyperlink with the path automatically resolved to the site root.

How do I handle file paths in my code before moving to server host?

In my webpages I have references to js and images as such:
"../../Content/Images/"Filename"
In my code if I reference a file as above, it doesnt work so i have to write:
"c:/miscfiles/"filename"
1-Why does the first reference work on webpages and not within the code?
2-How should i reference file paths in code so that I will not have to recode when moving to server?
See following for more details:
http://msdn.microsoft.com/en-us/library/ms178116.aspx
Don't use absolute paths in development - always use relative paths that are preceded with the application root token (the tilde or ~) like this:
"~/Content/Images/Filename"
ASP.NET will convert the ~ to the proper value based on the virtual directory or website the code is hosted in.
For ASP.NET 2.0 onwards, in order to get the tilda (~) syntax to resolve correctly on the server, you have to include a title and a runat attribute as follows:
<img src="~/images/image.jpg" title="Image" runat="server" />
The presence of the runat attribute ensures that the path is resolved on the server.

Resources