ASP.NETAJAX(3)__UpdatePanel

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

今天也不知道写不写的完了，最近闲下来了，却感冒了，早上起来都不会说话了，不过幸亏咱不是靠嘴皮子过活了，哎~~~~窃喜吧

上一篇简单写到UpdatePanel的一些好处和坏处，这一篇呢，就细致的认识一下UpdatePanel这个控件，并合理的使用它

UpdatePanel的一些属性

：

RenderMode

    __Block(默认值):设定UpdatePanel使用DIV来圈出要跟新的区域

    __Inline：设定UpdatePanel使用span来。。。。。。

UpdateMode

    __Always(默认值):在完成一次异步回送以后，总是更新

    __Conditional:。。。。。以后，有条件的更新，在平时使用时候，一定要使必要的UpdatePanel更新，这样才可以减少服务器端以及带宽的压力

ChildrenAsTrigger（具体设置下面将会看到）

    __True(默认)：

    __False:

Triggers 集合属性

    __AsyncPostBackTrigger：指定异步回送的触发器

    __PostBackTrigger：指定同步回送的触发器

看一个UpdatePanel的示例

首先在页面中加入一个ScriptManager,这个控件起一个对AJAX的一个统一管理调配的作用，一个页面中有且仅有一个，我们通常会把它放到母板页里，方便使用

页面代码我放这里：

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

<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Block">
            <ContentTemplate>
                RenderMode="Block"
            </ContentTemplate>
        </asp:UpdatePanel>
        Xiaoyaojian
        <hr />
        
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Inline">
            <ContentTemplate>
                RenderMode="Inline" 
            </ContentTemplate>
        </asp:UpdatePanel>
        Xiaoyaojian
    </form>
</body>
</html>

显示结果是：

很明显在 RenderMode="Block" 的时候，UpdatePanel是独占一行的，而RenderMode="Inline" 的时候则不是在生成的代码中，我们也可以看到

<div id="UpdatePanel1">
    
                RenderMode="Block"
            
</div>
        Xiaoyaojian
        <hr />
        
        <span id="UpdatePanel2">
                RenderMode="Inline"
            </span>
        Xiaoyaojian

这里再做一个属性ChildrenAsTrigger的示例，因为我觉得其他的也没必要，一看就基本可以明白的

页面代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <%= DateTime.Now %>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
            <ContentTemplate>
                <%= DateTime.Now %>
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

这样的话，我们点击Button1的话，只有上面的时间会更新，而下面的不会，而如果我们去除ChildrenAsTriggers="false"的话，上下两个时间就都会更新，这是为什么呢？因为在上面一个UpdatePanel中，他的UpdateMode为Always，所以在点击按钮时候，它总会更新，但是下面一个UpdatePanel中，ChildrenAsTriggers="false" UpdateMode="Conditional"，所以它不会更新，那么怎么让下面这个UpdatePanel也更新呢，在异步回送的前提下，就只有一种方法，就是添加Trigger，指定一个AsyncPostBackTrigger的ControlID为某一个控件的ID，或者有需要的话还可以指定它的Event，代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <%= DateTime.Now %>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
            <ContentTemplate>
                <%= DateTime.Now %>
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button2" />
            </Triggers>
        </asp:UpdatePanel>
    <asp:Button ID="Button2" runat="server" Text="Button" />
    </form>
</body>
</html>

这样，点击Button2，两个时间就都可以更新了

ASP.NET 2.0脚本注册

比如我们需要在用户点击一个按钮时候，弹出一个提示框之类的东西，我们往往会通过Response.Writer然后输出一段javascript，这在通常情况下是可行的，但是我们看接下来的一个示例

页面代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
        
    <asp:Button ID="Button2" runat="server" Text="Button" onclick="Button2_Click" />
    </form>
</body>
</html>

在两个按钮的单击事件处理程序中，加入如下代码：

Response.Write("<script>alert('Xiaoyaojian');</script>");

这样，我们可以发现，在单击UpdatePanel外的一个按钮时，程序正常弹出一个提示框，但是当我们点击UpdatePanel内的一个按钮的时候，页面不能弹出提示框，并且会出现一个错误，这是一个典型的问题，其实使用这种方式给客户端写入脚本代码是一个非常拙劣的做法，接下来我们看一些ASP.NET 2.0提供的一些标准的操作脚本的方法

一个示例

