c# - UpdatePanel 中的 AddThis 控件 - 确保它们在异步回发后正确呈现

Question

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

在摸索了一段时间，并在网上找到了非常少的可靠信息之后，我终于找到了对这个问题有用的答案并回答了几个问题，所以我想我应该分享我的发现。

场景:

• .Net 用户控件呈现一个具有唯一性的 addthis 工具箱指定的 url 和 title 属性。
• 一个 UpdatePanel，它包含一个显示多行的转发器，每行包含一个工具箱用户控件的实例。
• 刷新 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 个部分。

首先是在用户控件中定义的收费箱 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 和我没有显示计数器。但是，如果有人对这个问题有任何想法，我很乐意听取您的意见。

Answer 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'));

为了让工具箱使用正确的 URL、图像、标题和描述，我们需要在 HTML 的头部设置一个Open Graph 和Authorship。

这是放置在 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查看实时 Action 代码。