ASP.net中的AJAX学习记录五：动态加载用户控件（Calendar控件为例）

最新推荐文章于 2024-11-02 11:32:21 发布

weixin_33724659

最新推荐文章于 2024-11-02 11:32:21 发布

阅读量122

点赞数

文章标签： ui javascript ViewUI

原文链接：https://yq.aliyun.com/articles/427140

版权

这篇博客主要是一个动态加载用户控件的实例，页面效果是当用户点击按钮时，出现日历控件（用户自定义控件，包括每个月的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;

14public partial class WebUserControl : System.Web.UI.UserControl

15{

16 protected void Page_Load( object sender, EventArgs e)

17 {

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代码，