Why is Html.Raw escaping ampersand in anchor tag in ASP.NET MVC 4?

Question

I have a URL I would like to render in an anchor tag as-is in a Razor view. I would have thought Html.Raw would be the way to go:

@{
    string test = "http://someurl.com/someimage.png?a=1234&b=5678";
}

<div>
    <a href="@Html.Raw(test)">Test</a>
</div>

But this doesn't work. The ampersand gets encoded and the HTML is rendered as:

<div>
    <a href="http://someurl.com/someimage.png?a=1234&amp;b=5678">Test</a>
</div>

The strange thing is that if I do the Html.Raw call outside of the anchor tag, the HTML output is as expected:

<div>
    @Html.Raw(test)
<div>

is rendered as:

<div>
    http://someurl.com/someimage.png?a=1234&b=5678
</div>

Can anyone explain why this is?

Edit:

Tried a few other things out, and found that the following works as expected:

<div data-url="@Html.Raw(test)"></div>

outputs:

<div data-url="http://someurl.com/someimage.png?a=1234&b=5678"></div>

To add a little more context, my goal is not actually to use the URL in an anchor tag, since hrefs can be HTML encoded and still work (I just used the anchor tag case as an example). Rather I wish to use the URL in an <object> <param> value tag for a Flash object. The Flash object doesn't properly recognize the HTML encoded URL, but I can't get the raw URL to output correctly.

I am at a loss. Time to break out the MVC source code I guess...

Answer 1

This is happening because something in the pipeline (I'd guess razor but I'd need to look it up) attribute encodes all attribute values. This should not affect the browser from reaching your desired location however.

You can test this with the @Html.ActionLink(text, action, routeAttributes) overload.

@Html.ActionLink("Test", "Index", new { tony = "1", raul = 2 })

outputs

<a href="/?tony=1&amp;raul=2">Test</a>

---

In regards to your edit, you just need to make the entire <param> part of your raw value.

@{
    var test = "<param src=\"http://someurl.com/someimage.png?a=1234&b=5678\">";
}

<div>
    <object>
    @Html.Raw(test)
    </object>
</div>

Answer 2

Like this:

@{
    string test = "http://someurl.com/someimage.png?a=1234&b=5678";
}

<div>
    <a href="@Html.Raw(Html.AttributeEncode(test))">Test</a>
</div>

produces valid markup:

<div>
    <a href="http://someurl.com/someimage.png?a=1234&amp;b=5678">Test</a>
</div>

But this doesn't work. The ampersand gets encoded and the HTML is rendered as:

But that's exactly how a valid markup should look like. The ampersand must be encoded when used as an attribute. Don't worry, the browser will perfectly fine understand this url.

Notice that the following is invalid markup, so you don't want this:

<div>
    <a href="http://someurl.com/someimage.png?a=1234&b=5678">Test</a>
</div>

Answer 3

Try

<div>
    <a href="@MvcHtmlString.Create(test)">Test</a>
</div>

Answer 4

just try below... It works perfect.

@{
    string test = "https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token="+@ViewBag.Token;
}
<div>
    <a href="@Html.Raw(System.Web.HttpUtility.HtmlDecode(test))">@Html.Raw(System.Web.HttpUtility.HtmlDecode(test))</a>
</div>

Answer 5

why don't you use jquery to post the url:

    $(function () {
    $('form').submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: { a:'firstvalue', b: 'secondvalue'},
            success: function (result) {
//code for successful result
            }
        });
        return false;
    });
});

in controller

public ActionResult Fetch(string a, string b)
    {
        //write required codes here
            return View();

    }