zoukankan      html  css  js  c++  java
  • 使用UpdatePanel控件

    使用UpdatePanel控件(二)

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

    主要内容

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

    2.UpdatePanel的嵌套使用

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

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

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

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

     

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

    <%@ 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还可以嵌套使用,即在一个UpdatePanel的ContentTemplate中还可以放入另一个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">

                                            <fieldset>

                                                <legend>Nested Panel 1</legend>

                                                <br />

                                                Last updated on

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

                                                <br />

                                                <asp:Button ID="NPButton1"

                                                            Text="Nested Panel 1 Button" 

                                                            runat="server" />

                                            </fieldset>

                                        </div>

                                    </ContentTemplate>

                                </asp:UpdatePanel>

                            </fieldset>

                        </div>

                    </ContentTemplate>

                </asp:UpdatePanel>

            </div>

        </form>

    </body>

    </html>

    运行后如下:

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

    使用UpdatePanel的时候并没有限制在一个页面上用多少个UpdatePanel,所以我们可以为不同的需要局部更新的页面区域加上不同的UpdatePanel。由于UpdatePanel默认的UpdateMode是Always,如果页面上有一个局部更新被触发,则所有的UpdatePanel都将更新,这是我们不愿看到的,我们只需要UpdatePanel在它自己的触发器触发的时候更新就可以了,所以需要把UpdateMode设置为Conditional。

    来看一下官方网站上提供的一个例子:包括两个UpdatePanel,其中一个用来用户输入而另一个则用来显示数据,每一个UpdatePanel的UpdateMode属性都设置为Conditional。当我们单击Cancel按钮时,只有用来用户输入的那个UpdatePanel刷新,当单击Insert按钮时,两个UpdatePanel都刷新。代码如下:

    <%@ Page Language="C#" %>

    <%@ Import Namespace="System.Collections.Generic" %>

     

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

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

        <title>Enter New Employees</title>

        <script runat="server">

            private List<Employee> EmployeeList;

     

            protected void Page_Load()

            {

                if (!IsPostBack)

                {

                    EmployeeList = new List<Employee>();

                    EmployeeList.Add(new Employee(1, "Jump", "Dan"));

                    EmployeeList.Add(new Employee(2, "Kirwan", "Yvette"));

                    ViewState["EmployeeList"] = EmployeeList;

                }

                else

                    EmployeeList = (List<Employee>)ViewState["EmployeeList"];

                

                EmployeesGridView.DataSource = EmployeeList;

                EmployeesGridView.DataBind();

            }

            

            protected void InsertButton_Click(object sender, EventArgs e)

            {

                if (String.IsNullOrEmpty(FirstNameTextBox.Text) ||

                   String.IsNullOrEmpty(LastNameTextBox.Text)) { return; }

     

                int employeeID = EmployeeList[EmployeeList.Count-1].EmployeeID + 1;

                

                string lastName = Server.HtmlEncode(FirstNameTextBox.Text);

                string firstName = Server.HtmlEncode(LastNameTextBox.Text);

                

                FirstNameTextBox.Text = String.Empty;

                LastNameTextBox.Text = String.Empty;

                

                EmployeeList.Add(new Employee(employeeID, lastName, firstName));

                ViewState["EmployeeList"] = EmployeeList;

                

                EmployeesGridView.DataBind();

                EmployeesGridView.PageIndex = EmployeesGridView.PageCount;

            }

     

            protected void CancelButton_Click(object sender, EventArgs e)

            {

                FirstNameTextBox.Text = String.Empty;

                LastNameTextBox.Text = String.Empty;

            }

        

            [Serializable]

            public class Employee

            {

                private int _employeeID;

                private string _lastName;

                private string _firstName;

     

                public int EmployeeID

                {

                    get { return _employeeID; }

                }

                

                public string LastName

                {

                    get { return _lastName; }

                }

                

                public string FirstName

                {

                    get { return _firstName; }

                }

                

                public Employee(int employeeID, string lastName, string firstName)

                {

                    _employeeID = employeeID;

                    _lastName = lastName;

                    _firstName = firstName;

                }

            }

     

        </script>

    </head>

    <body>

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

        <div>

            &nbsp;</div>

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

            <table>

                <tr>

                    <td style="height: 206px" valign="top">

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

                            <ContentTemplate>

                              <table cellpadding="2" border="0" style="background-color:#7C6F57">

                                <tr>

                                  <td><asp:Label ID="FirstNameLabel" runat="server" AssociatedControlID="FirstNameTextBox" 

                                                 Text="First Name" ForeColor="White" /></td>

                                  <td><asp:TextBox runat="server" ID="FirstNameTextBox" /></td>

                                </tr>

                                <tr>

                                  <td><asp:Label ID="LastNameLabel" runat="server" AssociatedControlID="LastNameTextBox" 

                                                 Text="Last Name" ForeColor="White" /></td>

                                  <td><asp:TextBox runat="server" ID="LastNameTextBox" /></td>

                                </tr>

                                <tr>

                                  <td></td>

                                  <td>

                                    <asp:LinkButton ID="InsertButton" runat="server" Text="Insert" OnClick="InsertButton_Click" ForeColor="White" />

                                    <asp:LinkButton ID="Cancelbutton" runat="server" Text="Cancel" OnClick="CancelButton_Click" ForeColor="White" />

                                  </td>

                                </tr>

                              </table>

                              <asp:Label runat="server" ID="InputTimeLabel"><%=DateTime.Now %></asp:Label>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                    </td>

                    <td style="height: 206px" valign="top">

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

                            <ContentTemplate>

                                <asp:GridView ID="EmployeesGridView" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan"

                                    BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False">

                                    <FooterStyle BackColor="Tan" />

                                    <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />

                                    <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />

                                    <HeaderStyle BackColor="Tan" Font-Bold="True" />

                                    <AlternatingRowStyle BackColor="PaleGoldenrod" />

                                    <Columns>

                                        <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />

                                        <asp:BoundField DataField="LastName" HeaderText="Last Name" />

                                        <asp:BoundField DataField="FirstName" HeaderText="First Name" />

                                    </Columns>

                                    <PagerSettings PageButtonCount="5" />

                                </asp:GridView>

                                <asp:Label runat="server" ID="ListTimeLabel"><%=DateTime.Now %></asp:Label>

                            </ContentTemplate>

                            <Triggers>

                                <asp:AsyncPostBackTrigger ControlID="InsertButton" EventName="Click" />

                            </Triggers>

                        </asp:UpdatePanel>

                    </td>

                </tr>

            </table>

        </form>

    </body>

    </html>

    运行后效果如下:

    示例代码下载:http://files.cnblogs.com/Terrylee/ASPNETAJAXUpdatePanelDemo2.rar

    支持TerryLee的创业产品Worktile
    Worktile,新一代简单好用、体验极致的团队协同、项目管理工具,让你和你的团队随时随地一起工作。完全免费,现在就去了解一下吧。
    https://worktile.com
     

    ]  AJAX风云

     
    摘要: jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及的,它兼容 CSS3,还兼容各种浏览器,jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents、events、实现动画效果,并且方便地为网站提供 AJAX 交互。 jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离,也就是说,不用再在 html 里面插入一堆js来调用命令了,只需定义 id 即可。今天在Kollermedia.at上发现了一篇JQuery插件列表的文章,里面包含了JQuery插件达240多个,特推荐给大家。阅读全文
    posted @ 2007-12-09 21:44 TerryLee 阅读(334092) | 评论 (208) 编辑
     
    摘要: 1.姗姗来迟的ASP.NET AJAX 1.0正式版终于与大家见面了。这次发布的版本与RC之间的改动如下: 
    …… 
    2.ASP.NET AJAX 1.0的全部源码已经发布。 
    3.ASP.NET AJAX Control Toolkit也随之发布了新版本,新增了如下四个控件: 
    AutoComplete 
    Calendar 
    MaskedEdit 
    Tabs 
    4.未来开发计划 
    详细大家可以访问:http://ajax.asp.net/ 
    阅读全文
    posted @ 2007-01-24 08:29 TerryLee 阅读(15907) | 评论 (107) 编辑
     
    摘要: 原计划年底Release的ASP.NET AJAX 1.0,经过了多个CTP版,2个Beta版本之后,终于发布了RC版。同时微软提供了两份升级文档: 

    从CTP版升级到RC 版 

    从Beta2升级到RC版 

    点击下载ASP.NET AJAX 1.0 RC,从提供的文档来看,主要的变化是命名空间,从Microsoft.Web变为了System.Web,如以前的用的Microsoft.Web.Script.Services.ScriptService,现在需要修改为System.Web.Script.Services.ScriptService。 

    同时ASP.NET AJAX Control Toolkit已经更新到了RC版,可以从这里下载。 

    点点:从最近发布的Beta2到RC版,可以看出ASP.NET AJAX v1.0已经逐步趋于稳定,不会再有CTP到Beta1的翻天覆地的变化,大家可以在项目中使用了。阅读全文
    posted @ 2006-12-15 09:14 TerryLee 阅读(4685) | 评论 (25) 编辑
     
    摘要: 在CSDN首页上用大标题写着“谁来革AJAX的命,Flash还是WPF”,同时在下面列举了Adobe推出Flex 2.0 力拼Ajax,以及袁红岗在6月份的文章Ajax,只是一种过渡技术,其中袁在文章中说到“Ajax其实是一种新瓶装旧酒的过渡技术,相信在未来一到两年之内将被新的技术所代替,而JSF则是一种可扩展的框架级解决方案。” 

    AJAX自去年火了之后到现在,不仅没有被取代,而且有越来越热之势:现在各大网站都在争相使用AJAX技术,似乎哪个网站不使用点AJAX就显的落伍了,从Google、到Yahoo,以及国内各门户网站都是如此,不使用AJAX技术,似乎就不够Web2.0;各种AJAX框架也是风起云涌,微软的ASP.NET AJAX,雅虎的Yahoo! UI,Google的Web Toolkit以及dojo,prototype等;再看看园子里朋友对AJAX的关注程度,远远超出了对其他技术的关注。 

    那么AJAX到底命运如何,是否只是一种过渡技术?能否被Flex或者WPF所取代呢?我们不妨来一次讨论,大家也都来说说自己的看法吧。阅读全文
    posted @ 2006-11-20 14:30 TerryLee 阅读(9604) | 评论 (89) 编辑
     
    摘要: 本文将使用Timer控件更新两个UpdatePanel控件,Timer控件将放在UpdatePanel控件的外面,并将它配置为UpdatePanel的触发器,翻译自官方文档。 

    主要内容 

    在多个UpdatePanel中使用Timer控件 
    阅读全文
    posted @ 2006-11-15 21:43 TerryLee 阅读(16339) | 评论 (53) 编辑
     
    摘要: 本文简单介绍一下在母版页中使用UpdatePanel控件,翻译自官方文档。 


    主要内容 

    1.添加UpdatePanel控件到Content Page 

    2.通过Master Page刷新UpdatePanel 
    阅读全文
    posted @ 2006-11-13 18:00 TerryLee 阅读(22151) | 评论 (69) 编辑
     
    摘要: 在UpdatePanel控件异步更新时,如果有错误发生,默认情况下会弹出一个Alert对话框显示出错误信息,这对用户来说是不友好的,本文看一下如何在服务端和客户端脚本中自定义异常处理,翻译自官方文档。 

    主要内容 

    1.在服务端自定义异常处理 

    2.在客户端脚本中自定义异常处理 
    阅读全文
    posted @ 2006-11-13 16:58 TerryLee 阅读(17811) | 评论 (37) 编辑
     
    摘要: ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新。 

    文章及导读阅读全文
    posted @ 2006-11-12 23:22 TerryLee 阅读(219489) | 评论 (148) 编辑
     
    摘要: 在本篇文章中,我们将通过编写JavaScript来使用客户端行为扩展UpdateProgress控件,客户端代码将使用ASP.NET AJAX Library中的PageRequestManager,在UpdateProgress控件中,将添加一个Button,来允许用户取消异步更新,并且使用客户端脚本来显示或者隐藏进度信息。 

    主要内容 

    1.通过客户端脚本取消异步更新 

    2.通过客户端脚本显示或者隐藏进度信息 
    阅读全文
    posted @ 2006-11-12 22:59 TerryLee 阅读(21071) | 评论 (79) 编辑
     
    摘要: 在ASP.NET AJAX Beta2中,UpdateProgress控件已经从“增值”CTP中移到了ASP.NET AJAX核心中。以下两篇关于UpdateProgress的文章基本翻译自ASP.NET AJAX官方网站。 

    主要内容 

    1.UpdateProgress控件简单使用 

    2.使用多个UpdateProgress控件 

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

    主要内容 

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

    2.UpdatePanel的嵌套使用 

    3.同一页面上使用多个UpdatePanel 
    阅读全文
    posted @ 2006-11-01 22:00 TerryLee 阅读(37180) | 评论 (69) 编辑
     
    摘要: UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。通过本文来学习一下UpdatePanel简单的使用方法(第一篇)。 

    主要内容 

    1.UpdatePanel控件概述 

    2.UpdatePanel工作原理 

    3.ContentTemplate属性 

    4.ContentTemplateContainer属性 

    5.Triggers属性 
    阅读全文
    posted @ 2006-10-29 22:57 TerryLee 阅读(70737) | 评论 (124) 编辑
     
    摘要: 在ASP.NET AJAX中,由于一个ASPX页面上只能有一个ScriptManager控件,所以在有母版页的情况下,如果需要在Master-Page和Content-Page中需要引入不同的脚本时,这就需要在Content-page中使用ScriptManagerProxy,而不是ScriptManager,ScriptManager 和 ScriptManagerProxy 是两个非常相似的控件。 

    主要内容 

    1.ScriptManagerProxy控件概述 

    2.简单示例 
    阅读全文
    posted @ 2006-10-27 08:31 TerryLee 阅读(36578) | 评论 (96) 编辑
     
    摘要: ScriptManager控件包括在ASP.NET 2.0 AJAX Extensions中,它用来处理页面上的所有组件以及页面局部更新,生成相关的客户端代理脚本以便能够在JavaScript中访问Web Service,所有需要支持ASP.NET AJAX的ASP.NET页面上有且只能有一个ScriptManager控件。在ScriptManager控件中我们可以指定需要的脚本库,或者指定通过JS来调用的Web Service,以及调用AuthenticationService和ProfileService,还有页面错误处理等。 

    主要内容 

    1.控件概述 

    2.一个简单的示例 

    3.客户端脚本模式 

    4.错误处理 

    5.Services属性 

    6.Scripts属性阅读全文
    posted @ 2006-10-25 23:16 TerryLee 阅读(122017) | 评论 (162) 编辑
     
    摘要: 经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不继续误导广大朋友,所以不再作为推荐系列文章,如果有需要参考的朋友,可以直接到随笔分类中查看。 

    ASP.NET AJAX Beta改动如此之大,鉴于又没有很好的中文参考资料,所以决定最近开始写作ASP.NET AJAX入门系列,这个系列我会把ASP.NET AJAX当作一个全新的东西去对待,不再考虑以前的Atlas,把自己对ASP.NET AJAX的研究与大家分享,便于初学的朋友少走一些弯路。对Atlas熟悉的朋友可以推荐看Dflying Chen的《拥抱变化——从Atlas到ASP.NET AJAX系列》,以及老赵的《深入Atlas系列》。由于个人的能力和掌握的程度有限 ,难免出现错误和遗漏的地方,还请大家多多理解和指正。 

    OK,让我们从这里开始! 
    阅读全文
    posted @ 2006-10-24 23:14 TerryLee 阅读(91322) | 评论 (72) 编辑
  • 相关阅读:
    jsp报源码
    c#简单写售票系统
    linux常用命令大全[转]
    【转载】大型网站渗透思之信息收集
    Ajax初窥
    屏蔽win10中文输入法
    win10禁止更新的方法
    win10进入到安全模式的三种方法
    7代CPU安装win7的方法
    python的输出问题
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3668945.html
Copyright © 2011-2022 走看看