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事件处理中添加如下代码,注册两个按钮为异步提交按钮。

protected void Page_Load(object sender, EventArgs e)

{
    ScriptManager1.RegisterAsyncPostBackControl(DecrementButton);

    ScriptManager1.RegisterAsyncPostBackControl(IncrementButton);

}

6.添加如下代码创建一个MasterButton_Click事件处理。


            this.Offset = this.Offset - 1;

            break;
    }

    ((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();

    Calendar cal = ((Calendar)ContentPlaceHolder1.FindControl("Calendar1"));

    DateTime newDateTime = DateTime.Today.Add(new TimeSpan(Offset, 0, 0, 0));

    cal.SelectedDate = newDateTime;

}

7.在Master Page中创建一个公有的属性Offset,来显示所选择的日期和当天之差。

}

8.在Content Page中,切换到设计视图并双击Calendar控件添加一个SelectionChanged事件处理,当用户选择日期时设置Offset属性。

9.添加如下代码到SelectionChanged事件处理中。

protected void Calendar1_SelectionChanged(object sender,EventArgs e)
{
    DateTime selectedDate = Calendar1.SelectedDate;

    Master.Offset =

       ((TimeSpan)Calendar1.SelectedDate.Subtract(

       DateTime.Today)).Days;
}

10.在Content Page页面的Page_Load事件中添加如下代码。

protected void Page_Load(object sender, EventArgs e)
{
    DateTime newDateTime =

        DateTime.Today.Add(new

        TimeSpan(Master.Offset, 0, 0, 0));

    Calendar1.SelectedDate = newDateTime;
}

11.添加@ MasterType标记到页面中,以便可以作为强类型属性引用Master Page页面的Offset属性。

12.在Content Page中切换到设计视图,并选择UpdatePanel控件。

13.在属性窗口中设置UpdateMode为Conditional。

 

14.保存并按Ctrl + F5运行。

15.在Calendar控件中单击上一月和下一月按钮,可以看到整页刷新。

16.选择一个日期并单击Master Page中的按钮,可以看到仍然没有整页刷新。

[翻译自官方文档]

支持TerryLee的创业产品Worktile
Worktile,新一代简单好用、体验极致的团队协同、项目管理工具,让你和你的团队随时随地一起工作。完全免费,现在就去了解一下吧。
https://worktile.com
绿色通道: 好文要顶 关注我 收藏该文与我联系
1
0
(请您对文章做出评价)
posted @ 2006-11-13 18:00 TerryLee 阅读(22383) 评论(69) 编辑 收藏

  回复引用
#51楼 2007-12-24 10:50 蒋新[未注册用户]
15.在Calendar控件中单击上一月和下一月按钮,可以看到整页刷新。
这里是不是说错了.应是:"在Calendar控件中单击上一月和下一月按钮,可以看到没有整页刷新。"
  回复引用
#52楼 2008-05-07 14:02 Suker[未注册用户]
楼主的文章写得很好啊...关键在于很通俗...看了以后学到了不少东西呢~谢谢!!!
  回复引用
#53楼 2008-06-06 14:58 蜗牛身上的一只蚂蚁  
李大哥。我要问一个问 题。就是一个母版页中左边是TREEVIEW,,右边是要显示的GRIDVIEW(当然这是另一个页中的。是嵌入ContentPlaceHolder里 的),点击左边TreeView中的一个Node(Node有一个连接)。左边不刷新,右边(ContentPlaceHolder里)显示出 GridView,如何用UpdatePanel实现啊。。。。谢谢。再次感谢。。。。。
支持(0)反对(0)
  回复引用
#54楼 2008-06-18 17:59 wind-zx[未注册用户]
请问 UpdatePanel 中可以有几个
contenttemplate

contenttemplate与UpdatePanel 有什么关系? 谢谢
  回复引用
#55楼 2008-09-01 16:20 Peng_sunshine[未注册用户]
楼主,问个问题。我想在现有的asp.net web应用程序下使用局部刷新。
已按步骤完成ajax运行环境配置。之后在web应用程序中做如下改动:
1 web.config的配置
2 建立bin文件夹,添加System.Web.Extensions.dll以及AjaxControlToolkit.dll
3 在母版页中添加一个ScriptManager控件
4 在内容页中添加updatepanel并在UpdatePanel中的contenttemplate中加入一个table。

