【问题标题】:AddThis controls in an UpdatePanel - ensuring they are rendered correctly after async postbackUpdatePanel 中的 AddThis 控件 - 确保它们在异步回发后正确呈现
【发布时间】:2013-05-26 00:30:48
【问题描述】:

首先我要为我的帖子的质量提前道歉,因为这是我第一次在这里发帖。过去我在这个网站上找到了一些非常有用的答案,所以发现自己可以回馈社会,我想我会试一试。

在我的头撞墙一段时间后,在网上找到的可靠信息很少,我终于找到了对我有用的这个问题的答案,并回答了几个问题,所以我想我会分享我的发现。

场景

  • .Net 用户控件,它呈现具有唯一性的 addthis 工具箱 指定的 url 和 title 属性。
  • UpdatePanel 包含一个显示多行的重复器,每行都包含工具箱用户控件的一个实例。
  • “显示更多结果”按钮刷新更新面板,每次显示更多结果。

问题

当页面第一次显示时,一切都很好。所有工具箱都正确显示并按预期工作。 但是,当按下按钮并刷新 UpdatePanel 时,工具箱就会消失。

解决方案

首先,我从其他人的问题和答案中快速确定,我需要使用 PageRequestManager 将 EndRequestHandler 添加到我的页面,以处理异步回发请求并触发一些 javascript 来呈现我的工具箱。

接下来我需要弄清楚这个 javascript 应该是什么。

我在网上找到了许多针对此问题的建议解决方案,大多数使用 window.addthis=null 并使用 jquery getScript() 重新运行 addthis javascript,但是这些都没有解决问题。我不断回到 AddThis 网站上的文档,该文档指出您应该只使用 addthis.toolbox() 来使用 javascript 呈现您的工具箱,这似乎对我不起作用。

然后我有一个灯泡时刻。似乎 addthis.toolbox() 函数忽略了我在工具箱 div 中设置的 addthis:url 和 addthis:title 属性,我意识到我需要通过在共享中定义这些属性将它们传递到 addthis.toolbox()配置对象。 从那时起,事情变得容易多了。

最终解决方案分为 3 个部分。

首先是用户控件中定义的tollbox DIV,它有一个唯一的ID,包含addthis:url和addthis:title属性:

<div id="toolBoxWrapper" class="toolBoxWrapper" runat="server">
    <div id='<%="toolBox_" + ControlId%>' class="addthis_toolbox"  addthis:url='<%=AssociatedUrl%>' addthis:title='<%=AssociatedName%>' >
        <a class="addthis_button_email"></a>
        <a class="addthis_button_facebook"></a>
        <a class="addthis_button_twitter"></a>
        <a class="addthis_button_print"></a>
        <a class="addthis_button_compact"></a>
        <a class="addthis_counter addthis_bubble_style"></a>
    </div>
</div>

接下来,我在控件中创建了一个 PreRender 处理程序,以创建包含特定于控件的 addthis 共享配置对象的定义的 javascript。这不能只包含在 ascx 页面中,因为它不起作用。它必须在服务器代码中使用 RegisterStartupScript 创建:

    protected void Page_PreRender(object sender, EventArgs e)
    {
        // This code creates a control specific addthis_share config object so that
        // the toolbox can be re-created after an ajax async postback using addthis.toolbox()
        // which requires the url and title parameters to be included in the share config.
        StringBuilder sb = new StringBuilder();

        sb.AppendLine("var addthis_shareconfig_toolBox_" + ControlId + " = {");
        sb.AppendLine("url:\"" + AssociatedUrl + "\",");
        sb.AppendLine("title:\"" + AssociatedName + "\",");
        sb.AppendLine("passthrough: {");
        sb.AppendLine("   twitter: {");
        sb.AppendLine("       via: 'mydomain'");
        sb.AppendLine("   }");
        sb.AppendLine("}");
        sb.AppendLine("}");
        sb.AppendLine("if (toolBoxShareConfigs == null) var toolBoxShareConfigs = {};");
        sb.AppendLine("toolBoxShareConfigs['toolBox_" + ControlId + "'] = addthis_shareconfig_toolBox_" + ControlId + ";");

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "shareToolBox_" + ControlId, sb.ToString(), true);
    }

最后,我使用 Sys.WebForms.PageRequestManager 在我的页面中创建了一个 EndRequestHandler,以便在 UpdatePanel 刷新后触发。这会遍历所有工具箱 div 并找到相关的共享配置对象(如果未找到则恢复为默认值),然后调用 addthis.toolbox() 传入共享配置对象:

