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>
测试通过