自己动手做WEB控件

    新年，把自己刚做的一个控件拿出来给大家分享，给自己动手做控件的朋友切磋切磋。 
    现在在山西长治带一帮童子军做一个警用地理信息系统，前期一直在做设计，现在项目刚刚进入编码阶段。一日有组员做一个数据录入界面，有日期输入字段。该老弟直接用一个TEXTBOX就完事了，我批评说应该使用日历控件让用户可以选择。 
    该老弟就在界面上直接拖了一个Calendar控件，我说你能不能做一个弹出式的，该老弟说微软没有提供弹出式的日历控件。我一查，果真如此，说那只能自己定义一个控件了。该老弟说不会。有项目组成员踊跃自荐，说他来做。我想想应该鼓励，就让他做了。晚上我来检查成果，他是提交了。他使用一个select和一个Calendar控件包装成了一个下拉式日历控件，具体源码如下： 
前台： 
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="dpList.ascx.cs" ClassName="dpList" Inherits="dpList" %> 
<style type="text/css" media="screen"> 
#floater { 
position: absolute; 
left: 10px; 
top: 46px; 
z-index: 1; 
} 
--> 
</style> 
<script language="javascript" type="text/javascript"> 
function show() 
{ 
document.getElementById("floater").style.display='inline'; 

} 
</script> 
<select onfocus="show()" style="width: 112px"  id="Select1" runat="server"> 
<option value="选择日期"> </option> 
</select> 
<div id="floater" style=" display:none;"> 
<asp:Calendar ID="Calendar1" 
    runat="server" BackColor="White" BorderColor="Black" 
    Font-Names="Times New Roman" Font-Size="10pt" ForeColor="Black" Height="220px" NextPrevFormat="FullMonth" Width="400px" OnSelectionChanged="Calendar1_SelectionChanged" DayNameFormat="Shortest" TitleFormat="Month"> 
    <SelectedDayStyle BackColor="#CC3333" ForeColor="White" /> 
    <TodayDayStyle BackColor="#CCCC99" /> 
    <DayStyle Width="14%" /> 
    <OtherMonthDayStyle ForeColor="#999999" /> 
    <NextPrevStyle Font-Size="8pt" ForeColor="White" /> 
    <DayHeaderStyle Font-Bold="True" Font-Size="7pt" ForeColor="#333333" Height="10pt" BackColor="#CCCCCC" /> 
    <TitleStyle BackColor="Black" Font-Bold="True" Font-Size="13pt" 
        ForeColor="White" Height="14pt" /> 
    <SelectorStyle BackColor="#CCCCCC" Font-Bold="True" Font-Names="Verdana" Font-Size="8pt" 
        ForeColor="#333333" Width="1%" /> 
</asp:Calendar> 
</div> 
后台： 
using System; 
using System.Data; 
using System.Configuration; 
using System.Collections; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 


public partial class dpList : System.Web.UI.UserControl 
{ 
    protected void Calendar1_SelectionChanged(object sender, EventArgs e) 
    { 
        Select1.Items[0].Value = Calendar1.SelectedDate.ToShortDateString(); 
        
    } 
} 

    应该说这是一个用户定义的控件，但是该老兄将代码提交给使用者的时候竟然不知道怎么样将选定的日期传出，要调用者使用会话变量去取。我想这也是初学者容易犯的一个错误。 
    在又好气又好笑的同时，我给他添加了一个GET/SET函数，解决了他的设置和取值的问题： 
    public DateTime myDate 
    { 
        get 
        { 
            return Calendar1.SelectedDate; 
        } 
        set 
        { 
            Calendar1.SelectedDate = value; 
            Select1.Items[0].Value = value.ToShortDateString(); 
          } 
    } 

    public string getDateString() 
    { 
        return Calendar1.SelectedDate.ToShortDateString(); 
    } 

    解决了设置和读取值的问题后，调用者开始接入界面，到调用人员调试界面的时候，问题开始出现：当界面上有几个日期控件的时候，所有的弹出的日历只能在第一个日期控件的位置下显示，所有的修改日期只能影响到第一个日期控件的值。 
    我看了看，只能一笑了之。这是因为他使用的是客户端的DIV和SELECT的原因，实例化后并没有生成不同的名称的标签。 
    叹了口气，我只能重做。 
    花了大约15分钟，重新制作了这个日期控件： 
前台： 
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="dpList.ascx.cs" Inherits="dpList" %> 

