ASP.NET AJAX入门系列(9):在母版页中使用UpdatePanel

简介:




本文简单介绍一下在母版页中使用UpdatePanel控件,翻译自官方文档。

 
主要内容
1 .添加UpdatePanel控件到Content Page
2 .通过Master Page刷新UpdatePanel
 
一.添加UpdatePanel控件到Content-Page
1 .添加一个新的Master Page,并切换到设计视图。
2 .在工具箱中AJAX Extensions标签下双击ScriptManager控件添加到页面中,确保ScriptManager控件添加在ContentPlaceHolder控件之外。
3 .在ContentPlaceHolder控件添加文本“Master Page”。
4 .在工具箱的HTML标签下,拖动Horizontal Rule(横线)到文本之后,页面如下:
5 .创建一个Content Page,选择它的Master Page为我们刚才创建的页面。
在解决方案管理器中点击右键,并选择Add New Item菜单命令,在Add New Item对话框中选择Select master page复选矿,并单击OK按钮。
6 .在Content页面中的Content控件中输入Content Page,并添加一个UpdatePanel控件。
7 .在UpdatePanel控件中添加Calendar控件。
8 .保存并按Ctrl + F5运行。
9 .单击Calendar控件中的上月和下月按钮,页面并没有整页刷新。
二.通过Master Page刷新UpdatePanel
在该例子中我们将在Master Page中添加一些控件,它们将引发一个异步提交,同时在Content页面中刷新UpdatePanel
1 .在Master Page中切换到设计视图。
2 .添加一些文本和两个按钮到页面中,设置一个按钮的ID属性和Text属性分别为DecrementButton和“-”,设置另一个按钮的ID属性和Text属性分别为IncrementButton和“+”。
3 .选择+按钮,在属性窗口的Click事件框中输入MasterButton_Click,对-按钮再重复做一次。
4 .在控件之外双击页面添加Page_Load事件处理。
5 .在Page_Load事件处理中添加如下代码,注册两个按钮为异步提交按钮。
None.gif protected   void  Page_Load( object  sender, EventArgs e)
None.gif
ExpandedBlockStart.gif
{
InBlock.gif    ScriptManager1.RegisterAsyncPostBackControl(DecrementButton);
InBlock.gif
InBlock.gif    ScriptManager1.RegisterAsyncPostBackControl(IncrementButton);
InBlock.gif
ExpandedBlockEnd.gif}
6 .添加如下代码创建一个MasterButton_Click事件处理。
None.gif protected   void  MasterButton_Click( object  sender, EventArgs e)
ExpandedBlockStart.gif
{
InBlock.gif    
switch (((Control)sender).ID)
ExpandedSubBlockStart.gif    
{
InBlock.gif        
case "IncrementButton":
InBlock.gif
InBlock.gif            
this.Offset = this.Offset + 1;
InBlock.gif
InBlock.gif            
break;
InBlock.gif
InBlock.gif        
case "DecrementButton":
InBlock.gif
InBlock.gif            
this.Offset = this.Offset - 1;
InBlock.gif
InBlock.gif            
break;
ExpandedSubBlockEnd.gif    }

InBlock.gif
InBlock.gif    ((UpdatePanel)ContentPlaceHolder1.FindControl(
"UpdatePanel1")).Update();
InBlock.gif
InBlock.gif    Calendar cal 
= ((Calendar)ContentPlaceHolder1.FindControl("Calendar1"));
InBlock.gif
InBlock.gif    DateTime newDateTime 
= DateTime.Today.Add(new TimeSpan(Offset, 000));
InBlock.gif
InBlock.gif    cal.SelectedDate 
= newDateTime;
InBlock.gif
ExpandedBlockEnd.gif}
7 .在Master Page中创建一个公有的属性Offset,来显示所选择的日期和当天之差。
None.gif public  Int32 Offset
ExpandedBlockStart.gif
{
InBlock.gif    
get
ExpandedSubBlockStart.gif    
return (Int32)(ViewState["Offset"?? 0); }
InBlock.gif
InBlock.gif    
set
ExpandedSubBlockStart.gif    
{ ViewState["Offset"= value; }
ExpandedBlockEnd.gif}
8 .在Content Page中,切换到设计视图并双击Calendar控件添加一个SelectionChanged事件处理,当用户选择日期时设置Offset属性。
9 .添加如下代码到SelectionChanged事件处理中。
None.gif protected   void  Calendar1_SelectionChanged( object  sender,EventArgs e)
ExpandedBlockStart.gif
{
InBlock.gif    DateTime selectedDate 
= Calendar1.SelectedDate;
InBlock.gif
InBlock.gif    Master.Offset 
=
InBlock.gif
InBlock.gif       ((TimeSpan)Calendar1.SelectedDate.Subtract(
InBlock.gif
InBlock.gif       DateTime.Today)).Days;
ExpandedBlockEnd.gif}
10 .在Content Page页面的Page_Load事件中添加如下代码。
None.gif protected   void  Page_Load( object  sender, EventArgs e)
ExpandedBlockStart.gif
{
InBlock.gif    DateTime newDateTime 
=
InBlock.gif
InBlock.gif        DateTime.Today.Add(
new
InBlock.gif
InBlock.gif        TimeSpan(Master.Offset, 
000));
InBlock.gif
InBlock.gif    Calendar1.SelectedDate 
= newDateTime;
ExpandedBlockEnd.gif}
11 .添加@ MasterType标记到页面中,以便可以作为强类型属性引用Master Page页面的Offset属性。
ExpandedBlockStart.gif <% @ MasterType VirtualPath="MasterPage.master"  %>
12 .在Content Page中切换到设计视图,并选择UpdatePanel控件。
13 .在属性窗口中设置UpdateModeConditional
14 .保存并按Ctrl + F5运行。
15 .在Calendar控件中单击上一月和下一月按钮,可以看到整页刷新。
16 .选择一个日期并单击Master Page中的按钮,可以看到仍然没有整页刷新。








本文转自lihuijun51CTO博客,原文链接:  http://blog.51cto.com/terrylee/67719 ,如需转载请自行联系原作者

相关文章
|
6月前
|
JSON 前端开发 JavaScript
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
520 0
|
3月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
58 1
|
1月前
|
XML 开发框架 .NET
C# .NET面试系列八:ADO.NET、XML、HTTP、AJAX、WebService
## 第二部分:ADO.NET、XML、HTTP、AJAX、WebService #### 1. .NET 和 C# 有什么区别? .NET(通用语言运行时): ```c# 定义:.NET 是一个软件开发框架,提供了一个通用的运行时环境,用于在不同的编程语言中执行代码。 作用:它为多语言支持提供了一个统一的平台,允许不同的语言共享类库和其他资源。.NET 包括 Common Language Runtime (CLR)、基础类库(BCL)和其他工具。 ``` C#(C Sharp): ```c# 定义: C# 是一种由微软设计的面向对象的编程语言,专门为.NET 平台开发而创建。 作
174 2
|
3月前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
15 1
|
3月前
|
前端开发 JavaScript fastjson
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(上)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
24 1
|
4月前
|
XML 前端开发 JavaScript
AJAX概念及入门案例
AJAX概念及入门案例
22 0
|
6月前
|
JSON JavaScript 前端开发
开心档-软件开发入门之​​Vue.js Ajax(vue-resource)
开心档-软件开发入门之​​Vue.js Ajax(vue-resource)
25 0
|
3月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
42 0
|
1月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
99 5
|
8月前
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
116 0