Facebook赞&部分回发时,Google +1按钮消失

时间:2011-07-20 14:50:40

标签: javascript asp.net facebook facebook-like google-plus-one

我在Facebook部分中放置了facebook和google +按钮,而这部分又位于更新面板中。问题是,一旦通过更新面板进行异步回发,fb和g +按钮就会消失。

我也有一个推特按钮,我之前遇到过类似的问题。现在,在我将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,它运行正常。但是,当我更换javascripts时,facebook和google plus按钮也不会发生同样的情况。我正在使用ASP.NET 4和c#。我该如何解决这个问题?

3 个答案:

答案 0 :(得分:3)

UpdatePanel通过设置innerHTML属性来更新其内容。这意味着在UpdatePanel异步回发后,UpdatePanel元素中的任何DOM状态都将丢失。 fb,g +和twitter按钮都使用UpdatePanel div的DOM状态,服务器在向客户端发送innerHTML增量时将其删除。

请在此处查看我的回答:RegisterClientScriptCode not working after a partial post back

您需要为webpart禁用异步回发,或将脚本放在其他位置。

更新问题

你尝试过这个吗?删除<script>元素并使用jquery调用它们:

<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&amp;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&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>

答案 1 :(得分:0)

这似乎是非常不寻常的解决方案,但这适用于chrome和firefox。

当我在更新面板内保留了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&amp;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&amp;xfbml=1");
    $.getScript("https://apis.google.com/js/plusone.js");
            }
</script>

注意: Google +1按钮仍无法在Internet Explorer中运行,但所有3个按钮在Chrome和Firefox上都能正常运行。

答案 2 :(得分:0)

我总是将它们从部分回发中排除。更新面板中不包括所有广告,+1和类似按钮。