2013-05-30 15 views
5

Trước tiên tôi có thể xin lỗi vì chất lượng bài đăng của tôi, vì đây là lần đầu tiên tôi đăng trên đây. Tôi đã tìm thấy một số câu trả lời thực sự hữu ích trên trang web này trong quá khứ và vì vậy đã tìm thấy bản thân mình ở một vị trí để trả lại tôi nghĩ rằng tôi muốn cho nó một đi.Thêm điều khiển này trong UpdatePanel - đảm bảo chúng được hiển thị chính xác sau khi đăng lại không đồng bộ

Sau khi đập đầu vào tường một lúc, và tìm kiếm rất ít thông tin trực tuyến, cuối cùng tôi đã tìm được câu trả lời cho vấn đề này và đã trả lời một số câu hỏi vì vậy tôi nghĩ tôi sẽ chia sẻ những phát hiện của mình.

Kịch bản:

  • điều khiển người dùng Net mà ám một hộp công cụ addthis với duy nhất url và tiêu đề thuộc tính xác định.
  • UpdatePanel chứa một bộ lặp hiển thị nhiều hàng, mỗi hàng chứa một thể hiện của điều khiển người dùng hộp công cụ.
  • Nút "Hiển thị thêm kết quả" làm mới UpdatePanel, mỗi lần hiển thị nhiều kết quả hơn.

Vấn đề:

Khi trang web được hiển thị đầu tiên mọi thứ đều tốt. Tất cả các hộp công cụ hiển thị chính xác và hoạt động như mong đợi. Tuy nhiên, khi nhấn nút và UpdatePanel làm mới, các hộp công cụ sẽ biến mất.

Giải pháp:

Trước hết tôi nhanh chóng xác định chắc chắn từ câu hỏi và câu trả lời mà tôi cần thêm một EndRequestHandler trang của tôi sử dụng PageRequestManager rằng sẽ xử lý các yêu cầu async postback và kích hoạt một số javascript để render các toolbox của tôi của người khác.

Tiếp theo, tôi cần tìm hiểu xem javascript này nên là gì.

Tôi tìm thấy một số giải pháp được đề xuất cho vấn đề này trực tuyến, hầu hết bằng cách sử dụng window.addthis = null và sử dụng jquery getScript() để chạy lại javascript addthis tuy nhiên không có cách nào trong số này giải quyết được sự cố. Tôi tiếp tục quay trở lại tài liệu trên trang AddThis mà bạn chỉ nên sử dụng addthis.toolbox() để render các hộp công cụ của bạn với javascript, cái gì đó dường như không hoạt động cho tôi.

Sau đó, tôi đã có một khoảnh khắc bóng đèn. Có vẻ như hàm addthis.toolbox() đã bỏ qua thuộc tính addthis: url và addthis: title mà tôi đã thiết lập trong các hộp công cụ của mình và tôi nhận ra rằng tôi cần chuyển các thuộc tính này vào addthis.toolbox() bằng cách định nghĩa chúng trong phần chia sẻ đối tượng cấu hình. Từ đó mọi thứ trở nên dễ dàng hơn nhiều.

Giải pháp cuối cùng có 3 phần.

Đầu tiên là DIV hộp công cụ định nghĩa trong điều khiển người dùng trong đó có một ID duy nhất và chứa addthis: url và addthis: thuộc tính tiêu đề:

<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> 

Tiếp theo tôi tạo ra một handler PreRender trong việc kiểm soát để tạo ra các javascript chứa định nghĩa của đối tượng cấu hình addthis chia sẻ kiểm soát cụ thể. Điều này không thể được chứa trong trang ascx vì nó không hoạt động.Nó phải được tạo ra sử dụng RegisterStartupScript trong mã máy chủ:

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); 
    } 

Cuối cùng tôi đã tạo ra một EndRequestHandler trong trang của tôi sử dụng Sys.WebForms.PageRequestManager được kích hoạt khi UpdatePanel đã làm mới. Điều này đi qua tất cả các divs hộp công cụ và tìm đối tượng phần cấu hình có liên quan (quay trở lại một mặc định nếu không tìm thấy) và sau đó gọi addthis.toolbox() đi qua trong đối tượng phần cấu hình:

<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> 

Và đó là nó. Bây giờ UpdatePanel của tôi hoạt động hoàn hảo và tất cả các hộp công cụ chia sẻ addthis của tôi hoạt động chính xác và có các url và tiêu đề phù hợp.

Có một vấn đề nổi bật mà tôi đang làm việc mà bộ đếm dường như không hiển thị chính xác sau khi đăng lại không đồng bộ, tuy nhiên đó không phải là vấn đề đối với tôi vì tôi chỉ sử dụng UpdatePanel cho thiết bị di động và không hiển thị bộ đếm. Nhưng nếu có ai có bất kỳ ý tưởng nào về vấn đề này, tôi rất muốn nghe từ bạn.

Trả lời

2

Tôi cũng đang phải vật lộn để tìm mã ổn định nhất cho hộp Công cụ Thêm. Tôi tìm thấy mã sau là mã đơn giản nhất. Nó hoạt động hoàn hảo và tất cả các quầy làm việc một cách chính xác và các hộp công cụ không bao giờ biến mất trên bảng làm mới.

Dưới đây là ảnh chụp màn hình:

AddThis All Counters Available

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

Đây là mã Html với tất cả các quầy có sẵn:

<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> 

Và đây là kịch bản trong js file:

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

Để Hộp công cụ hoạt động với URL, hình ảnh, tiêu đề và mô tả chính xác thì chúng tôi cần thiết lập Biểu đồ mởQuyền tác giả trong phần đầu của HTML.

Đây là mã tối thiểu để được đặt trong 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" /> 

Hy vọng điều này sẽ là một đóng góp chia sẻ với giải pháp của bạn.

CẬP NHẬT

Nếu bạn cần để chỉ hiển thị Buttons Sharing gốc (Fb, Tw, Ln, G +, Pin, Su) sau đó AddThis đã cho chúng ta bây giờ với bộ đếm miễn phí.

Bước 1: Thêm mã sau vào trang web của bạn.

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

Bước 2: Dán mã này vào bất kỳ trang nào bạn muốn công cụ này hiển thị.

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

Chuyển đến http://www.addthis.com/dashboard để tùy chỉnh công cụ của bạn.

Để sử dụng trung tâm style="position: fixed; left: 50%; transform: translate(-50%);"
Bạn có thể kiểm tra here để xem mã hoạt động trực tiếp.

Các vấn đề liên quan