这篇博客主要是一个动态加载用户控件的实例,页面效果是当用户点击按钮时,出现日历控件(用户自定义控件,包括每个月的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日时日历出现的“发工资”的提示,代码如下:

1using System;

2using System.Collections;

3using System.Configuration;

4using System.Data;

5using System.Linq;

6using System.Web;

7using System.Web.Security;

8using System.Web.UI;

9using System.Web.UI.HtmlControls;

10using System.Web.UI.WebControls;

11using System.Web.UI.WebControls.WebParts;

12using System.Xml.Linq;

13

14public 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的客户端代码
1<head runat="server">
2 <title>无标题页</title>
3 <script type="text/javascript">
4 function pageLoad() {
5 }
6
7 </script>
8</head>
9<body>
10 <form id="form1" runat="server">
11 <div>
12
13 <asp:ScriptManager ID="ScriptManager1" runat="server">
14 </asp:ScriptManager>
15 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
16 <ContentTemplate>
17 <input ID="Dynamic_UserControl_Hidden1" type="hidden" runat="server" />
18 <asp:Button ID="Button1" runat="server" Text="…" onclick="Button1_Click"/>
19 </ContentTemplate>
20 <Triggers>
21 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
22 </Triggers>
23 </asp:UpdatePanel>
24 </div>
25 </form>
26</body>
27</html>
下面是cs代码,

1using System;

2using System.Collections;

3using System.Configuration;

4using System.Data;

5using System.Linq;

6using System.Web;

7using System.Web.Security;

8using System.Web.UI;

9using System.Web.UI.HtmlControls;

10using System.Web.UI.WebControls;

11using System.Web.UI.WebControls.WebParts;

12using System.Xml.Linq;

13

14public 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}
本文转自叶子文文博客51CTO博客,原文链接http://blog.51cto.com/leafwf/185631如需转载请自行联系原作者
叶子文文