现在的位置: 首页 > 综合 > 正文

ASP.NET AJAX入门系列(5):使用UpdatePanel控件(二)

2013年10月20日 ⁄ 综合 ⁄ 共 4564字 ⁄ 字号 评论关闭

UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。通过本文来学习一下UpdatePanel其他的一些使用方法(第二篇)。

 

主要内容

1.用编程的方法控制UpdatePanel的更新

2UpdatePanel的嵌套使用

3.同一页面上使用多个UpdatePanel

 

一.用编程的方法控制UpdatePanel的更新

对于UpdatePanel,我们也可以使用编程的方法来控制它的更新,可以通过ScriptManagerRegisterAsyncPostBackControl()方法注册一个异步提交的控件,并且调用UpdatePanelUpdate()方法来让它更新。再次用我在前面的文章中用到的一个无聊的时间更新例子来看一下,有时候我觉得例子过于复杂更加不好说明白所要讲的内容,如下代码所示,注意Button1并不包含在UpdatePanel中:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<script runat="server">

    
void Button1_Click(object sender, EventArgs e)

    
{

        
this.Label2.Text = DateTime.Now.ToString();

    }


</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    
<title>Refreshing an UpdatePanel Programmatically</title>

</head>

<body>

    
<form id="form1" runat="server">

        
<asp:ScriptManager ID="ScriptManager1" runat="server"/>

        
<div>

            
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

                
<ContentTemplate>

                    
<asp:Label ID="Label1" runat="server" Text="更新时间:"></asp:Label>

                    
<asp:Label ID="Label2" runat="server" Text="Label" ForeColor="Red"></asp:Label><br/><br/>

                    

                
</ContentTemplate>

            
</asp:UpdatePanel>

             
<asp:Button ID="Button1" runat="server" Text="Button"  OnClick = "Button1_Click"/>

        
</div>

    
</form>

</body>

</html>

这时候不用多说,肯定是整页提交了,运行如下图所示:


再次修改上面的例子,使用ScriptManagerRegisterAsyncPostBackControl()注册Button1为一个异步提交控件,并且调用UpdatePanelUpdate()方法:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<script runat="server">

    
void Page_Load(object sender, EventArgs e)

    
{

        ScriptManager1.RegisterAsyncPostBackControl(Button1);

    }


    

    
void Button1_Click(object sender, EventArgs e)

    
{

        
this.Label2.Text = DateTime.Now.ToString();

        
this.UpdatePanel1.Update();

    }


</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    
<title>Refreshing an UpdatePanel Programmatically</title>

</head>

<body>

    
<form id="form1" runat="server">

        
<asp:ScriptManager ID="ScriptManager1" runat="server"/>

        
<div>

            
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

                
<ContentTemplate>

                    
<asp:Label ID="Label1" runat="server" Text="更新时间:"></asp:Label>

                    
<asp:Label ID="Label2" runat="server" Text="Label" ForeColor="Red"></asp:Label><br/><br/>

                    

                
</ContentTemplate>

            
</asp:UpdatePanel>

             
<asp:Button ID="Button1" runat="server" Text="Button"  OnClick = "Button1_Click"/>

        
</div>

    
</form>

</body>

</html>

这时候可以看到,已经是异步提交了:

二. UpdatePanel的嵌套使用

UpdatePanel还可以嵌套使用,即在一个UpdatePanelContentTemplate中还可以放入另一个UpdatePanel。当最外面的UpdatePanel被触发更新时,它里面的子UpdatePanel也随着更新,里面的UpdatePanel触发更新时,只更新它自己,而不会更新外层的UpdatePanel。看下面的例子:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<script runat="server">

</script>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    
<title>UpdatePanelUpdateMode Example</title>

    
<style type="text/css">

    div.NestedPanel

    
{

      position
: relative;

      margin
: 2% 5% 2% 5%;

    
}


    
</style>

</head>

<body>

    
<form id="form1" runat="server">

        
<div>

            
<asp:ScriptManager ID="ScriptManager" 

                               runat
="server" />

            
<asp:UpdatePanel ID="OuterPanel" 

                             UpdateMode
="Conditional" 

                             runat
="server">

                
<ContentTemplate>

                    
<div>

                        
<fieldset>

                            
<legend>Outer Panel </legend>

                            
<br />

                            
<asp:Button ID="OPButton1" 

                                        Text
="Outer Panel Button" 

                                        runat
="server" />

                            
<br />

                            Last updated on

                            
<%= DateTime.Now.ToString() %>

                            
<br />

                            
<br />

                            
<asp:UpdatePanel ID="NestedPanel1" 

                                               UpdateMode
="Conditional"

                                               runat
="server">

                                
<ContentTemplate>

                                    
<div class="NestedPanel">

     

抱歉!评论已关闭.