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

转载 2007年09月28日 10:52:00

本文简单介绍一下在母版页中使用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事件处理中添加如下代码,注册两个按钮为异步提交按钮。.添加如下代码创建一个MasterButton_Click事件处理。.在Master Page中创建一个公有的属性Offset,来显示所选择的日期和当天之差。.在Content Page中,切换到设计视图并双击Calendar控件添加一个SelectionChanged事件处理,当用户选择日期时设置Offset属性。

protected void Page_Load(object sender, EventArgs e)

{
    ScriptManager1.RegisterAsyncPostBackControl(DecrementButton);

    ScriptManager1.RegisterAsyncPostBackControl(IncrementButton);

}

6

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, 000));

    cal.SelectedDate 
= newDateTime;

}

7

public Int32 Offset
{
    
get
    
return (Int32)(ViewState["Offset"?? 0); }

    
set
    
{ ViewState["Offset"= value; }
}

8

9.添加如下代码到SelectionChanged事件处理中。.在Content Page页面的Page_Load事件中添加如下代码。.添加@ MasterType标记到页面中,以便可以作为强类型属性引用Master Page页面的Offset属性。

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

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

    Master.Offset 
=

       ((TimeSpan)Calendar1.SelectedDate.Subtract(

       DateTime.Today)).Days;
}

10

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

        DateTime.Today.Add(
new

        TimeSpan(Master.Offset, 
000));

    Calendar1.SelectedDate 
= newDateTime;
}

11

<%@ MasterType VirtualPath="MasterPage.master" %>

 

13.在属性窗口中设置UpdateModeConditional

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

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

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

 

【ASP.NET】利用UpdatePanel与ScriptManager完成局部的更新

ASP.NET中不仅可以像其它网页一样通过《【ASP.NET】利用jQuery与.ashx完成简单的Ajax》(点击打开链接)完成简单的局部更新, 在ASP.NET2.0版本(不含)之后,基本上在其...
  • yongh701
  • yongh701
  • 2016年01月08日 15:33
  • 2720

ASP.NET中使用UpdatePanel实现局部异步刷新方法和攻略

ASP.NET中使用UpdatePanel实现局部异步刷新方法和攻略 UpdatePanel局部刷新的使用 ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果...
  • chenhongwu666
  • chenhongwu666
  • 2014年11月22日 23:13
  • 49558

ASP.NET中UpdatePanel与jQuery同时使用所遇问题解决

在.NET中使用了UpdatePanel,里面的输入框使用了jQuery的日历选择器,接下来介绍下两者同时使用的一些细节及问题的解决方法,感兴趣的各位可以参考下哈 今天,在.NE...
  • GoodShot
  • GoodShot
  • 2015年05月24日 11:51
  • 783

ASP.NET中使用UpdatePanel实现局部异步刷新方法和攻略

asp.net UpdatePanel实现异步局部刷新 如有雷同,不胜荣欣,若转载,请注明 鉴于最近项目需要,研究了一下UpdatePanel控件的使用方法,现总结如下,可能有很多地方不足,还望大...
  • lllliulin
  • lllliulin
  • 2015年12月12日 17:23
  • 2429

在UpdatePanel上使用FileUpload上传文件

首先我很遗憾的告诉大家,因为微软的偷懒,目前UpdatePanel还不支持文件上传。我查了下,有两个办法,我已测试过了,真得很好用。 方案一的解决办法就是UpdatePanel中设置PostBack...
  • jixiaomeng821
  • jixiaomeng821
  • 2014年08月28日 21:31
  • 958

Ajax系列之三:UpdatePanel

UpdatePanel控件也是Ajax里用得最多的控件之一,UpdatePanel控件是用来局部更新网页上的内容,网页上要局部更新的内容必须放在UpdatePanel控件里,他必须和上一次说的Scri...
  • zhanghongjie0302
  • zhanghongjie0302
  • 2014年06月28日 22:10
  • 1677

NET使用了UpdatePanel后如何弹出对话框!

在ajax中的UpdatePanel弹出对话窗,可以使用: ScriptManager.RegisterStartupScript(UpdatePanel1, this.GetType(), "...
  • weibingbing_net
  • weibingbing_net
  • 2015年09月06日 11:08
  • 1087

ASP.NET AJAX 控件使用概述

一、ASP.NET AJAX 控件概述 借助 ASP.NET AJAX 控件,使用很少的客户端脚本或不使用客户端脚本就能创建丰富的客户端行为,如在异步回发过程中进行部分页更新(在回发时刷新网页的选定...
  • qustdjx
  • qustdjx
  • 2013年12月22日 20:44
  • 1730

UpdatePanel简单用法

ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果。其中的UpdatePanel就是设置页面中异步局部更新区域,它必须依赖于ScriptManager存在,因...
  • hejingyuan6
  • hejingyuan6
  • 2014年01月01日 10:12
  • 5627

【AJAX】——UpdatePanel控件的使用

简介     UpdatePanel是AJAX中的一个很实用的控件,它可以用来创建丰富的局部更新Web应用程序,它的强大之处在于不用编写任何客户端脚本,只要在一个页面上添加几个UpdatePanel控...
  • u013034793
  • u013034793
  • 2016年02月15日 21:36
  • 666
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ASP.NET AJAX入门系列(9):在母版页中使用UpdatePanel
举报原因:
原因补充:

(最多只允许输入30个字)