在顯示視頻時進行ajax調用以更新視頻點擊

Question

我正在使用花式框顯示您的管狀視頻的asp.net網頁上工作。

到目前爲止它工作正常，我還需要做一個ajax調用asp.net文件updateHits.aspx?VideoID=xyzxvtmiw，以便我可以更新數據庫中此視頻的點擊次數/視圖（當有人點擊縮略圖時）。我不太清楚在用戶點擊video.aspx頁面上的視頻的圖像縮略圖時如何進行此調用。

下面是我的腳本

<script type="text/javascript"> 
    //Code to Reinitialize Fancybox script when using update panel START 
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_initializeRequest(InitializeRequest); 
    prm.add_endRequest(EndRequest); 
    function InitializeRequest(sender, args) { } 
    function EndRequest(sender, args) { InitMyFancyBox(); } 
    $(document).ready(function() { 
     InitMyFancyBox(); 
    }); 

    function InitMyFancyBox() { 
     $(document).ready(function() { 
      $(".youtube").click(function() { 
       // first, get the value from the alt attribute 
       var newTitle = $(this).find("img").attr("alt"); // Get alt from image 
       $.fancybox({ 
        'padding': 0, 
        'autoScale': false, 
        'transitionIn': 'none', 
        'transitionOut': 'none', 
        //'title': this.title, // we will replace this line 
        'title': newTitle, //<--- this will do the trick 
        'width': 680, 
        'height': 495, 
        'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 
        'type': 'swf', 
        'swf': { 'wmode': 'transparent', 'allowfullscreen': 'true' } 
       }); 
       return false; 
      }); 
     }); 

    } 
</script> 


      <asp:Repeater ID="rptvideos" runat="server" > 
       <ItemTemplate> 
       <div class="single-video-wrapper"> 
        <asp:HyperLink ID="hylnkvideo" CssClass="youtube" NavigateUrl='<%# getVideoURL(Eval("VideoID"), Eval("VideoYoutubeID")) %>' runat="server"> 
         <div class="video-image-wrapper"> 
          <asp:Image ID="imgvideo" ImageUrl='<%# getVideoImagePath(Eval("VideoYoutubeID"), Eval("VideoYoutubeIcon")) %>' AlternateText='<%# getVideoTitleDesc(Eval("VideoDate"),Eval("VideoTitle"),Eval("VideoDesc")) %>' runat="server" CssClass="video-thumbnail" /> 
         </div> 
         <div class="video-name"> 
          <asp:Label ID="lblvideoName" CssClass="video-name-lbl" runat="server" Text='<%#Eval("VideoTitle") %>'></asp:Label> 
         </div> 
         <div class="video-issue"> 
          <asp:Label ID="lblVideoIssue" CssClass="video-issue-lbl" runat="server" Text='<%#getIssuCode(Eval("IssueCode")) %>'></asp:Label> 
         </div> 
        </asp:HyperLink> 
       </div> 
       </ItemTemplate> 
      </asp:Repeater> 

基於上面的代碼，我正在重新初始化花式盒，因爲我有UpdatePanel中的一部分。

但我不知道我應該如何讓阿賈克斯呼籲updateHits.aspx?VideoID=xyzxvtmiw，以便我可以更新數據庫。

Answer 1

你可以只添加AJAX調用單擊事件：

function InitMyFancyBox() { 
    $(document).ready(function() { 
     $(".youtube").click(function() { 
      // first, get the value from the alt attribute 
      var newTitle = $(this).find("img").attr("alt"); // Get alt from image 
      $.fancybox({ 
       //... 
      }); 
      // your Ajax call here 
      $.ajax({ 
       type: "POST", 
       url: "updateHits.aspx?VideoID=xyzxvtmiw" 
      }); 
      return false; 
     }); 
    }); 
} 

如果你想在Ajax調用是從的fancybox單獨的init你可以添加一個單擊處理別的地方在你的頁面：

$(".youtube").click(function() { 
    // your Ajax call here 
    $.ajax({ 
     type: "POST", 
     url: "updateHits.aspx?VideoID=xyzxvtmiw" 
    }); 
}