javascript - Why does this dropdown list for sorting work in Internet Explorer but not in Chrome? - Stack Overflow

admin管理员组

文章数量:1313071

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/Supplies/Products/12345/MyProduct/?a=0

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

MyExampleSite/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?

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./Supplies/Products/12345/MyProduct/?a=0

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

MyExampleSite./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?

• javascript
• google-chrome
• internet-explorer
• razor

Share Improve this question Follow edited Dec 4, 2015 at 17:29 maxshuty asked Sep 17, 2015 at 18:02 maxshutymaxshuty 10.7k1313 gold badges6969 silver badges8686 bronze badges 2

• 2 & doesn't belong in url encoding, it's an html entity ... the fact IE accepts it isn't relevant as it shouldn't be there in the first place – charlietfl Commented Sep 18, 2015 at 9:41
• Try to put console.log on this.Model.SortUri and make sure it does not contain ? by default from wherever it is created. – Akash Kava Commented Dec 11, 2015 at 5:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5 +25

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

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?

本文标签：