Q:

URL Root character "~" does not behave consistently in ASP.NET MVC

I am using ASP.NET 5.  On my local machine I use http://localhost but on my server I deploy 
to http://server/MyApp
I have the following line in my _Layout.cshtml
<link href="~/lib/jquery-ui/base/core.css" rel="stylesheet" />

which renders without the "~' to 
 <link href="/lib/jquery-ui/base/core.css" rel="stylesheet" />

and then at another place I generate via HTML helper to output 
@Html. MyCustomHtmlButton(model=>model. Id)

string output="<a href=\""+ "~/area1/folder2/index" +"\">";
output += ".." + "</a>";
return new HtmlString(output. ToString());

However this renders to html with the "~"
<a href="~/area1/folder1/index" class="btn btn-sm btn-primary">
    <i class="glyphicon glyphicon-remove-circle"></i>Cancel</a>

and if you click on it you'll get redirected to 

http://localhost:59693/area1/controller11/edit/~/area1/controller1/index

because of the "~" being rendered in the html. 
How do I fix it so that the "~" gets rendered to the correct root so that both http://localhost  and http://server/MyApp works? 

A:

Tildes like that only work when used as plain text in views.  By building an HtmlString yourself, you're bypass Razor for that URI, so the resolving of the tilde won't work. 
Just use @Url. Action() to build the URI.