UpdateTnel中的AddThis控件 - 确保在异步回发后正确呈现它们
And*_*206 5 .net c# updatepanel addthis
首先,我可以提前为我的帖子质量道歉,因为这是我第一次在这里发布.我过去在这个网站上找到了一些非常有用的答案,因此我发现自己有能力回馈我以为我会试一试.
在我的头撞墙一段时间,并在网上找到很少的可靠信息后,我终于找到了一个对我有用的问题的答案并回答了几个问题,所以我想我会分享我的发现.
场景:
- .Net用户控件,使用唯一指定的url和title属性呈现addthis工具箱.
- 一个UpdatePanel,包含一个显示多行的转发器,每行包含一个工具箱用户控件的实例.
- 每次显示更多结果时,刷新UpdatePanel的"显示更多结果"按钮.
问题:
首次显示页面时,一切都很好.所有工具箱都能正确显示并按预期工作.但是,按下按钮并刷新UpdatePanel时,工具箱会消失.
方案:
首先,我很快从其他人的问题和答案中确定我需要使用PageRequestManager将EndRequestHandler添加到我的页面,该PageRequestManager将处理异步回发请求并触发一些javascript来呈现我的工具箱.
接下来我需要弄清楚这个javascript应该是什么.
我在网上找到了许多针对这个问题的解决方案,大多数使用window.addthis = null并使用jquery getScript()来重新运行addthis javascript,但这些都没有解决问题.我一直回到AddThis网站上的文档,该网站声明你应该使用addthis.toolbox()来使用javascript渲染你的工具箱,这似乎对我不起作用.
然后我有一个灯泡时刻.似乎addthis.toolbox()函数忽略了addthis:url和addthis:我在工具箱div中设置的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);
}
最后,我在我的页面中创建了一个EndRequestHandler,使用Sys.WebForms.PageRequestManager在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共享工具箱都能正常工作并拥有正确的网址和标题.
我正在研究的一个突出问题是,在异步回发之后计数器似乎没有正确显示,但是这对我来说不是问题因为我只使用UpdatePanel用于移动设备并且没有显示柜台.但如果有人对此问题有任何想法,我很乐意听取您的意见.
我也一直在努力寻找 AddThis Tool 框最稳定的代码。我发现以下代码是最简单的代码。它工作完美，所有计数器都正常工作，并且工具箱在面板刷新时永远不会消失。
这是屏幕截图：
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 的 Head 中设置开放图谱和作者身份。
以下是放置在 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%);"
您可以在此处查看实时操作的代码。