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">&nbsp;<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>

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

        
</asp:UpdatePanel>
        
&nbsp;
    
</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">&nbsp;<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>

測試通過
發佈了130 篇原創文章 · 獲贊 5 · 訪問量 42萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章