且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)

更新时间:2021-12-16 13:57:12

     这篇博客主要是一个动态加载用户控件的实例,页面效果是当用户点击按钮时,出现日历控件(用户自定义控件,包括每个月的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日时日历出现的“发工资”的提示,代码如下:
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 1using System; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 2using System.Collections; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 3using System.Configuration; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 4using System.Data; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 5using System.Linq; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 6using System.Web; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 7using System.Web.Security; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 8using System.Web.UI; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 9using System.Web.UI.HtmlControls; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)10using System.Web.UI.WebControls; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)11using System.Web.UI.WebControls.WebParts; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)12using System.Xml.Linq; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)13 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)14public partial class WebUserControl : System.Web.UI.UserControl 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)15{ 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)16        protected void Page_Load(object sender, EventArgs e) 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)17        { 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)18 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)19        } 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)20        //DayRender:日历中显示的每一天都会运行该方法。 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)21        protected void Calendar1_DayRender(object sender, DayRenderEventArgs e) 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)22        {    
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)23                //单元格的垂直对齐方式为top 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)24                e.Cell.VerticalAlign = VerticalAlign.Top; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)25                if (e.Day.DayNumberText == "1"
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)26                { 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)27                        e.Cell.Controls.Add(new LiteralControl ("<p>发工资</p>")); 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)28                        e.Cell.BorderColor = System.Drawing.Color.Black; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)29                        e.Cell.BorderWidth = 1; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)30                        e.Cell.BorderStyle = BorderStyle.Double; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)31                        e.Cell.BackColor = System.Drawing.Color.LightGray; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)32                } 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)33        } 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)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代码,
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 1using System; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 2using System.Collections; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 3using System.Configuration; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 4using System.Data; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 5using System.Linq; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 6using System.Web; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 7using System.Web.Security; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 8using System.Web.UI; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例) 9using System.Web.UI.HtmlControls; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)10using System.Web.UI.WebControls; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)11using System.Web.UI.WebControls.WebParts; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)12using System.Xml.Linq; 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)13 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)14public partial class DynamicLoadControl : System.Web.UI.Page 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)15{ 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)16        protected void Page_Load(object sender, EventArgs e) 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)17        { 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)18             
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)19        } 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)20        //这个方法先于page_load之前执行,也在控件初始化前执行 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)21        protected void Page_Init(object sender, EventArgs e) 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)22        { 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)23                //从送来的参数中,判断用户控件是否已经加载,"Dynamic_UserControl_Hidden1"是个标志, 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)24                //为true时,代表用户控件存在,初次加载页面时,表示是false,故没有用户控件出现在网页上 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)25                if (Request.Params["Dynamic_UserControl_Hidden1"] == " true"
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)26                        LoadDynamicUserControl(); 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)27 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)28        } 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)29        //点击按钮出现用户自定义控件 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)30        protected void Button1_Click(object sender, EventArgs e) 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)31        { 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)32                //当用户自定义控件(标志为true)存在时,就移除到自定义控件,同时标志改为false。 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)33                if (Request.Params["Dynamic_UserControl_Hidden1"] == "true"
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)34                { 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)35                        UpdatePanel1.ContentTemplateContainer.Controls.Remove(UpdatePanel1.ContentTemplateContainer.FindControl("WebUserControl1")); 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)36                        HtmlInputHidden hidden = (HtmlInputHidden)UpdatePanel1.ContentTemplateContainer.FindControl("Dynamic_UserControl_Hidden1"); 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)37                        hidden.Value = "false"
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)38 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)39                } 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)40                        //否则就加载用户自定义控件 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)41                else 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)42                        LoadDynamicUserControl(); 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)43        } 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)44        //加载用户自定义控件 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)45        private void LoadDynamicUserControl() 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)46        { 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)47                //当Updatepanel中没有用户控件时 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)48                if (UpdatePanel1.ContentTemplateContainer.FindControl("WebUserControl1") == null
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)49                { 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)50                        //根据指定的WebUserControl.ascx路径加载控件WebUserControl1 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)51                        Control c = LoadControl("WebUserControl.ascx"); 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)52                        c.ID = "WebUserControl1"
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)53                        //找到标志将其值改为true 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)54                        HtmlInputHidden hidden =(HtmlInputHidden ) UpdatePanel1.ContentTemplateContainer.FindControl("Dynamic_UserControl_Hidden1"); 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)55                        hidden.Value = "true"
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)56                        //在Updatepanel中加入用户控件 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)57                        UpdatePanel1.ContentTemplateContainer.Controls.Add(c);             
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)58                } 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)59        } 
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)60         
ASP.net中的AJAX学习记录五:动态加载用户控件(Calendar控件为例)61}
本文转自叶子文文博客51CTO博客,原文链接http://blog.51cto.com/leafwf/185631如需转载请自行联系原作者

叶子文文