Po pierwsze, mogę z góry przeprosić za jakość mojego wpisu, ponieważ po raz pierwszy zamieszczam tutaj. Znalazłem kilka naprawdę użytecznych odpowiedzi na tej stronie w przeszłości, więc znalazłem się w stanie oddać, myślałem, że dam ci szansę.AddThis formanty w UpdatePanel - upewniając się, że są one poprawnie renderowane po asynchronicznym odesłaniu zwrotnym
Po uderzeniu głową o ścianę przez jakiś czas i znalezieniu bardzo małej ilości informacji w Internecie, w końcu znalazłem odpowiedź na ten problem, który zadziałał dla mnie i odpowiedziałem na kilka pytań, więc pomyślałem, że podzielę się swoimi odkryciami.
Scenariusz:
- kontroli użytkownika Net nadająca się zestaw narzędzi Addthis z unikalnie określonych parametrów URL i nazwy.
- Panel UpdatePanel zawierający repeater wyświetlający wiele wierszy, z których każdy zawiera instancję kontrolki użytkownika przybornika.
- Przycisk "Pokaż więcej wyników", który odświeża UpdatePanel, za każdym razem wyświetlając więcej wyników.
Problem:
Gdy strona zostanie wyświetlona jako pierwsza wszystko jest w porządku. Wszystkie skrzynki narzędziowe wyświetlają się poprawnie i działają zgodnie z oczekiwaniami. Jednak po naciśnięciu przycisku i odświeżeniu UpdatePanel pola narzędzi znikną.
Rozwiązanie:
Po pierwsze szybko ustalić z pytań i odpowiedzi, które muszę dodać EndRequestHandler mojej stronie za pomocą PageRequestManager które obsłużyć żądania asynchronicznego ogłaszania zwrotnego i powodować pewne javascript, aby uczynić swoje skrzynki na narzędzia cudzych.
Następnie musiałem ustalić, czym powinien być ten javascript.
Znalazłem wiele proponowanych rozwiązań dla tego problemu w Internecie, najczęściej przy użyciu window.addthis = null i przy użyciu jQuery getScript(), aby ponownie uruchomić addthis javascript jednak żadna z nich nie rozwiązała problemu. Wciąż wracałem do dokumentacji na stronie AddThis, która mówiła, że powinieneś po prostu użyć addthis.toolbox(), aby wyrenderować twoje skrzynki narzędziowe za pomocą javascript, coś, co nie działa dla mnie.
Potem miałem chwilę żarówkę. Okazało się, że funkcja addthis.toolbox() ignorowała addthis: url i addthis: title atrybuty, które ustawiłem w moim divs na toolboxie i zdałem sobie sprawę, że muszę przekazać te atrybuty do addthis.toolbox(), definiując je w udziale obiekt config. Odtąd sprawy stały się łatwiejsze.
Ostateczne rozwiązanie składa się z 3 części.
Pierwszy to DIV tollbox zdefiniowany w kontroli użytkownika, który ma unikatowy identyfikator i zawierającego AddThis URL i AddThis: atrybuty tytuł:
<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>
Następny stworzyłem obsługi prerender w kontroli, aby stworzyć javascript zawierający definicję specyficznego dla kontroli obiektu addthis share config. To nie może być zawarte na stronie ascx, ponieważ nie działa.To musi być tworzony przy użyciu RegisterStartupScript w kodzie serwera:
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);
}
końcu stworzył EndRequestHandler w mojej strony za pomocą Sys.WebForms.PageRequestManager być wyzwalany po UpdatePanel został odświeżony. To przechodzi przez wszystkie div Toolbox i znajdzie powiązany obiekt config akcji (Przywracanie domyślnie jeśli nie znaleziono), a następnie wywołuje addthis.toolbox() przechodzącą w obiekcie konfiguracyjnym akcji:
<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>
I to wszystko. Teraz mój UpdatePanel działa idealnie i wszystkie moje dodatki do narzędzi akcji działają poprawnie i mają odpowiednie adresy URL i tytuły.
Jest jeden problem, nad którym pracuję, który polega na tym, że licznik nie wydaje się poprawnie wyświetlać po odesłaniu asynchronicznym, jednak nie jest to problemem dla mnie, ponieważ korzystam tylko z UpdatePanel dla urządzeń mobilnych i nie wyświetlam licznika. Ale jeśli ktoś ma jakieś pomysły dotyczące tego problemu, bardzo chciałbym usłyszeć od ciebie.