创建一个页面，在页面中添加一个服务端按钮，在按钮的单击事件处理程序中，加入一下代码：

 ClientScriptManager csm = this.ClientScript;

        csm.RegisterArrayDeclaration("hello", "1,2,3");//常见一个名为hello的数组，内容为1，2，3

        csm.RegisterClientScriptBlock(this.GetType(), "afunction", "function alertMessage(){alert('xiaoyaojian');}", true);//注册一个代码段
        csm.RegisterClientScriptInclude("jsDocScript", "jsDoc.js");//引入一个名为jsDoc.js的文件，jsDocScript作为它的key,防止重复载入
        csm.RegisterExpandoAttribute(this.Button1.ClientID, "xiaobai", "xiaoyaojian");//为Button1添加一个名为xiaobai的属性，值为xiaoyaojian 注意一定要是控件的ClientID,因为服务器端控件发送到客户端后，它的ID是经过一定的规则转变过的 
        csm.RegisterHiddenField("xiaobai", "xiaoyaojian");//在页面中添加一个隐藏域
        csm.RegisterOnSubmitStatement(this.GetType(), "xiaoyaojian", "return window.confirm('Are you sure to delete?')");//可以添加一段语句，如果返回true，则此次提交可以成功，如果返回false，则提交不会成功
        csm.RegisterStartupScript(this.GetType(), "xiaoyaojian", "<script>alert('xiaoyaojian');</script>");

打开网页，我们可以在页面源代码中找下如下内容（与上面的语句一一对应）：

1.

<script type="text/javascript"> 
//<![CDATA[
var hello =  new Array(1,2,3);
//]]>
</script>
2.
<script type="text/javascript"> 
//<![CDATA[
function alertMessage(){alert('xiaoyaojian');}//]]>
</script>

3.
<script src="jsDoc.js" type="text/javascript"></script>
4.
<input type="hidden" name="xiaobai" id="xiaobai" value="xiaoyaojian" />

5.
<script type="text/javascript"> 
//<![CDATA[
function WebForm_OnSubmit() {
return window.confirm('Are you sure to delete?');
return true;
}
//]]>
</script>
6.
<script>alert('xiaoyaojian');</script></form>

这里需要讲一下第五句和第六句的区别，他们两个方法注册脚本的区别就在，RegisterOnSubmitStatement将脚本注册在了显示内容的最上边，而RegisterStartupScript则刚好相反

那么，在异步更新状态中注册脚本，则是使用ScriptManager对应的那几个静态方法

新方法和旧方法的区别

   ___方法都会多接受一个参数

   ___并非所有注册脚本都会生效：只有在注册的控件更新后，注册的脚本才会生效（如果想让这个脚本一定会生效，我们就可以把第一个参数该为当前Page）

   ___RegisterExpandoAttribute方法多一个encode参数

一个异步更新状态下注册脚本的示例

常见一个页面

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <%= DateTime.Now %><br />
                <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

在按钮的单击事件处理程序中加入如下代码：

ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(), "key_1", "alert('xiaoyaojian');", true);

第一个参数，是一个Control类型的参数（重载为Page类型），表示为哪个控件注册脚本，这就是多出来的那个参数，最后一个参数，表示是不是为注册的脚本加入一个<script>标记

这时我们在点击按钮，就可以正常弹出提示框了，这就解决了我们一开始遗留的那个问题

错误处理

服务器ScriptManager相应设置

___AllowCustomErrorsRedirect属性:遇到错误时，是否根据web.config中的设置进行跳转,默认设置为True

___AsyncPostBackError事件:异步刷新中遇到错误时，此事件被触发

___AsyncPostBackErrorMessage属性:客户端接受到的错误信息

在我们自行处理错误的时候，就需要在客户端响应PageRequestManager中的endRequest事件，并将errorHandled属性设置为True

一个关于错误处理的示例

现在如果使用Visual Studio 2008中创建网站，默认的customErrors结点是被注释掉的，我们对这个节点做如下操作

1.首先将注释取消，然后设置mode="On"，defaultRedirect设置为我们要跳转到的错误页面，这里我们让他跳转到我们将要创建的Error.aspx，

2，创建这个Error.aspx，里面添加一些自定义的错误提示

3.创建一个要发生错误的页面

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

在按钮点击事件中抛出一个异常，然后浏览页面，点击按钮，就会自动跳转到我们设定的默认错误页面

那么，如果想在当前出现错误的页面中处理错误，就要这样做

首先把AllowCustomErrorsRedirect="false"

然后在页面中添加如下代码

<div id="error"></div>
        <script type="text/javascript" language="javascript">
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, e) {
                e.set_errorHandled(true);//表示我们已经处理了这个错误
                $get("error").innerHTML = "出现一个错误";
            });
        </script>

一个动态创建UpdatePanel的示例:

创建一个页面
在页面的Load事件中加入如下代码

