ASP.NET AJAX入门系列（5）：使用UpdatePanel控件（二）

最新推荐文章于 2024-07-10 16:59:04 发布
最新推荐文章于 2024-07-10 16:59:04 发布
阅读量627 收藏
点赞数
分类专栏： AJAX入门系列 文章标签： asp.net ajax button 编程 insert border
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 >
运行后效果如下：
 
b哈利路亚d
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ASP.NET_AJAX入门系列：使用UpdatePanel控件.doc
08-12
ASP.NET_AJAX入门系列：使用UpdatePanel控件.docASP.NET_AJAX入门系列：使用UpdatePanel控件.doc
ASP.NET AJAX入门系列：使用UpdatePanel控件
08-11
ASP.NET AJAX入门系列UpdatePanel控件教程
ASP.Net中基于UpdatePanel的无刷新上传（用户控件）（C#）
duoerbasilu
03-03 215
注：这个方法并不能真正实现无刷新上传文件，只是能够使得上传文件后，滚动条的位置保持不变，相当于无刷新上传。 1、建立用户控件Up.ascx 2、在用户控件中添加UpdatePanel，代码如下 &lt;asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Block"UpdateMode="Conditional"&gt; ...
ASP.NET中使用UpdatePanel实现局部异步刷新方法和攻略
小菜鸟的Blog
12-12 4357
asp.net UpdatePanel实现异步局部刷新 如有雷同，不胜荣欣，若转载，请注明 鉴于最近项目需要，研究了一下UpdatePanel控件的使用方法，现总结如下，可能有很多地方不足，还望大家斧正哦，此文的目的也是为了帮助UpdatePanel的初学者，也是为了给自己的学习之路留个脚印，以便自己查缺补漏，废话到此，下面直接开始 UpdatePanel局部刷新的使用 ScriptMana
ajax 基本及在.net中的使用
BugsBunnywyj的博客
08-10 577
文章目录基本特性XMLHttpRequest 对象 (异步的与服务器交换数据)GET 还是 POST？GET 请求POST 请求url - 服务器上的文件异步 - True 或 False？Async=trueAsync = false服务器响应responseText 属性responseXML 属性服务器端构架客户端构架ScriptManagerscriptManager 属性 基本特性 AJ...
ASP[1].NET_AJAX入门系列：使用ScriptManager控件
04-20
在这个入门系列中，我们将重点关注如何使用ScriptManager控件，它是ASP.NET AJAX框架的核心组件。 **ScriptManager控件概述** ScriptManager控件是ASP.NET 2.0 AJAX扩展的一部分，它在页面中起着至关重要的作用。它...
jQuery-ASP.NET-UpdatePanel：在ASP.NET UpdatePanel中使用jQuery
01-30
在ASP.NET开发中，UpdatePanel是一个非常有用的控件，它允许开发者实现页面的部分刷新，而无需重新加载整个页面。这极大地提高了用户体验，特别是在处理复杂的Web应用程序时。然而，随着JavaScript库如jQuery的广泛...
使用VS 2008创建ASP.NET AJAX控件扩展器
04-11
2. **选择或创建控件扩展器**：在本例中，可能会使用内置的ASP.NET AJAX控件扩展器，如UpdatePanel或TextBoxWatermarkExtender，或者创建自定义的扩展器。 3. **添加控件和扩展器**：将TextBox控件和选择的扩展器...
浅谈UpdatePanel
aaaaqqqq111122223333的博客
02-05 135
这是我以前刚学习asp.net ajax的时候总结的，如果有什么错误的地方，请大家指出，以便我能早日改正。 1.作用： UpdatePanel控件用来控制页面的局部更新，这些更新依赖于ScriptManager的EnablePartialRendering属性，如果此属性设为false,则局部更新将失去作用。 2.基本结构: Code 1...
多个UpdatePanel控件相互引发刷新的使用
moonshine
09-14 1281
ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果。其中的UpdatePanel就是设置页面中异 步局部更新区域，它必须依赖于ScriptManager存在，因为ScriptManger控件提供了客户端脚本生成与管理UpdatePanel的功 能。 几个重要的属性：     ScriptManager控件的EnablePartialRendering属
UpdatePanel嵌套
weixin_30332705的博客
04-23 165
UpdatePanel主要是防止页面的刷新，但是项目中有时候可能要根据不同的事件更新不同的地方。 这时候UpdatePanel嵌套可以很好的解决这个问题。 在事例中主要是用时间来记录每个UpdatePanel的刷新。页面预览： 前台代码：Code1<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="UpdateP...
嵌套的UpdatePanel
weixin_30685029的博客
04-23 90
<formid="form1"runat="server"> <asp:ScriptManagerID="ScriptManager1"runat="server"> </asp:ScriptManager> <asp:UpdatePanelID="UpdatePanel1"runat=...
用ASP.NET 2.0实现AJAX风格的Web开发
weixin_33676492的博客
04-13 112
提要 在过去的几个月中，基于AJAX技术开发高度交互的Web应用程序的设计模式迅速流行开来。现在，具有高度可配置性的Web应用程序，例如Google Maps和A9，都在综合利用这些技术来创造丰富的客户端用户体验。其实，结合AJAX技术进行Web开发并非最近的研究成果，只不过这些技术一直以来不断得到持续更新和改进。　　本文中我有三个目的。首先，我想提供一个AJAX风格应用程序的高级概述。其次，我想...
ASP.NET AJAX入门系列（4）：使用UpdatePanel控件（一）
weixin_34321977的博客
10-29 158
UpdatePanel可以用来创建丰富的局部更新Web应用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件，其强大之处在于不用编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。通过本文来学习一下UpdatePanel简单的使用方法（第一篇）。   主要内容 1．UpdatePan...
ASP.NET Web应用中的 Razor Pages/MVC/Web API/Blazor
学以致用 知行合一
07-06 1153
大多数服务器端语言都采用广泛使用的模型-视图-控制设计。它由三个主要组件组成：控制器、模型和视图。控制器负责输入并与模型和视图交互。视图负责用户界面，模型代表业务逻辑和数据。虽然 MVC 模型适用于 API 开发，但 Razor Pages 专注于页面而不是 API。如果您打算使用 Angular 或 React 等前端框架，那么 MVC 将是一个合适的选择。Razor Pages 是允许轻松加载数据的网页，类似于 HTML 页面。它们与 ASP.NET MVC 的视图组件非常相似，具有相同的语法和功能。
【ajax+node.js+webpack+git】学习笔记---ajax01
最新发布
m0_67357141的博客
07-10 150
使用XMLHttpRequest对象与服务器通信。具有异步特性，可以不重新刷新页面的情况下与服务器通信，交换数据或更新页面。
Ajax与Fetch API在Web开发中的性能、用法与未来趋势比较
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
07-07 1016
headers: {},})Ajax和Fetch各有优缺点，适用于不同的场景。Ajax作为一种传统的技术，在旧的应用和环境中仍然广泛使用，并且具有较高的灵活性。而Fetch作为现代JavaScript中的API，提供了更简洁、功能更强大的方式来处理网络请求，特别适合使用在现代JavaScript应用中。开发者可以根据实际需求和场景选择合适的技术。
ASP.NET AJAX入门系列2
11-30
ASP.NET AJAX入门系列2主要介绍了如何在母版页中使用 UpdatePanel 控件。本文是翻译自官方文档，下面会详细描述如何添加 UpdatePanel 控件到 Content Page，并通过 Master Page 刷新 UpdatePanel。 在开始之前，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值