처음 게시 한 내용은 처음으로 게시 된 게시물의 품질에 대해 미리 사과드립니다. 과거에이 사이트에 대한 유용한 답변을 몇 개 발견 했으므로 다시 돌려 줄 수있는 위치에 있다는 사실을 깨달았습니다.UpdatePanel에서 AddThis 컨트롤 - 비동기 포스트 백 이후에 제대로 렌더링되는지 확인
잠시 벽에 머리를 대고 온라인에서 매우 단단한 정보를 찾은 후 드디어 나에게 도움이되는 몇 가지 질문에 대한 답변을 찾았습니다. 고유 지정된 URL 및 제목 속성을 가진 addthis 도구 상자를 렌더링
- 닷넷 사용자 컨트롤 :
시나리오.
- 각 도구 상자 사용자 정의 컨트롤의 인스턴스를 포함하는 여러 행을 표시하는 리피터가 포함 된 UpdatePanel입니다.
- 결과가 더 많이 나타날 때마다 UpdatePanel을 새로 고치는 "결과 더보기"버튼.
문제은 다음 페이지는 모든 것이 괜찮 표시됩니다
합니다. 모든 도구 상자가 올바르게 표시되고 예상대로 작동합니다. 그러나 버튼을 누르고 UpdatePanel을 새로 고치면 도구 상자가 사라집니다.
솔루션 : 첫째로 나는 빨리 다른 사람의 질문에 내가 비동기 포스트 백 요청을 처리하고 내 도구 상자를 렌더링하기 위해 몇 가지 자바 스크립트를 실행할 것 PageRequestManager를 사용하여 내 페이지에 EndRequestHandler를 추가 할 필요가 답변에서 확인
.
다음으로 나는이 자바 스크립트가 무엇이되어야 하는지를 알아야했습니다.
대부분 온라인으로이 문제에 대한 해결책을 많이 찾았습니다. 대부분 window.addthis = null을 사용하고 jquery getScript()를 사용하여 addthis javascript를 다시 실행했지만 문제가 해결되지 않았습니다. 나는 addthis.toolbox()를 사용하여 툴박스를 자바 스크립트로 렌더링해야한다고 언급 한 AddThis 사이트의 문서로 돌아가 보았습니다. 뭔가 저에게 맞지 않는 것 같습니다.
나는 전구의 순간을 가졌습니다. addthis.toolbox() 함수가 addthis : url과 addthis : title 속성을 무시하고있는 것처럼 보였습니다. 도구 상자 div에 설정 한 속성으로 addthis.toolbox()에 공유 속성을 정의해야합니다. 설정 개체. 그 다음부터는 훨씬 쉬워졌습니다.
최종 솔루션은 3 부분으로 제공됩니다. URL 및 addthis :
먼저 고유 ID를 가지며 addthis를 포함하는 사용자 제어에 정의 tollbox의 DIV 인 표제 속성 :
<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>
다음 I는를 생성하는 제어부에 사전 렌더링 처리기를 만들어 컨트롤 - 특정 addthis 공유 구성 개체의 정의를 포함하는 자바 스크립트. 이것은 작동하지 않으므로 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);
}
<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>
그리고 그것 뿐이다 :이 공유 설정 객체() 통과 addthis.toolbox를 호출하는 모든 도구 상자 div의 통과 및 관련 공유 설정 개체 (발견되지 않는 경우는 기본에 복귀를) 발견하고. 이제 UpdatePanel이 완벽하게 작동하며 내 모든 추가 공유 도구 상자가 올바르게 작동하고 올바른 URL과 제목을 갖습니다.
비동기 포스트 백 후에 카운터가 제대로 표시되지 않는 문제가 하나 있지만 모바일 장치 용 UpdatePanel 만 사용하고 있기 때문에 문제가되지 않습니다. 카운터를 표시하지 않습니다. 그러나 누구든지이 문제에 관한 아이디어가 있다면 나는 당신에게서 소식을 듣고 싶습니다.
