今天学习了怎么在aspx页面中使用进度条。因为是使用是局部更新,为了使前端知道程序正在运行,特意加入进度条,以显示网页正在响应。
要点如下:
1.需要加上UpdatePanel,ScriptManager,UpdateProgress。如果ScriptManager在母板页中已经定义,此处就不用加了。
2.需要把显示的内容加入到progress控件中ProgressTemplate元素中。并指定其交互的控件名称。即AssociatedUpdatePanelID属性.
3.定义一个css.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>UpdatePanelDemo</title>
<style>
.PleaseWait
{
height:200px;
width:500px;
background-image:url(../css/img/pleasewait.gif);//这个动画是用于显示正在加载的动画
background-repeat:initial;
padding-left:40px;
line-height :32px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" />
<asp:UpdatePanel ID="updatePanel" runat="server">
<ContentTemplate>
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="updatePanel" runat="server">
<ProgressTemplate>
<div class="PleaseWait">
Please Waite......
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>