ASP.net中的AJAX:动态加载用户控件（Calendar控件为例）

这篇博客主要是一个动态加载用户控件的实例，页面效果是当用户点击按钮时，出现日历控件（用户自定义控件，包括每个月的1日出现“发工资”的提示），对日历进行操作时，不影响整个页面（无刷新），当用户再次点击按钮时，用户控件卸载。以前我的一个日历的实例中也实现了这个效果，但是那时使用的是整体用户控件加载，并且不卸载功能，当用户点击按钮时，出现的日历出现和消失都是采用Visible方法，这无疑加重了页面的负担，今天学习到了这种方法，记录下来，供日后回顾。

　　首先我们先来布置页面：

　　1.在网站下添加新项用户控件，默认其页面名：WebUserControl.ascx

　　2.在WebUserControl.ascx中添加一个日历控件，按照自己喜欢的样式改变其外观。

　　这里我想说明两个Calendar控件的属性，让我们一起来重温Calendar控件，首先Calendar控件默认可以选择日期，可以使用SelectionMode属性修改这个选择操作，这个属性的值可以是Day（允许在日历中单击某个日期）、DayWeek（允许在日历中单击某个日期，同时可以单击星期旁边的箭头，选择整个星期）、DayWeekMonth（可以选择日期或星期，日历右上角的箭头允许选择整个月）、none（用户不能做任何操作）。接着：day属性的一个有用的功能是，可以把Day属性的IsSelectable设置为false，关闭选择某个日期或日期范围的选项。这个功能在实际开发中，可能会用到，代码如下：

　　if(e.Day.Date<DateTime.Now)

　　e.Day.IsSelectable=false;

　　3.编写每个月1日时日历出现的“发工资”的提示，代码如下：

　　日历提示功能代码

 

代码

1 using  System;
2 using  System.Collections;
3 using  System.Configuration;
4 using  System.Data;
5 using  System.Linq;
6 using  System.Web;
7 using  System.Web.Security;
8 using  System.Web.UI;
9 using  System.Web.UI.HtmlControls;
10 using  System.Web.UI.WebControls;
11 using  System.Web.UI.WebControls.WebParts;
12 using  System.Xml.Linq;
13
14 public   partial   class  WebUserControl : System.Web.UI.UserControl
15 {
16 　　 protected   void  Page_Load( object  sender, EventArgs e)
17 　　{
18
19 　　}
20 　　 // DayRender：日历中显示的每一天都会运行该方法。
21 　　 protected   void  Calendar1_DayRender( object  sender, DayRenderEventArgs e)
22 　　{
23 　　　　 // 单元格的垂直对齐方式为top
24 　　　　e.Cell.VerticalAlign  =  VerticalAlign.Top;
25 　　　　 if  (e.Day.DayNumberText  ==   " 1 " )
26 　　　　{
27 　　　　　　e.Cell.Controls.Add( new  LiteralControl ( " <p>发工资</p> " ));
28 　　　　　　e.Cell.BorderColor  =  System.Drawing.Color.Black;
29 　　　　　　e.Cell.BorderWidth  =   1 ;
30 　　　　　　e.Cell.BorderStyle  =  BorderStyle.Double;
31 　　　　　　e.Cell.BackColor  =  System.Drawing.Color.LightGray;
32 　　　　}
33 　　}
34 }

 

4.新建一个AJAX窗口，命名为：DynamicLoadControl.aspx，在页面中放置一个Updatepanel1。

　　5.在Updatepanel1中放入一个Button1，text=“…”（18行）。

　　6. 在Updatepanel1中放入一个html的hidden控件，将其改为服务器控件，id改为：Dynamic_UserControl_Hidden1（17行）。

　　页面布局介绍，下面我们来看一下DynamicLoadControl.aspx的客户端代

代码

