.NET的Calendar控件+AJAX打造简单版日历备忘录
日历备忘录功能在很多办公系统中经常用到，日历备忘录的基本功能应该至少涵盖录入备忘录信息、显示对应日期的备忘录信息两大功能。有时追求操作的简洁性，希望在单一操作界面中实现所有功能，特别是在网站系统中，在某个区域显示一个日历表，所有操作都基于它完成：点击日期能弹出录入框录入备忘录信息，鼠标移动到日期上能显示此日的备忘录信息，这时可以尝试使用.NET中的Calendar日历控件+AJAX来实现。
主要思路：①初始化Calendar时，在Calendar的DayRender事件中从数据库中将日期的备忘录信息读出并且赋值在控件或Html标签自定义属性中；②通过JS访问自定义属性，得到日期和备忘录信息，当鼠标移动到日历上时触发onmouseover事件将信息显示；③当点击Calendar上的日期时，触发onclick事件，弹出输入框，点击"保存"时，AJAX异步发送备忘录信息到服务器指定页面，服务器接收到信息后将信息保存在数据库中
一、改造日历控件:
①.改变外观：Calendar本身的样子有待改进，这里就简单改改:
EnableViewState="true" OnPreRender="calendar_PreRender" ToolTip="日历备忘录"
BorderStyle="Solid" SelectionMode="None">
BorderWidth="1px" />
②. PreRender事件(改变星期显示)
protected void calendar_PreRender(object sender, EventArgs e)
{
Thread t = Thread.CurrentThread;
System.Globalization.CultureInfo c = (System.Globalization.CultureInfo)t.CurrentCulture.Clone();
c.DateTimeFormat.DayNames = new string[] { "日", "一", "二", "三", "四", "五", "六" };
c.DateTimeFormat.FirstDayOfWeek = DayOfWeek.Monday;
t.CurrentCulture = c;
}
③.DayRender事件处理函数(将备忘录信息绑定到对应的日期上):
protected void calendar_DayRender(object sender, DayRenderEventArgs e)
{
if (e.Day.IsOtherMonth) //当日期不在当前月份中时不显示
{
e.Cell.Controls.Clear();
}
else
{
string userName = "小明";
e.Cell.Attributes.Add("style", "cursor:pointer;");
e.Cell.Attributes.Add("thisTime", e.Day.Date.ToString("yyyy-MM-dd"));
e.Cell.Attributes.Add("onclick", "showInputMsg()");
Literal ltl = new Literal();
//从数据库查询出该日期下的备忘录信息,//截取前3个文字做标题显示
string msg = "";
msg = GetMsgToCalender(userName, e.Day.Date);
if (!string.IsNullOrEmpty(msg))
{
string tag = "";
if (msg.Length >= 3)
{
tag = msg.Substring(0, 3);
}
else
{
tag = msg;
}
if (!string.IsNullOrEmpty(msg))
{
ltl.Text = "
" + tag + "";
e.Cell.Controls.Add(ltl);
}
}
}
}
效果:
二、JS事件处理:
1.鼠标移动到日历上显示信息的函数showMsg():
这里利用了Calender的ToolTip属性（其实是Calender呈现的table的title）来显示信息，但是信息是通过读取触发事件的对象的自定义属性msg来获得的。
function showMsg() {
var obj = event.srcElement ? event.srcElement : event.target;
var ddd = document.getElementById("calendar");
var thisTime = obj.attributes["thisTime"].nodeValue;
var userName = document.getElementById("hfUser");
var msg = obj.attributes["msg"].nodeValue;
ddd.title = msg;
};
2.点击输入备忘录:
①.输入框DIV:
时间:
关闭
内容:
②.显示输入框
function showInputMsg() {
var obj = event.srcElement ? event.srcElement : event.target;
var thisTime = obj.attributes["thisTime"].nodeValue;
aTime.innerHTML = thisTime.toString();
conentall();
};
③.使用AJAX异步发送数据:
function InputMsg() {
var msg = document.getElementById("txtMsg");
var aTime = document.getElementById("aTime");
var userName = document.getElementById("hfUser");
if (msg.value == "") {
alert("内容不能为空!");
}
else {
CreatexmlHttp();
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if (xmlHttp.responseText == "1") {
alert("保存成功!");
}
else {
alert("保存失败!");
}
}
}
};
xmlHttp.open("POST", "inputMsg.ashx", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=gb2312");
var param = "userName=" + userName.value + "&thisTime=" + aTime.innerHTML + "&msg=" + msg.value;
xmlHttp.send(param);
}
};
④.取消输入，隐藏输入框
function exitInputMsg() {
var msg = document.getElementById("txtMsg");
msg.value = "";
var aTime = document.getElementById("aTime");
aTime.innerHTML = "";
tagnone();
};
function tagnone() {
document.getElementById("tipDiv").style.display = "none";
};
效果:
三、SERVER端将信息录入到数据库中:
inputMsg.ashx页面:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string userName = context.Request["userName"];
string thisTime = context.Request["thisTime"];
string msg = context.Request["msg"];
DateTime MsgWarnTime = DateTime.Parse(thisTime);
T_UserWarn thisWarn = new T_UserWarn();
thisWarn.UserName = userName;//用户名
thisWarn.Message = msg;//备忘录内容
thisWarn.MsgWarnTime = MsgWarnTime;//提醒日期
thisWarn.MsgWritedTime = DateTime.Parse(DateTime.Now.Year.ToString() + "-" + DateTime.Now.Month.ToString() + "-"+DateTime.Now.Day.ToString());//写时日期
string sql = "select Id from T_UserWarn where UserName=@UserName and MsgWarnTime=@MsgWarnTime";
List
parameters.Add(new SqlParameter("UserName", thisWarn.UserName));
parameters.Add(new SqlParameter("Message", thisWarn.Message));
parameters.Add(new SqlParameter("MsgWarnTime", thisWarn.MsgWarnTime));
parameters.Add(new SqlParameter("MsgWritedTime", thisWarn.MsgWritedTime));
DataSet ds = SQLDBHelper.Query(sql, parameters);
if ((null != ds) && (ds.Tables[0].Rows.Count > 0))
{
long ID =Convert.ToInt64(ds.Tables[0].Rows[0]["Id"]);
parameters.Add(new SqlParameter("Id", ID));
sql = "update T_UserWarn set Message=@Message,MsgWritedTime=@MsgWritedTime where Id=@Id";
}
else
{
sql = "insert into T_UserWarn(UserName,Message,MsgWarnTime,MsgWritedTime) values(@UserName,@Message,@MsgWarnTime,@MsgWritedTime)";
}
int N = SQLDBHelper.ExecuteNonQuery(sql,parameters);
string result = "0";
if (N == 1)
{
result = "1";
}
context.Response.Write(result);
}
具体代码可参考本站下载资源http://download.csdn.net/download/jo_andy/6558727
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！