UpdatePanel updatePanel = new UpdatePanel();
        updatePanel.ID = "up1";
        this.Form.Controls.Add(updatePanel);//这是服务端控件的要求，必须添加到Form中

        LiteralControl literalControl = new LiteralControl(DateTime.Now.ToString());
        updatePanel.ContentTemplateContainer.Controls.Add(literalControl);//这里是添加到ContentTemplateContainer，而不是ContentTemplate

        Button button = new Button();
        button.Text = "按钮";
        updatePanel.ContentTemplateContainer.Controls.Add(button);

PageRequestManager类

getInstance静态方法：获得全局唯一的PageRequestManager实例
isInAsyncPostBack属性：是否出于异步更新过程中
abortPostBack方法：取消当前异步更新，多次调用不会产生异常

PageRequestManager在客户端形成的声明周期(异步刷新时触发)

initializeRequest
beginRequest
pageLoading
pageLoaded
endRequest

PageRequestManager__initializeRequest事件

request属性：用于获得WebRequest对象（用于请求的信息）
postBackElement:出发异步刷新的DOM元素

常用的操作

读取请求信息
取消此次异步更新

一个示例

如果我们要在一个优先级高的异步回送发起时，取消已经发起的优先级较低的操作，而在一个优先级较低的异步回送发起时，如果一优先级高的异步回送还没有完成时，而阻止此次异步回送时，我们就可以在PageRequestManager的initializeRequest中做如下操作

<script language="javascript" type="text/javascript">
        var lastPostBackButtonId = null;
        var btnPrecedenceId = "<%= this.btnPrecedence.ClientID %>";//优先级高的按钮的客户端ID

        Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(
            function(sender, e) {
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                if (prm.get_isInAsyncPostBack()) {//判断是否在异步会动过程中
                    if (lastPostBackButtonId == btnPrecedenceId) {
                        e.set_cancel(true); //取消操作
                        //e.get_postBackElement().id 得到发起回送的元素ID
                        if (e.get_postBackElement().id == btnPrecedenceId) {
                            showMessage("不可重复发起优先的刷新。");
                        }
                        else {
                            showMessage("请等待优先的刷新结束。");
                        }
                    }
                    else {
                        if (e.get_postBackElement().id == btnPrecedenceId) {
                            showMessage("发起优先的刷新，普通的刷新讲被取消");
                        }
                        else {
                            showMessage("重新发起普通的刷新,前一次提交将要被取消");
                        }
                    }
                    lastPostBackButtonId = e.get_postBackElement().id;
                }
            }
        );
    </script>

PageRequestManager__begingRequest事件

request属性
postBackElement

常用的操作：

读取请求信息
改变请求方式（替换Executor）
显示更新提示

一个强制显示UpdateProgress的示例

创建一个页面，添加ScriptManager并添加如下代码

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <%= DateTime.Now %>
            <br />
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button_Click" />
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button2" />
        </Triggers>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="1000" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            <span style="color:Red">Loading...</span>
        </ProgressTemplate>
    </asp:UpdateProgress>
    <hr />
    <asp:Button ID="Button2" runat="server" Text="Button"  OnClick="Button_Click"/>

并在按钮的点击事件中，让他线程停止两秒种，这样我们会发现，在点击UpdatePanel外的一个按钮的时候，UpdateProgress并没有显示Loading字样，其实这就是在UpdateProgress绑定一个UpdatePanel后产生的一个问题，只有UpdatePanel内的控件触发的异步回送，UpdateProgress才会做出反映

我们要让这个UpdateProgress对外部控件引发的异步回送产生反映，就可以模仿UpdateProgress内的一个startRequest方法

在页面上我们嵌入如下代码

<script language="javascript" type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(
        function(sender, e) {
            if (e.get_postBackElement().id != "<%=this.Button2.ClientID %>") {
                return;
            }
            var updateProgress = $get("<%= this.UpdateProgress1.ClientID %>");
            var dynamicLayout =<%=this.UpdateProgress1.DynamicLayout.ToString().ToLower() %>;
            if(dynamicLayout)
            {
                updateProgress.style.display="block";
            }
            else
            {
                updateProgress.style.visibility="visible";
            }

        });
    </script>

这样，我们就实现了强制UpdateProgress的显示

PageRequestManager__pageLoading事件

dateItems属性：获得服务器端注册的数据项
panelsDeleting属性：获得即将删除的UpdatePanel
panelsUpdating属性：获得即将更新的UpdatePanel

常用操作

提示更新的UpdatePanel
获得服务器注册的数据项

一个提示更新的UpdatePanel的示例

