Why does this dropdown list for sorting work in Internet Explorer but not in Chrome?

Question

I have some JavaScript for a dropdownlist to sort results on a product inventory page. In Internet Explorer the sorting works fine and the browser handles this perfect. However in Chrome it fails every time (can you believe it, something works in IE but not Chrome?)

In IE when I use the Sort By option the URL looks like this:

MyExampleSite.com/Supplies/Products/12345/MyProduct/?a=0

However when I do the Sort By option in Chrome here is what the URL looks like:

MyExampleSite.com/Supplies/Products/12345/MyProduct/?&a=0

As you can see it adds the amp in the URL, and if I keep trying to sort it just add's an additional amp everytime.

Here is the JavaScript which caused my issues:

    $("[name=a]").change(function () {    
        window.location = '@(this.Model.SortUri)' + '@(this.Model.SortUri.IndexOf('?') == -1 ? "?" : "&")a=' + this.value;
    });

My Solution was to add Html.Raw like this:

    $("[name=a]").change(function () {
        window.location = '@(this.Model.SortUri)' + '@Html.Raw(this.Model.SortUri.IndexOf('?') == -1 ? "?" : "&")a=' + this.value;
    });

And suddenly it works fine in IE and Chrome.

My question is why did Chrome do this but not IE?

Answer 1

Well, you need to make sure all your stuff is encoded correctly, and I'm guessing you aren't. We would need to see much more of your page to determine that. IE is probably detecting that you've done it incorrectly and attempting to fix it for you, while Chrome isn't auto-fixing your mistake.

It gets pretty complicated as to the rules of when you do and don't need to escape stuff. It's in a HTML page, and everyone knows you need to escape & in HTML pages, but it's in a script tag, so do you or don't you need to escape it? Well that depends if you also have the script tag in a CDATA element or not.

The simple solution is to avoid doing that. Put the URL you want to switch to on the [name=a] element as a data tag like so:

<sometag name='a' data-urlprefix='@(this.Model.SortUri)@(this.Model.SortUri.IndexOf('?') == -1 ? "?" : "&")a='>stuff</sometag>

Then in your javascript:

$("[name=a]").change(function () {
    window.location.href = $(this).data('urlprefix')+encodeURIComponent(this.value);
});

This also has the benefit of moving the server processing stuff to just the HTML parts, so that you can put the javascript in it's own file, which you should be doing anyhow.

• Note that you should be urlencoding this.value if it isn't already as well, so I've done that. If it is already encoded, you can safely remove it. I've also changed window.location to window.location.href because window.location can do strange things sometimes as well -- encoding on some browsers, but not on others, etc.

Answer 2

You just need to make the entire string as part of your Html.Raw(build ou the logic outside and directly insert that variable here)

Please check this post

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