<div id="div1" runat="server" style="width: 268px; height: 20px; display: block; position: absolute; clear: none;"> 

    <asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged" Width="152px"> </asp:TextBox> 
    <asp:Button ID="Button1" runat="server" Font-Size="12px" ForeColor="Blue" OnClick="Button1_Click" Text="▼" TabIndex="-1" /> 

    <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="Black" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" 
    Height="189px" NextPrevFormat="ShortMonth" Width="263px" 
    OnSelectionChanged="Calendar1_SelectionChanged" OnVisibleMonthChanged="reOpen" Visible="False" BorderStyle="Solid" CellSpacing="1"> 
    <SelectedDayStyle BackColor="#333399" ForeColor="White" /> 
    <TodayDayStyle BackColor="#999999" ForeColor="White" /> 
    <OtherMonthDayStyle ForeColor="#999999" /> 
    <DayStyle BackColor="#CCCCCC" /> 
    <NextPrevStyle Font-Size="8pt" ForeColor="White" Font-Bold="True" /> 
    <DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" 
        Height="8pt" /> 
    <TitleStyle BackColor="#333399" Font-Bold="True" Font-Size="12pt" ForeColor="White" 
        Height="12pt" BorderStyle="Solid" /> 
</asp:Calendar> 
</div> 
&nbsp;&nbsp; 
后台： 
using System; 
using System.Data; 
using System.Configuration; 
using System.Collections; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 
using System.Text; 

/// <summary> 
///模块编号： <模块编号，可以引用系统设计中的模块编号> 
///编写日期：2010-02-07 
/// </summary> 
public partial class dpList : System.Web.UI.UserControl 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
        if (IsPostBack) 
        { 
            if (Calendar1.Visible) 
            { 
                Calendar1.Visible = false; 
                div1.Style.Value = "width: 268px; height: 20px; display: block; position: absolute; clear: none;"; 
            } 
        } 
    } 


    public DateTime myDate 
    { 
        get 
        { 
            return Calendar1.SelectedDate; 
        } 
        set 
        { 
            Calendar1.SelectedDate = value; 
            TextBox1.Text = value.ToString("yyyy-MM-dd"); 
        } 
    } 

    public string getDateString() 
    { 
        return Calendar1.SelectedDate.ToShortDateString(); 
    } 

    protected void Calendar1_SelectionChanged(object sender, EventArgs e) 
    { 
        TextBox1.Text = Calendar1.SelectedDate.ToString("yyyy-MM-dd"); 
        Calendar1.Visible = false; 
        div1.Style.Value = "width: 268px; height: 20px; display: block; position: absolute; clear: none;"; 
    } 

    protected void Button1_Click(object sender, EventArgs e) 
    { 
        Calendar1.Visible = true; 
        div1.Style.Value = "width: 268px; height: 180px; display: block; position: absolute; clear: none;"; 
    } 

    protected void TextBox1_TextChanged(object sender, EventArgs e) 
    { 
        if (TextBox1.Text.Trim() != "") 
        { 
            Calendar1.SelectedDate = Convert.ToDateTime(TextBox1.Text); 
        } 
    } 

    //选择月份重新打开的函数： 
    protected void reOpen(object sender, MonthChangedEventArgs e) 
    { 
        Calendar1.Visible = true; 
        div1.Style.Value = "width: 268px; height: 180px; display: block; position: absolute; clear: none;"; 
    } 
} 
然后又加上了TEXTBOX输入的检验控件，交付调用人员后基本可以使用了。 
在进一步测试的过程中又发现当客户端中弹出日历后从TEXTBOX直接失去焦点关闭不了日历，又花了两个多小时去修改。 
由于DIV没有失去焦点的事件，所以在处理的过程中花费了一些力气。 
本来是想直接提供源码给大家的，一来上面的代码可是使用，二来春节准备写该贴的时候儿子（中学生）说花了那么大的力气，应该可以收点费，于是就让儿子去淘宝注册了一个账号，当成宝贝来卖了，以资其游戏费用。 
下载完整源码请登录：http://item.taobao.com/auction/item_detail-0db2-6be85da63eee3578daab35dca554e380.jhtml# 
收费5元，也测试一下开源软件能否赢利。

1 个解决方案

#1

自定义日历控件，弹出日历或者选择日期不会引起页面重载；PS：编译前要添加Sytem.Web引用

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;


namespace MindyDate
{
    public class myCalendar : Control
    {
        private string _date = "";
        public enum DateLang { en, zh };
        private DateLang language = DateLang.en;
        public DateLang Language
        {
            get { return this.language; }
            set { this.language = value; }
        }
        private string format = DateFormat.format1;
        public string Format
        {
            get { return this.format; }
            set { this.format = value; }
        }


