Asp.net中AJAX框架使用（13）

1.实现页面无刷新

form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="lblServerTime" runat="server" Font-Bold="True" 
                    Font-Size="Larger" ForeColor="Red"></asp:Label>
                <br />
                <asp:Button ID="btnRefresh" runat="server" Text="刷新" 
                    onclick="btnRefresh_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>

2.有触发条件的更新。

<form id="form1" runat="server">
    <div>
       <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" 
            UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Label ID="lblServerTime1" runat="server" Font-Bold="True" 
                    Font-Size="Larger" ForeColor="Red"></asp:Label>
                <br />
                <asp:Button ID="btnRefresh" runat="server" Text="刷新" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnRefresh" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
    
    </div>
    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Label ID="lblServerTime2" runat="server" Font-Bold="True" 
                Font-Size="Larger" ForeColor="Red"></asp:Label>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnRefresh" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
    </form>

3.UpDaterogress控件使用。（类似于进度条）

 <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div style="background-image: url(images/Login1.jpg); width: 249px; height: 185px;
                text-align: center">
                <asp:Panel ID="pnLogin" runat="server">
                    <br />
                    <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                        <ProgressTemplate>
                            正在加载中，请稍候……
                        </ProgressTemplate>
                    </asp:UpdateProgress>
                    <img src="images/loginInfo.jpg" alt="" /><br />
                    <asp:ImageButton ID="imgBtnLogin" ImageUrl="images/login.jpg" runat="server" 
                        onclick="imgBtnLogin_Click" />
                    <img src="images/register.jpg" alt="" />
                </asp:Panel>
                <asp:Panel ID="pnOperate" runat="server" Visible="false">               
                    <br />
                    <img src="images/loginChinaren.jpg" alt="" />
                </asp:Panel>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>

后台代码：

protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void imgBtnLogin_Click(object sender, ImageClickEventArgs e)
    {
        System.Threading.Thread.Sleep(2000);
        pnLogin.Visible = false;
        pnOperate.Visible = true;
    }