How do you escape a '@' symbol within in a url with razor

Question

I know this is probably going to be something very simple and it is like just a 'gotcha' that I have yet to get; however, I have been struggling with escaping the @ symbol in the following URL.

<a href="https://www.google.co.uk/maps/place/XXXXXXXXXXXXXXXX/@55.000000,-1.000000,17z/data=!3m1!4b1!4m2!3m1!1s0x487e736c74d13649:0xe560f3b38693aec3">View on Google Maps</a>

I have already tried escaping it with a second @ i.e.

<a href="https://www.google.co.uk/maps/place/XXXXXXXXXXXXXXXX/@@55.000000,-1.000000,17z/data=!3m1!4b1!4m2!3m1!1s0x487e736c74d13649:0xe560f3b38693aec3">View on Google Maps</a>

Yet that produces the following YSOD

What am I missing?

Troxell

possible duplicate of Escape @ character in razor view engine – Transduction

Answer 1

Try use @ instead of an actual @

<a href="https://www.google.co.uk/maps/place/XXXXXXXXXXXXXXXX/&#64;55.000000,-1.000000,17z/data=!3m1!4b1!4m2!3m1!1s0x487e736c74d13649:0xe560f3b38693aec3">View on Google Maps</a>

Bags

Why encode it when C# has an escaping method for the symbol already? just double the symbol to @@. Which is (in my opinion) more readable. – Optics

If you read the question once more, you'll see that using @@ gives YSOD.. So this was the workaround. – Bags

Answer 2

I wonder why nobody suggest using url encoded character %40 for @?

<a href="https://www.google.co.uk/maps/place/XXXXXXXXXXXXXXXX/%4055.000000,-1.000000,17z/data=!3m1!4b1!4m2!3m1!1s0x487e736c74d13649:0xe560f3b38693aec3">View on Google Maps</a>

For me this works.

http://meyerweb.com/eric/tools/dencoder/

Fled

@Bags answer &#64; worked; %40 didn't, for this URL in a <link> tag in a .cshtml page: cdn.jsdelivr.net/npm/@mdi/[email protected]/css/… – Tempe

Answer 3

Just another way:

<a href="https://www.google.co.uk/maps/place/XXXXXXXXXXXXXXXX/@("@55.000000,-1.000000"),17z/data=!3m1!4b1!4m2!3m1!1s0x487e736c74d13649:0xe560f3b38693aec3">View on Google Maps</a>

or

<a href="https://www.google.co.uk/maps/place/XXXXXXXXXXXXXXXX/@("@")55.000000,-1.000000,17z/data=!3m1!4b1!4m2!3m1!1s0x487e736c74d13649:0xe560f3b38693aec3">View on Google Maps</a>

Fled

Answer 4

I found another (may in some case better) way to escape @-symbols in razor templates.

In my usecase, I have a partial with assets wich should be replaced by a usemin grunt-task. When reference a scoped npm package, there is a @ inside the path string.

@using Foo.Bar.Helpers

@{ 
    var somescope = "@somescope";
}

@Html.RegisterAssetBlock(
    content: @<text>
        <!-- build:js /assets/js/bundle.js -->
        <script src="/node_modules/@somescope/somepackage/dist/main.js" type="text/javascript"></script>
        <!--endbuild-->
    </text>
)

So in every case, there is the correct string (client compile-time and server compile-time).

For your case this would mean following:

@using Foo.Bar.Helpers

@{
    var location = "@55.000000,-1.000000";
}

<a href="https://www.google.co.uk/maps/place/XXXXXXXXXXXXXXXX/@(location),17z/data=!3m1!4b1!4m2!3m1!1s0x487e736c74d13649:0xe560f3b38693aec3">View on Google Maps</a>

Fled

Answer 5

The simplest fix for this is to use @@ instead of @.

This is the way MS recommends to escape a single @.

Optics