        public string Date
        {
            get { return this._date; }
            set { this._date = value; }
        }
        protected override void Render(HtmlTextWriter writer)
        {
            string imgPath = Page.ClientScript.GetWebResourceUrl(typeof(MindyDate.myCalendar), "MindyDate.calendar.jpg");
            string strControl = "<input onkeydown='return false';  type='text'  name='" + this.ID + "' id='" + this.ID + "'/><img src='" + imgPath + "' onmouseover='this.style.cursor=\"pointer\"'  onclick='activeCalendar(\"" + this.ID + "\",\"" + this.Language.ToString() + "\",this)'/><span id='dateSpan_" + this.ID + "' style='position:absolute;width:160px;height:180px;border:2px solid gray;background:#E5E7EB;visibility:hidden;margin:0 auto;'></span>";
            writer.Write(strControl);
        }
        protected override void OnLoad(EventArgs e)
        {
            if (Page.IsPostBack)
                this.Date = Page.Request[this.ID];
        }

        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            string resourceName = "MindyDate.client.js";
            ClientScriptManager cs = this.Page.ClientScript;
            cs.RegisterClientScriptResource(typeof(MindyDate.myCalendar), resourceName);

            string prevMonth = Page.ClientScript.GetWebResourceUrl(typeof(MindyDate.myCalendar), "MindyDate.calendar_prev.gif");
            string prevYear = Page.ClientScript.GetWebResourceUrl(typeof(MindyDate.myCalendar), "MindyDate.calendar_prevYear.gif");
            string nextMonth = Page.ClientScript.GetWebResourceUrl(typeof(MindyDate.myCalendar), "MindyDate.calendar_next.gif");
            string nextYear = Page.ClientScript.GetWebResourceUrl(typeof(MindyDate.myCalendar), "MindyDate.calendar_nextYear.gif");
            Page.ClientScript.RegisterStartupScript(typeof(MindyDate.myCalendar), "image", "<script type='text/javascript'>preImg_Month='" + prevMonth + "';preImg_Year='" + prevYear + "';nextImg_Month='" + nextMonth + "';nextImg_Year='" + nextYear + "'</script>");
        }
    }
}

var preImg_Month="";
var preImg_Year="";
var nextImg_Month="";
var nextImg_Year="";

function activeCalendar(inputControlID,language,imgObj)
{
  eval(inputControlID+"_obj=new createCalendarObject('"+inputControlID+"')");
  eval(inputControlID+"_obj.calendarSpan=imgObj.nextSibling");
  eval(inputControlID+"_obj.language='"+language+"'");
  eval(inputControlID+"_obj.showDateTable()");  
}
function showDateTable()
{
  if(this.calendarSpan.style.visibility=="hidden")
    this.calendarSpan.style.visibility="visible";
  else
    this.calendarSpan.style.visibility="hidden";
  this.calendarSpan.innerHTML="";
  this.calendarSpan.style.border="2px solid gray";
  this.createDateTable();
}