< head runat = " server " >
　　 < title > 无标题页 </ title >
　　 < script type = " text/javascript " > 　
　　　function pageLoad() {
　　　}
　　
　　 </ script >
</ head >
< body >
　　 < form id = " form1 "  runat = " server " >
　　 < div >
　　
　　　　 < asp:ScriptManager ID = " ScriptManager1 "  runat = " server " >
　　　　 </ asp:ScriptManager >
　　　　 < asp:UpdatePanel ID = " UpdatePanel1 "  runat = " server "  UpdateMode = " Conditional " >
　　　　　　 < ContentTemplate >
　　　　　　　　 < input ID = " Dynamic_UserControl_Hidden1 "  type = " hidden "  runat = " server "   />
　　　　　　　　 < asp:Button ID = " Button1 "  runat = " server "  Text = " … "  onclick = " Button1_Click "   /> 　　　　　　　　
　　　　　　 </ ContentTemplate >
　　　　　　 < Triggers >
　　　　　　　　 < asp:AsyncPostBackTrigger ControlID = " Button1 "  EventName = " Click "   />
　　　　　　 </ Triggers >
</ asp:UpdatePanel >
</ div >
　　 </ form >
</ body >
</ html >

 

 

 

下面是cs代码，

　　动态加载用户控件代码

 

代码

1 using  System;
2 using  System.Collections;
3 using  System.Configuration;
4 using  System.Data;
5 using  System.Linq;
6 using  System.Web;
7 using  System.Web.Security;
8 using  System.Web.UI;
9 using  System.Web.UI.HtmlControls;
10 using  System.Web.UI.WebControls;
11 using  System.Web.UI.WebControls.WebParts;
12 using  System.Xml.Linq;
13
14 public   partial   class  DynamicLoadControl : System.Web.UI.Page
15 {
16 　　 protected   void  Page_Load( object  sender, EventArgs e)
17 　　{
18 　　　
19 　　}
20 　　 // 这个方法先于page_load之前执行，也在控件初始化前执行
21 　　 protected   void  Page_Init( object  sender, EventArgs e)
22 　　{
23 　　　　 // 从送来的参数中，判断用户控件是否已经加载，"Dynamic_UserControl_Hidden1"是个标志，
24 　　　　 // 为true时，代表用户控件存在，初次加载页面时，表示是false，故没有用户控件出现在网页上
25 　　　　 if  (Request.Params[ " Dynamic_UserControl_Hidden1 " ]  ==   "  true " )
26 　　　　　　LoadDynamicUserControl();
27
28 　　}
29 　　 // 点击按钮出现用户自定义控件
30 　　 protected   void  Button1_Click( object  sender, EventArgs e)
31 　　{
32 　　　　 // 当用户自定义控件（标志为true）存在时，就移除到自定义控件，同时标志改为false。
33 　　　　 if  (Request.Params[ " Dynamic_UserControl_Hidden1 " ]  ==   " true " )
34 　　　　{
35 　　　　　　UpdatePanel1.ContentTemplateContainer.Controls.Remove(UpdatePanel1.ContentTemplateContainer.FindControl( " WebUserControl1 " ));
36 　　　　　　HtmlInputHidden hidden  =  (HtmlInputHidden)UpdatePanel1.ContentTemplateContainer.FindControl( " Dynamic_UserControl_Hidden1 " );
37 　　　　　　hidden.Value  =   " false " ;
38
39 　　　　}
40 　　　　　　 // 否则就加载用户自定义控件
41 　　　　 else
42 　　　　　　LoadDynamicUserControl();
43 　　}
44 　　 // 加载用户自定义控件
45 　　 private   void  LoadDynamicUserControl()
46 　　{
47 　　　　 // 当Updatepanel中没有用户控件时
48 　　　　 if  (UpdatePanel1.ContentTemplateContainer.FindControl( " WebUserControl1 " )  ==   null )
49 　　　　{
50 　　　　　　 // 根据指定的WebUserControl.ascx路径加载控件WebUserControl1
51 　　　　　　Control c  =  LoadControl( " WebUserControl.ascx " );
52 　　　　　　c.ID  =   " WebUserControl1 " ;
53 　　　　　　 // 找到标志将其值改为true
54 　　　　　　HtmlInputHidden hidden  = (HtmlInputHidden ) UpdatePanel1.ContentTemplateContainer.FindControl( " Dynamic_UserControl_Hidden1 " );
55 　　　　　　hidden.Value  =   " true " ;
56 　　　　　　 // 在Updatepanel中加入用户控件
57 　　　　　　UpdatePanel1.ContentTemplateContainer.Controls.Add(c);　　　
58 　　　　}
59 　　}
60 　　
61 }

 

 

 

转载于:https://www.cnblogs.com/hendy/archive/2010/04/21/1717292.html