初学.NET之AJAX

来源:互联网 发布:如何在淘宝店铺加客服 编辑:程序博客网 时间:2024/06/10 08:35

AJAX中主要有四个控件:ScriptManager、UpdatePanel、Timer、UpdateProgress。

1、ScriptManager掌管着客户端Ajax页的多‘有脚本,并在页面中注册Ajax类库,用来实现页面的局部更新和对Web服务的调用。

2、UpdatePanel局部刷新

3、Timer动态时间显示

4、UpdateProgress控件用于当页面异步更新数据时,显示给用户友好的提示信息。

下面是一个简单小例子,综合以上控件:

前台:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ajax示例</title>
</head>
<body style="margin: 0px; padding: 0px" >
   <form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="3600">
</asp:ScriptManager>
</div>


<!--实现刷新时间 -->
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <asp:Button ID="Button1" runat="server" Text="AJAX Postback"
          OnClick="OnButtonClick" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
    </Triggers> 
</asp:UpdatePanel>


   <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
   <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button2" runat="server" Text="ASP.NET Postback" 
       onclick="OnButtonClick" />
         </ContentTemplate>
   </asp:UpdatePanel>


   <!--实现加载页面时等待特效 -->
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
                <ProgressTemplate>
                    <div id="ty" class="mydiv">
                        <img src="Styles/images/load.gif" />
                    </div>
                    <div id="tyt" class="bg">
                    </div>
                </ProgressTemplate>
        </asp:UpdateProgress>
  
  <!--实现自动刷新时间 -->
   <asp:Timer ID="Timer1" runat="server" Interval="10000" ontick="Timer1_Tick">
   </asp:Timer>
   <asp:Label ID="Label3" runat="server" ></asp:Label>
</form>
</body>
</html>

后台:

        protected void OnButtonClick(object sender, EventArgs e)
        {
            DateTime now = DateTime.Now;
            Label1.Text = now.ToLongTimeString();
            Label2.Text = now.ToLongTimeString();
        }


        protected void Timer1_Tick(object sender, EventArgs e)
        {
            //用timer控件顯示當前系統時間
            Label3.Text = "當前系統時間是:" + DateTime.Now.ToString();
        }

0 0
原创粉丝点击