一开始页面没有问题,运行正常,但有时出现错误类型如下:
1 错误 36 无法识别的标记前缀或设备筛选器“__designer”。
2 错误 36 元素“UpdatePanel”不是已知元素。原因可能是网站中存在编译错误。
3 table里的代码都变成大写,没有分行显示。
但是运行一切正常,更奇怪的是错误1和2是有时出现。望老师抽空给予解答,发我邮箱,谢谢!
  回复引用
#56楼[楼主] 2008-09-01 22:05 TerryLee  
@Peng_sunshine
如果Web.config配置正常的花,应该不会有这些问题,感觉不像是程序的问题,可能跟你的环境有关。
支持(0)反对(0)
  回复引用
#57楼 2008-09-02 16:43 Peng_sunshine[未注册用户]
@TerryLee
对了 还有一个错误就是
验证 (Internet Explorer 6): 不支持元素“contenttemplate”。
我的webconfig配置参考了ajax网页里的

后来我建立了一个ajax网页 把我的普通asp.net web程序项目拷到了ajax下
在webconfig里只设置了sitemap 和connectionstring节点 其他没动。程序起初也是可以运行的,一切正常。 后来就出现了以前的错误。

还有我装了ajax futures ctp 可还是不行。
  回复引用
#58楼 2008-12-24 14:10 啊啊啊[未注册用户]
15.在Calendar控件中单击上一月和下一月按钮,可以看到整页刷新。

这句应该是整页没有刷新。
  回复引用
#59楼[楼主] 2008-12-25 15:13 TerryLee  
@啊啊啊
呵呵,其实本示例想测试的是在Master中使用UpdatePanel……
支持(0)反对(0)
  回复引用
#60楼 2008-12-30 11:01 pizixie[未注册用户]
呵呵 @TerryLee
你可真负责。。。 这么久的帖子你还会慢慢看。。。
  回复引用
#61楼[楼主] 2009-01-04 11:24 TerryLee  
@pizixie
我想尽量做到对每一个评论都回复,但有时候经常遗漏,所以还是不够负责,呵呵
支持(0)反对(0)
  回复引用
#62楼 2009-01-09 11:03 游客512[未注册用户]
狂顶!举例生动!
遗憾的是没有示例代码下载,还要自己编写代码,麻烦!!!!!
  回复引用
#63楼[楼主] 2009-01-12 11:25 TerryLee  
@游客512
没提供下载,就是想大家亲自动手做一下
支持(0)反对(0)
  回复引用
#64楼 2009-02-20 09:40 asp.net爱好者[未注册用户]
根据楼主的示例,再结合自己的实际修改下,可以只刷新母板页的UpdatePanel,也可以同步刷新,谢谢!
  回复引用
#65楼 2009-05-21 17:34 NightCat[未注册用户]
受楼主这句话指引,特回帖.
另,楼主文章写的很好,赞一个!

--引用--------------------------------------------------
TerryLee: @pizixie
我想尽量做到对每一个评论都回复,但有时候经常遗漏,所以还是不够负责,呵呵
--------------------------------------------------------
  回复引用
#66楼[楼主] 2009-05-22 13:44 TerryLee  
@NightCat
:P
支持(0)反对(0)
  回复引用
#67楼 2009-07-16 16:34 Aloner  
很郁闷外国人的写法。
为什么总喜欢先把OFFSET些出来,然后再去写OFFSET 属性?无语……
支持(0)反对(0)
  回复引用
#68楼 2009-07-16 16:34 Aloner  
很郁闷外国人的写法。
为什么总喜欢先把OFFSET些出来,然后再去写OFFSET 属性?无语……
支持(0)反对(0)
  回复引用
#69楼 2009-09-09 10:17 yuzhiwusfm  
为什么我做出来的在Calendar控件中单击上一月和下一月按钮,没有整页刷新