function createDateTable()
{
  var str="";
  var obj=this;
  str+="<table onmouseover='"+this.inputID+"_obj.stopTimer();' onmouseout='"+this.inputID+"_obj.startTimer()'>";
  var preMonth=this.month-1;
  if(preMonth<=0)
    preMonth=12;
  var nextMonth=this.month+1;
  if(nextMonth>12)
    nextMonth=1;
  str+="<tr><td align='center'><img title='"+Number(this.year-1)+"' onmouseover='this.style.cursor=\"pointer\"'  src='"+preImg_Year+"' onclick='"+this.inputID+"_obj.goToPrevYear()' /></td><td align='center'><img title='"+Number(preMonth)+"' onmouseover='this.style.cursor=\"pointer\"' src='"+preImg_Month+"'onclick='"+this.inputID+"_obj.goToPrevMonth()'   /></td><td colspan='3' align='center'>"+this.year+"/"+this.month+"</td><td align='center'><img title=\""+nextMonth+"\" onmouseover='this.style.cursor=\"pointer\"' src='"+nextImg_Month+"' onclick='"+this.inputID+"_obj.goToNextMonth()' /></td><td align='center'><img title='"+Number(this.year+1)+"' onmouseover='this.style.cursor=\"pointer\"' src='"+nextImg_Year+"' onclick='"+this.inputID+"_obj.goToNextYear()' /></td></td></tr>";//right
  var langRow="";
  if(this.language=="en")
    langRow="<tr><td>Su</td><td>Mo</td><td>Tu</td><td>We</td><td>Th</td><td>Fr</td><td>Sa</td></tr>";
  if(this.language=="zh")  
    langRow="<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>";
  str+=langRow;
  
  var monthDaysArr=[31,28,31,30,31,30,31,31,30,31,30,31];
  var dateObj=new Date(this.year,this.month-1,1);
  var firstDay=dateObj.getDay();
  var dayCountAtFirstRow=7-firstDay+1;
  var rowCount=0;
  var restDayCount=monthDaysArr[this.month-1]-dayCountAtFirstRow;
  
  var today=new Date();
  var todayDate=today.getDate();
  var todayYear=today.getFullYear();
  var todayMonth=today.getMonth()+1;
  
  if(restDayCount%7==0)
    rowCount=restDayCount/7+1;
  else
    rowCount=Math.floor(restDayCount/7)+2;
  for(var i=0;i<rowCount;i++)
  {
    if(i==0)
    {
      str+="</tr>";
      for(var k=1;k<=7;k++)
      {
        if(k<=firstDay)
          str+="<td></td>";
        else
        {
          if(this.year==todayYear&&this.month==todayMonth&&(k-firstDay)==todayDate)
            str+="<td align='center' style='background:red;' onmouseover='this.style.cursor=\"pointer\";this.style.borderLeft=\"1px solid gray\";this.style.borderTop=\"1px solid gray\";' onmouseout='this.style.borderLeft=\"0px solid white\";this.style.borderTop=\"0px solid white\";' onclick='"+this.inputID+"_obj.fillInDate(\""+(k-firstDay)+"\")'>"+(k-firstDay)+"</td>";//onmouseout='this.style.borderLeft=\"1px solid white\";this.style.borderTop=\"1px solid white\"'
          else
            str+="<td align='center' onmouseover='this.style.cursor=\"pointer\";this.style.borderLeft=\"1px solid gray\";this.style.borderTop=\"1px solid gray\";' onmouseout='this.style.borderLeft=\"0px solid white\";this.style.borderTop=\"0px solid white\";' onclick='"+this.inputID+"_obj.fillInDate(\""+(k-firstDay)+"\")'>"+(k-firstDay)+"</td>";//onmouseout='this.style.borderLeft=\"1px solid white\";this.style.borderTop=\"1px solid white\"'
        }
      }
      str+="</tr>";
    }
    else
    {
      str+="<tr>";
      for(var k=1;k<=7;k++)
      {
        var currentDay=(i-1)*7+k+dayCountAtFirstRow;
        if(currentDay<=Number(monthDaysArr[this.month-1]))
        {
          if(this.year==todayYear&&this.month==todayMonth&&currentDay==todayDate)
            str+="<td align='center' style='background:red;' onmouseover='this.style.cursor=\"pointer\";this.style.borderLeft=\"1px solid gray\";this.style.borderTop=\"1px solid gray\";' onmouseout='this.style.borderLeft=\"0px solid white\";this.style.borderTop=\"0px solid white\";'  onclick='"+this.inputID+"_obj.fillInDate(\""+currentDay+"\")'>"+currentDay+"</td>"
          else
            str+="<td align='center' onmouseover='this.style.cursor=\"pointer\";this.style.borderLeft=\"1px solid gray\";this.style.borderTop=\"1px solid gray\";' onmouseout='this.style.borderLeft=\"0px solid white\";this.style.borderTop=\"0px solid white\";'  onclick='"+this.inputID+"_obj.fillInDate(\""+currentDay+"\")'>"+currentDay+"</td>"
        }
      }
      str+="</tr>";
    }
  }
  str+="</table>";
  this.calendarSpan.innerHTML=str;
  this.stopTimer();
}

function goToPrevMonth()
{
  if(this.month>1)
    this.month--;
  else
  {
    this.month=12;
    this.year--;
  }
  this.createDateTable();
}

function goToPrevYear()
{
  this.year--;
  this.month=12;
  this.createDateTable();
}

function goToNextMonth()
{
  if(this.month<12)
    this.month++;
  else
  {
    this.month=1;
    this.year++;
  }
  this.createDateTable();
}
function goToNextYear()
{
  this.year++;
  this.month=1;
  this.createDateTable();
}



function fillInDate(date)
{
  this.inputControl.value=this.year+"-"+this.month+"-"+date;
  this.calendarSpan.style.visibility="hidden";
}

function startTimer()
{
  var obj=this;
  this.interval=setTimeout(function(){obj.calendarSpan.style.visibility="hidden"},3000);
}
function stopTimer()
{
  clearInterval(this.interval);
}




function createCalendarObject(inputControlID)
{
  this.inputID=inputControlID;
  this.language="en";
  this.format="YYYY-MM-DD";
  var today=new Date();
  this.year=today.getFullYear();
  this.month=today.getMonth()+1;
  this.date=today.getDate();
  this.day=today.getDay();
  this.calendarSpan=null;
  this.interval=null;
  this.inputControl=document.getElementById(this.inputID);
  
  
  this.createDateTable=createDateTable;
  this.goToPrevMonth=goToPrevMonth;
  this.goToPrevYear=goToPrevYear;
  this.goToNextMonth=goToNextMonth;
  this.goToNextYear=goToNextYear;
  this.showDateTable=showDateTable;
  this.fillInDate=fillInDate;
  this.startTimer=startTimer;
  this.stopTimer=stopTimer;
}