<script type="text/javascript" language="javascript">
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
                function EndRequestHandler(sender, args) {
                    addthis_config.pubid = 'mypubid';
                    $(".addthis_toolbox").each(function () {
                        try
                        {
                            var shareConfig = toolBoxShareConfigs[this.id];
                        }
                        catch(err)
                        {
                            var shareConfig = {
                                passthrough: {
                                    twitter: {
                                        via: "mydomain"
                                    }
                                }
                            };
                        }
                        addthis.toolbox(this, addthis_config, shareConfig);
                    });
                }
            </script>

就是这样。现在我的 UpdatePanel 工作正常,我所有的 addthis 共享工具箱都可以正常工作,并且有正确的 url 和标题。

我正在处理的一个突出问题是在异步回发后计数器似乎无法正确显示,但这对我来说不是问题,因为我只将 UpdatePanel 用于移动设备和我没有显示计数器。但是,如果有人对此问题有任何想法,我很乐意听取您的意见。

【问题讨论】:

    标签: c# .net updatepanel addthis


    【解决方案1】:

    我也一直在努力为 AddThis 工具箱找到最稳定的代码。我发现以下代码是最简单的。它工作完美,所有计数器都正常工作,工具箱在面板刷新时永远不会消失。

    这是屏幕截图:

    JsFiddle:http://jsfiddle.net/hyip/oq3d6cpv/

    这是包含所有可用计数器的 Html 代码:

    <div class="addthis_toolbox addthis_default_style addthis_16x16_style" style="display:table; margin:0 auto;">     
         <a class="addthis_counter_facebook"></a>     
         <a class="addthis_counter_twitter"></a>     
         <a class="addthis_button_google_plusone"></a>     
         <a class="addthis_counter_linkedin"></a>     
         <a class="addthis_counter_pinterest_share"></a>     
         <a class="addthis_button_stumbleupon_badge"></a>     
         <a class="addthis_counter_delicious"></a>     
         <a class="addthis_counter_reddit"></a>     
         <a class="addthis_counter_vk"></a>     
         <a class="addthis_counter_odnoklassniki_ru"></a>     
         <a class="addthis_button_expanded at300m"></a>     
         <a class="addthis_counter addthis_bubble_style"></a>     
    </div>
    

    这里是js文件中的脚本:

    (function(id, as, src) {
        if (document.getElementById(id)) return;
        var hjs = document.getElementsByTagName('head')[0], js = document.createElement('script'); 
        js.id = id; js.type = 'text/javascript'; js.async = as; js.src = src; hjs.appendChild(js);
    }('aaddthis-wjs', 1, 'http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-your-addthis-id'));
    

    为了使 ToolBox 使用正确的 URL、图像、标题和描述,我们需要在 HTML 的 Head 中设置 Open GraphAuthorship

    这是放置在 HTML Head 中的最少代码:

    <!-- Open Graph -->
    <meta property="fb:admins" content="your-facebook-admin-id" />
    <meta property="og:url" content="your-url-to-share" />
    <meta property="og:image" content="path-to-your-default-image-to-share" />
    <meta property="og:title" content="your-title-to-share" />
    <meta property="og:description" content="your-description-to-share" />
    
    <!-- Authorship --> 
    <link rel="canonical" href="your-canonical-url" />
    <link rel="image_src" href="your-default-image-to-share"/>
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="publisher" href="url-to-your-google-plus-with-page-id" />
    <link rel="author" href="url-to-your-google-plus-with-profile-id" />
    

    希望这对您的解决方案有所贡献。

    更新

    如果您只需要显示原始分享按钮(Fb、Tw、Ln、G+、Pin、Su),那么 AddThis 现在已经免费为我们提供了计数器。

    第 1 步:将以下代码添加到您的网站。

    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-55dc7c7d2cb90e21" async="async"></script>
    

    第 2 步:将此代码粘贴到您希望此工具显示的任何页面中。

    <div class="addthis_native_toolbox"></div>
    

    转到http://www.addthis.com/dashboard 自定义您的工具。

    把它放在中心使用style="position: fixed; left: 50%; transform: translate(-50%);"
    您可以查看here 以查看实况代码。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-09-05
      • 2013-10-31
      • 1970-01-01
      • 1970-01-01
      • 2012-11-09
      相关资源
      最近更新 更多