Basic Tutorials

Tutorial Home › Basics

View Switch

#5 Working with difficult URLs

Page Title, Keyword, Description

Requirements

Resources

Tags.SafeUrl()

Safely Linking URLs with Umlauts and similar

Output

👈 this image is called göögle plus.png - which must be encoded to g%C3%B6%C3%B6gle%20plus.png

@{
  var path = App.Path + "/basics/assets/urls/";
  var exampleImgName = "göögle plus.png";
  var resizeParameters = "?w=100";
  var safeUrl = Tags.SafeUrl(path + exampleImgName + resizeParameters);
}
<p>
  👈 this image is called <code>@exampleImgName</code> - which must be encoded to <code>@Tags.SafeUrl(exampleImgName)</code>
</p>
<img loading="lazy" src='@safeUrl' id="demo-logo">

Sometimes you have files with unexpected characters - like umlauts or spaces. The best way to encode this is using Tags.SafeUrl(...) from RazorBlade, or Uri.EscapeUriString(...) from .net.

Important notes

Two characters won't resolve properly on a standard web server: + and %. There are ways to work around this, but we would avoid them at all cost.
Other characters like spaces, umlauts (öäè) etc. are no problem.
You may also find suggestions to use Server.UrlEcode(...). This often doesn't work!
Remember to add @using System to make this fly

View Switch

#5 Working with difficult URLs

Page Title, Keyword, Description

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
<!-- unimportant stuff, hidden -->


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
    <h2>Safely Linking URLs with Umlauts and similar</h2>
  </div>
</div>

  @{
    var path = App.Path + "/basics/assets/urls/";
    var exampleImgName = "göögle plus.png";
    var resizeParameters = "?w=100";
    var safeUrl = Tags.SafeUrl(path + exampleImgName + resizeParameters);
  }
  <p>
    👈 this image is called <code>@exampleImgName</code> - which must be encoded to <code>@Tags.SafeUrl(exampleImgName)</code>
  </p>
  <img loading="lazy" src='@safeUrl' id="demo-logo">


<hide>
<p>
  Sometimes you have files with unexpected characters - like umlauts or spaces. The best way to encode this is using <code>Tags.SafeUrl(...)</code> from RazorBlade, or <code>Uri.EscapeUriString(...)</code> from .net. 
</p>
<h3>Important notes</h3>
<ul>
  <li>
    Two characters won't resolve properly on a standard web server: <code>+</code> and <code>%</code>. There are ways to work around this, but we would avoid them at all cost. 
  </li>
  <li>
    Other characters like <code>spaces</code>, umlauts (<code>öäè</code>) etc. are no problem. 
  </li>
  <li>
    You may also find suggestions to use <code>Server.UrlEcode(...)</code>. This often doesn't work! 
  </li>
  <li>
    Remember to add <code>@@using System</code> to make this fly
  </li>
</ul>

<style>
  #demo-logo {
    width: 50px;
    padding-right: 20px;
  }
</style>

@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })