UpdatePanel postback changes anchor HREF to fully-qualified
I have some links in an UpdatePanel. For example:
<a href="Products.aspx">Products</a>
I also have a CSS rule that puts an icon next to off-site links (those that have an HREF that starts with "http"):
a[href^="http"]
{
pa开发者_运维问答dding-right: 18px;
background: transparent url("Icons/offsiteLink.png") no-repeat right bottom;
}
When the page loads initailly, the links correctly do not have the off-site icon. The problem is that after an Ajax postback using the UpdatePanel, the icon appears next to the links! I added a hover event to display the href attribute, and it has indeed been changed to have the full path to the page after the Ajax postback. It doesn't matter if the links are plain HTML tags or a TreeView node.
Is this an issue with ASP.NET, or Ajax in general? Can I stop it?
Thanks.
Update:
I have created a brand new Web Site project. This is in Visual Studio 2008/.NET 3.5. Here is the entirety of the code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="mainScriptManager" runat="server" />
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<p><a id="internalLink" href="About.aspx"
onmouseover="$('#hrefValue').text($(this).attr('href'));">About</a></p>
<p><a id="offsiteLink" href="http://example.com/"
onmouseover="$('#hrefValue').text($(this).attr('href'));">Offsite</a></p>
<p>HREF: <span id="hrefValue"></span></p>
<asp:Button ID="submitButton" Text="Post Back" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
(The code behind is empty.)
When I load the page in IE 7 and hover the links, I get:
- About.aspx
- http://example.com/
Then, I click the button, and hover the links again. This time they are:
- http://localhost:4069/TestSite/About.aspx
- http://example.com/
Notice that the first one changed to the full path.
Instead of looking for "http", you could add a rel="external" attribute to external site links, then style them using:
a[rel=external] {
}
See CSS - style a link based on its "rel" attribute?
It turns out that this was caused by an issue with IE7. IE8 no longer has the issue.
Due to several factors, I decided to use JavaScript to fix it. Here is that code. I also included a snarky comment about my company still targeting IE7 ;)
company.offsiteIconFix = (function() {
function init() {
var i, allAnchors = document.getElementsByTagName("a");
for (i = 0; i < allAnchors.length; i++) {
if (allAnchors[i].hostname && allAnchors[i].hostname ===
location.hostname) {
var trimIndex = allAnchors[i].href.indexOf(allAnchors[i].host) +
allAnchors[i].host.length;
var trimmedUrl = allAnchors[i].href.substring(trimIndex);
allAnchors[i].setAttribute("href", trimmedUrl);
}
}
}
return {
init: init
};
})();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(company.offsiteIconFix.init);
I could change it to insert "rel=external" as suggested by mgnoonan.
加载中,请稍侯......
精彩评论