AJAX應用帶標題更新

來源:互聯網
上載者:User
ajax

這裡的一個應用是UpdateProgress的應用完善。為了給使用者顯示的效果更好而設計。你可以參看效果:

http://szhxy.gliet.edu.cn/qxgl/登入顯示的更新過程。

代碼如下:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
#UpdatePanel1 ...{
  width: 300px;
  height: 100px;
  border:solid 1px gray;
}   
</style>
    <title>更新測試</title>
</head>
<body>

    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True" EnableScriptGlobalization="True" >

        </asp:ScriptManager>
        <div visible="false">
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
                <ProgressTemplate>
                                   
                <div id="Progress" style="border: 1px solid rgb(73, 138, 194); padding: 0px; z-index: 1000;  margin-top: 20%; margin-left: 30%; width: 229px; position: absolute; height: 94px; background-color: rgb(255, 255, 255); border-collapse: collapse; left: 206px; top: 129px;">
                   
            <table cellpadding="4" cellspacing="0" style="width: 100%; height: 100%;">
            <tr>
                <td style=" height:26px; text-align: left; background-image: url(tile_back.gif); text-align: left;">
                <span style="font-size: 9pt;color: #ffffff"> <strong>系統提示</strong></span></td>
            </tr>
            <tr>
                <td  valign="middle" style="height:100%;text-align: center; vertical-align: middle;">
                <br />
                <br />
                <img alt="Waiting..." src="indicator_mozilla_blu.gif" style="vertical-align: middle;border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none" />
                <span style="font-size: 9pt">正在處理,請稍後……</span></td>
            </tr>
    </table>
                </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
        </div>

              
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                  密碼:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                <br />
                密碼確認:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" />
            </ContentTemplate>

        </asp:UpdatePanel>
         
    </form>   
</body>
</html>

cs代碼:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
...{
    protected void Page_Load(object sender, EventArgs e)
    ...{

    }
    protected void Button1_Click(object sender, EventArgs e)
    ...{
        //System.Threading.Thread.Sleep(3000);
        int j = 0;
        for (int i = 0; i < 100000000; i++)
        ...{
            j = i+j;
       
        }
            if (TextBox1.Text.Equals(TextBox2.Text))
            ...{
                Response.Redirect("/login.aspx");
            }
            else
            ...{
                Response.Redirect("/error.aspx");
            }
      
    }

}

不過根據研究,http://szhxy.gliet.edu.cn/qxgl/Login.aspx?ReturnUrl=%2fqxgl%2fDefault.aspx使用的方法如下:
他是通過調用htm檔案實現映像顯示的。

將表單代碼去掉替換如下:
<iframe scrolling="no" frameborder="0" marginwidth="0" marginheight="0" src="bar.htm" /></iframe>

可見還需要一個bar.htm。這樣我們就建個:
<!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>
    <title>系統提示</title>
</head>

<body style="margin: 0px">
    <table cellpadding="4" cellspacing="0" style="width: 100%; height: 100%;">
            <tr>
            <td style=" height:26px; text-align: left; background-image: url(tile_back.gif); text-align: left;">
                <span style="font-size: 9pt;color: #ffffff"> <strong>系統提示</strong></span></td>

        </tr>
        <tr>
            <td  valign="middle" style="height:100%;text-align: center; vertical-align: middle;">
                <br />
                <br />
                <img alt="Waiting..." src="indicator_mozilla_blu.gif" style="vertical-align: middle;border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none" />
                <span style="font-size: 9pt">正在處理,請稍後……</span></td>
        </tr>

    </table>

</body>
</html>

測試通過

 



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。