ASP.NET AJAX入门系列：在母版页中使用UpdatePanel

======================================================
注：本文源代码点此下载
======================================================

[翻译自官方文档]

作者:terrylee

出处:http://terrylee.cnblogs.com

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

本文简单介绍一下在母版页中使用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事件处理。

protected void masterbutton_click(object sender, eventargs e)

{

switch (((control)sender).id)

{

case "incrementbutton":

this.offset = this.offset + 1;

break;

case "decrementbutton":

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,来显示所选择的日期和当天之差。

public int32 offset

{

get

{ return (int32)(viewstate["offset"] ?? 0); }

set

{ viewstate["offset"] = value; }

}

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中的按钮,可以看到仍然没有整页刷新。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/