首先，我们创建一个用户控件，里面仅仅包含一个UpdatePanel用来显示当前事件，它的UpdateMode="Conditional"，然后在它codefile中，加入如下代码

 private static Random random = new Random(DateTime.Now.Millisecond);
    protected void Page_Load(object sender, EventArgs e)
    {
        
        if (random.NextDouble() > 0.5)
        {
            this.UpdatePanel1.Update();
        }
    }

这样，他每次只有一般的几率会更新

创建一个页面，添加若干个上面的用户控件，然后在页面Loadin事件里，注册一个异步更新的按钮

如果我们要高亮显示更新的UpdatePanel，就可以利用pageLoading这个事件，在页面中加入如下代码：

<script language="javascript" type="text/javascript">
        function highlightPanels(panels, clear) {
            for (var i = 0; i < panels.length; i++) {
                var panel = panels[i];
                panel.style.border = clear ? "solid 0px white" : "solid 2px red";
            }
        }
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(
        function(sender, e) {
        var panelUpdating = Array.clone(e.get_panelsUpdating());//得到要更新的UpdatePanel
            highlightPanels(panelUpdating,false);
            window.setTimeout(function() { highlightPanels(panelUpdating,true)},2000);
        }
        );
    </script>

这样，就可以提示用户哪个UpdatePanel将会被更新了，这就是一个典型利用pageLoading事件的例子

PageRequestManager___pageLoaded事件

dateItems属性：获得服务端注册的数据项
panelsCreated属性：获得新建的UpdatePanel
panelsUpdated属性：获得已经更新的UpdatePanel

常用操作

获得服务器端注册的数据项
执行服务器端注册的脚本

一个局部内容添加的示例

新建一个页面，添加ScriptManager,然后添加如下代码

<strong>Comment</strong><hr /><hr />
    
    <div id="commentContainer">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Repeater ID="Repeater1" runat="server">
                    <ItemTemplate>
                        <%# (Container.DataItem as Comment).Content %><br />
                        <i><%#(Container.DataItem as Comment).Time %></i>
                        <hr />
                    </ItemTemplate>
                </asp:Repeater>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        
    </div>
    <br />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><hr />
    <asp:Button ID="Button1" runat="server" Text="Add Comment" 
        onclick="Button1_Click" />

然后，在页面的codefile里添加

private static List<Comment> Comments;


    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            Comments = new List<Comment>();
            this.BindComments();

        }
    }

    private void BindComments()
    {
        this.Repeater1.DataSource = Comments;
        this.Repeater1.DataBind();
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Comment comment = new Comment();
        comment.Content = this.TextBox1.Text;
        comment.Time = DateTime.Now;
        Comments.Add(comment);
        //this.Repeater1.DataSource = new Comment[] { comment };
        this.BindComments();
        //this.Repeater1.DataBind();
    }

Comment类就是简单的两个公有字段Content和Time,这样我们就完成了一个类似论坛回帖的这么一个效果，但是，我们现在每次更新都是更新的整个UpdatePanel,随着这个回复的增加，服务器端需要处理并发回的数据量就会一点一点增加，所以我们要做一下的操作来减少这样的没有必要的数据量的传输

首先我们要知道，服务器端是怎么知道要更新的是哪个UpdatePanel的，它是通过UpdatePanel的ID来找到的，我们要做的就是让要寻找的不是当前要更新的ID

首先修改按钮点击事件的代码

 protected void Button1_Click(object sender, EventArgs e)
    {
        Comment comment = new Comment();
        comment.Content = this.TextBox1.Text;
        comment.Time = DateTime.Now;
        //Comments.Add(comment);
        this.Repeater1.DataSource = new Comment[] { comment };
        //this.BindComments();
        this.Repeater1.DataBind();
    }

然后在页面中，锲入如下的javascript代码

<script language="javascript" type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(
            function(sender, e) {
                var upId = "<%=this.UpdatePanel1.ClientID %>";//得到UpdatePanel的客户端ID
                var refreshedPanels = e.get_panelsUpdated();//得到所有已经更新的UpdatePanel
                for (var i = 0; i < refreshedPanels.length; i++) {//遍历所有已经更新的UpdatePanel
                    if (refreshedPanels[i].id == upId) {//如果发现我们需要的UpdatePanel已经更新
                        refreshedPanels[i].id = upId + Math.floor(9999 * Math.random());//首先改变原来的UpdatePanel的ID
                        var div = document.createElement("div");//创建一个DIV
                        div.id = upId;//把这个DIV的ID设置为要更新的UpdatePanel的ID
                        $get("commentContainer").appendChild(div);//然后把它添加到大的DIV的末尾
                        return;
                    }
                }
            }
        );
    </script>