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

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

Parser Error Message: "55.00000" is not valid at the start of a code block. Only identifiers, keywords, comments, "(" and "{" are valid. What am I missing?

Solution 1:^[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>

Solution 2:^[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/

Solution 3:^[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>

<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>

Solution 4:^[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>

Solution 5:^[5]

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	pbjork
Solution 2
Solution 3	Sebastian
Solution 4
Solution 5	Kieran Foot

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]