Facebook 点赞和Google +1 按钮在部分回发时消失

Question

我已将 facebook like 和 google + 按钮放置在 web 部件内，而 web 部件又位于更新面板内。问题是，一旦通过更新面板进行异步回发，fb 和 g+ 按钮就会消失。

我里面还有一个 Twitter 按钮，我之前也遇到过类似的问题。现在，在我将 twitter javascript 放在更新面板之外之后，它就可以工作了：

<asp:updatepanel ID="UpdatePanel1" runat="server">
     <asp:WebPartManager ID="WebPartManager1" runat="server">
     </asp:WebPartManager>
     <script type="text/javascript">              
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);                
     </script>
     <asp:webpartzone ID="WebPartZone1" runat="server" PartChromeType="None" >
       <ZoneTemplate>
       .
       .
       .
        <a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet Profile</a><br />
        <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=181772605219534&amp;xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="50" show_faces="false" font="trebuchet ms"></fb:like>
        <br/>
        <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="medium" count="true"></g:plusone>
         .
         .
         </ZoneTemplate>
     </asp:webpartzone>
     <asp:webpartzone ID="WebPartZone2" runat="server" Width="100%" 
                            PartChromeType="None">
         .
         .
         .
     </asp:webpartzone>
</asp:updatepanel>

<script type="text/javascript">
    function pageLoad() {
        $.getScript("http://platform.twitter.com/widgets.js");
    }
</script>

这在 twitter 推文按钮部分回发后重新加载了损坏的 javascript，并且工作正常。但当我替换 javascript 时，facebook 和 google plus 按钮不会发生同样的情况。我正在使用 ASP.NET 4 和 c#。我该如何解决这个问题？

Answer 1

UpdatePanel 通过设置 innerHTML 属性来更新其内容。这意味着 UpdatePanel 元素内的任何 DOM 状态在 UpdatePanel 异步回发后都会丢失。 fb、g+ 和 twitter 按钮都与 UpdatePanel div 的 DOM 状态一起工作，当服务器将 innerHTML 增量发送到客户端时，服务器会删除该状态。

请在此处查看我的答案：RegisterClientScriptCode 在部分发布后不起作用back

您需要禁用 Web 部件的异步回发，或者将脚本放在其他位置。

更新的问题

您尝试过吗？删除

<asp:updatepanel............>
     <asp:WebPartManager ID="WebPartManager1" runat="server" />
     <asp:webpartzone...........>
       .
       .
       .
        <a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet Profile</a><br />
        <div id="fb-root"></div><fb:like href="" send="false" layout="button_count" width="50" show_faces="false" font="trebuchet ms"></fb:like><br/>
        <g:plusone size="medium" count="true"></g:plusone>
     </asp:webpartzone>
</asp:updatepanel>

<script type="text/javascript">
    function pageLoad() {
        $.getScript("http://platform.twitter.com/widgets.js");
        $.getScript("http://connect.facebook.net/en_US/all.js#appId=181772605219534&xfbml=1");
        $.getScript("https://apis.google.com/js/plusone.js");
    }
</script>

如果这不起作用，为什么不将按钮分离到静态面板中呢？这些按钮对于 UpdatePanel 没有用处。像这样的东西：

<!-- webpartmanager does NOT need to enclose your webparts. 
     Just declare it. -->
<asp:webpartmanager ... /> 

<!-- asp:updatepanel contains the async webpart. -->
<asp:updatepanel ...> 
    <asp:WebPartZone id="WebPartZone1" runat="server">
      <ZoneTemplate>
        ...
      </ZoneTemplate>
    </asp:WebPartZone>
</asp:updatepanel>

<!-- another webpart holds the buttons, NOT contained by updatepanel. -->
<asp:WebPartZone id="WebPartZone2" runat="server">
  <ZoneTemplate>
    <a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet Profile</a><br />
    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=181772605219534&xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="50" show_faces="false" font="trebuchet ms"></fb:like><br/>
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
    <g:plusone size="medium" count="true"></g:plusone>
  </ZoneTemplate>
</asp:WebPartZone>

Answer 2

这可能看起来是非常不寻常的解决方案，但这适用于 Chrome 和 Firefox。

当我将 facebook 的 javascript src 链接保留在更新面板内并驱逐更新面板（jquery 调用）时，它就起作用了。对于 Twitter 和 Google + 按钮，它只需要由更新面板之外的 jquery 调用。当我使用以下组合时，它起作用了：

<asp:updatepanel............>
 <asp:WebPartManager ID="WebPartManager1" runat="server">
 </asp:WebPartManager>
 <asp:webpartzone...........>
   .
   .
   .
    <a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet Profile</a><br />
    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=181772605219534&xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="50" show_faces="false" font="trebuchet ms"></fb:like>
    <br/>
    <g:plusone size="medium" count="true"></g:plusone>
     .
     .
 </asp:webpartzone>
 <asp:webpartzone ..........>
     .
     .
     .
 </asp:webpartzone>
</asp:updatepanel>
<script type="text/javascript">
  function pageLoad() {
    $.getScript("http://platform.twitter.com/widgets.js");          
    $.getScript("http://connect.facebook.net/en_US/all.js#appId=181772605219534&xfbml=1");
    $.getScript("https://apis.google.com/js/plusone.js");
            }
</script>

注意： google +1 按钮在 Internet Explorer 中仍然不起作用，但所有 3 个按钮在 Chrome 和 Firefox 上都可以正常工作。

Answer 3

我总是将它们排除在部分回发之外。所有广告、+1 和点赞按钮均从更新面板中排除。