程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 更多關於編程 >> Ajax 實現靜態刷新頁面 帶加載旋轉圖片

Ajax 實現靜態刷新頁面 帶加載旋轉圖片

編輯:更多關於編程

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/Style/NiuLan.css" rel="stylesheet" type="text/css" />
    <title></title>
    <script type="text/javascript">//當刷新的時候 原先的頁面的展示數據不會隱藏這裡面是隱藏函數
    //取得PageRequestManager對象,每一個Asp.net Ajax頁面中會右唯一一個這種對象負責處理所有的Async - Postback要求
    var prm = Sys.WebForms.PageRequestManager.getInstance(); //新增事件處理至PageRequestManager的initializeRequest事件,當Async-Postback發生時,此事件會被觸發,我們的InitRequest函數便會被運行    
    prm.add_initializeRequest(InitRequest);
    //新增事件處理至PageRequestManager的endRequest事件,當Async-Postback完成時,此事件會被觸發,我們的EndRequest函數便會被運行   
    prm.add_endRequest(EndRequest); function InitRequest(sender, args) {
    //顯示出UpdateProgress1控件
    document.getElementById('detail').style.display = "none";
    }
    function EndRequest(sender, args) {
    //隱藏UpdateProgress1控件
    document.getElementById('detail').style.display = "block";
    }
    //用於取消Async-Postback動作
    function CancelClick() {
    //當處於Async-Postback動作時,get_isInAsyncPostBack函數會回傳true,此時調用abortPostBack 函數便會取消Async-Postback動作。
    if (prm.get_isInAsyncPostBack()) {
    prm.abortPostBack();
    }
    }
    </script>
    </head>
    <body >
    <form id="Form1" runat="server">
    //使用  Ajax Extensitons 中的ScriptManager
    <asp:ScriptManager runat="server">
    </asp:ScriptManager>
    //使用地方比如
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    //放代碼
    <div id="detail"><asp:ImageButton ID="ibtnFBSJ" runat="server" ImageUrl="/images/ershoufang/bs/fbsj.gif"
    OnClick="ibtnFBSJ_Click" />
    </div>
    //當在靜態刷新頁面的時候會調用UpdateProgress 但是這個後台也是需要代碼的看下面
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
    <div style="text-align: center">
    <img alt="" src="/images/loading.gif" />
    </div>
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    </form>
    </body>
    </html>
    後台
    protected void ibtnFBSJ_Click(object sender, ImageClickEventArgs e)
    {
    System.Threading.Thread.Sleep(2000);
    drpSortOrder.SelectedValue = ((int)ErShouFangJiChuZuFang.order.按發布時間排序).ToString();
    PopulateDetails();
    }
    //這樣就可以實現為靜態刷新頁面,帶加載過程中有旋轉圖片,用戶體驗會很好效果如下

     

    1. 上一頁:
    2. 下一頁:
    Copyright © 程式師世界 All Rights Reserved