接上一篇 日歷插件FullCalendar應用：(一)數據展現。
這一篇主要講使用fullcalendar插件如何做數據的增刪改，用到了art.dialog web對話框組件，上一篇用到的webForm來展現數據，這一篇使用mvc模式來對數據進行增刪改查。
1、准備工作
本人用的SQLServer2012，首先創建任務數據庫 Task：
USE [TestDemo] GO SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[Task]( [ID] [nvarchar](50) NOT NULL, [Name] [nvarchar](50) NULL, [Contents] [nvarchar](max) NULL, [StartDate] [datetime] NULL, [EndDate] [datetime] NULL, CONSTRAINT [PK_Task] PRIMARY KEY CLUSTERED ( [ID] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY] GO
創建MVC解決方案，此時mvc模式不再贅述，相信大家都會如何運用，然后把上篇文章用到的css以及js文件添加到本解決方案中。
在首頁Index頁面中引入文件以及添加div：(日歷展現方式與之前相同)
<link href="../../Content/css/fullcalendar.css" rel="stylesheet" /> <link href="../../Content/css/jquery.ui.css" rel="stylesheet" /> <link href="../../Content/css/style.default.css" rel="stylesheet" /> <script src="../../Scripts/Plugins/jquery-1.7.min.js"></script> <script src="../../Scripts/Plugins/jquery-ui-1.8.16.custom.min.js"></script> <script src="../../Scripts/Plugins/fullcalendar.min.js"></script> <script src="../../Scripts/Plugins/fullcalendar.js"></script> <div id='calendar' style="margin-top:10px;margin-left:5px"> </div>
創建任務類：
/// <summary> /// 任務類 /// </summary> public class Task { public string ID { get; set; } /// <summary> /// 任務名稱 /// </summary> public string Name { get; set; } /// <summary> /// 內容 /// </summary> public string Contents { get; set; } /// <summary> /// 開始時間 /// </summary> public DateTime? StartDate { get; set; } /// <summary> /// 結束時間 /// </summary> public DateTime? EndDate { get; set; } }
2、任務查看
任務查看上篇已經介紹，不再過多的講述，由於實現方式發生了改變所以簡單的提一下，把數據表中的數據查詢出來然后展現在fullcalendar上，我用ado.net來對數據進行操作，首先創建CommonDbHelper類：
public class CommonDbHelper { #region 屬性 /// <summary> /// 數據庫連接字符串 /// </summary> private string connectionString; public string ConntionString { get { return connectionString; } set { connectionString = value; } } #endregion #region 構造方法 /// <summary> /// 從配置中自動讀取數據庫類型及連接字符串 /// </summary> public CommonDbHelper() { this.connectionString = ConfigurationManager.AppSettings["ConnectionString"]; } #endregion /// <summary> /// 執行查詢語句 /// </summary> /// <param name="SqlString">查詢語句</param> /// <returns>DataTable </returns> public DataTable ExecuteQuery(string sqlString) { using (IDbConnection iConn = new SqlConnection(this.ConntionString)) { DataSet ds = new DataSet(); try { System.Data.IDataAdapter iAdapter = new SqlDataAdapter(sqlString, (SqlConnection)iConn); iAdapter.Fill(ds); } catch (System.Exception e) { throw new Exception(e.Message); } finally { if (iConn.State != ConnectionState.Closed) { iConn.Close(); } } return ds.Tables[0]; } } }
然后添加泛型類SQLHelper通過反射把查詢出來的DataTable轉換為list：
public class SQLHelper<Tentity> where Tentity : class,new() { /// <summary> /// 獲取所有數據 /// </summary> /// <returns></returns> public IList<Tentity> GetData(string statement) { var dt = new CommonDbHelper().ExecuteQuery(statement); if (dt == null || dt.Rows.Count == 0){ return null; } IList<Tentity> list = new List<Tentity>(dt.Rows.Count); // 獲得此模型的類型 Type type = typeof(Tentity); string tempName = ""; foreach (DataRow dr in dt.Rows) { Tentity t = new Tentity(); // 獲得此模型的公共屬性 PropertyInfo[] propertys = t.GetType().GetProperties(); foreach (PropertyInfo pi in propertys) { // 檢查DataTable是否包含此列 tempName = pi.Name; if (dt.Columns.Contains(tempName)) { if (!pi.CanWrite) continue; object value = dr[tempName]; if (value != DBNull.Value) pi.SetValue(t, value, null); } } list.Add(t); } return list; } }
在查詢所有數據時只需要這樣寫然后foreach循環就可以了：
SQLHelper<Task> dataHelper = new SQLHelper<Task>(); string strcom = "SELECT * FROM Task"; IList<Task> tasks = dataHelper.GetData(strcom);
3、任務的添加操作
添加頁面信息，新增Edit界面：
@model MvcApplication1.Models.Task <script type="text/javascript"> $(function () { $("#start").datetimepicker({ hour: 5, minute: 20 }); $("#end").datetimepicker({ hour: 13, minute: 15 }); }); </script> <div> <form id="myForm" method="post" action=""> <div class="aboxmanageform"> <table style="width:650px"> <tr> <td class="item_title"> 任務名稱： </td> <td colspan="3"> <input id="Name" name="Name" type="text" style="width:516px" value="@Model.Name" class="longinput" /> </td> </tr> <tr> <td class="item_title"> 任務內容： </td> <td colspan="3"> <textarea cols="80" name="Contents" id="Contents" rows="10" style="width:516px" class="longinput">@Model.Contents</textarea> </td> </tr> <tr> <td class="item_title"> 開始時間： </td> <td> <input id="start" name="StartDate" type="text" value="@Model.StartDate" class="longinput" /> </td> <td class="item_title"> 結束時間： </td> <td> <input id="end" name="EndDate" type="text" value="@Model.EndDate" class="longinput" /> </td> </tr> </table> <input type="hidden" name="ID" value="@Model.ID" /> </div> </form> </div>
在fullcalendar.js文件里 初始化calendar的方法中有dayClick方法，此方法在點擊日歷的時可進行自己想要的操作。我希望在點擊日歷的時候彈出可添加任務的對話框，在填寫信息之后點擊保存，把信息保存到數據庫，此刻就用到了art.dialog組件（具體的API以及如何使用可登陸官網自己學習http://lab.seaning.com/很容易掌握）
添加art.dialog的css、js 引用：
<link href="../../Content/css/default.css" rel="stylesheet" /> <script type="text/javascript" src="../../Scripts/Plugins/artDialog.js"></script>
在添加任務的時候需要有開始時間，結束時間。時間的選擇用到的是jqueryui的日期datepicker，但是在官網提供的資料中只能選擇日期，不能選擇小時，分等信息，然后在網上找到了一個插件可以選擇小時，分。在起始頁引入文件：
<script src="../../Scripts/Plugins/jquery-ui-timepicker-addon.js"></script>
在點擊日歷界面時彈出任務添加界面效果如下圖：
在選擇日期時是這樣顯示的：
是不是感覺很別扭？首先日期的月，星期都是英文展現，並且input中的格式為月、日、年顯示很別扭，所以對其進行漢化處理以及格式年月日的展現我把它放到了ui.datepicker.js文件中：
jQuery(function($){ $.datepicker.regional['zh-CN'] = { closeText: '關閉', prevText: '<上月', nextText: '下月>', currentText: '今天', monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'], monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'], dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], dayNamesMin: ['日','一','二','三','四','五','六'], dateFormat: 'yy-mm-dd', firstDay: 1, isRTL: false}; $.datepicker.setDefaults($.datepicker.regional['zh-CN']); });
在填寫完信息保存時用ajax，POST方法訪問InsertData.ashx一般處理程序通過ado.net方式來對數據進行插入：
var SaveDatas = function () { var name = $("#Name").val(); var contents = $("#Contents").val(); var startdatestr = $("#start").val(); var enddatestr = $("#end").val(); var mainid; //數據主鍵 var taskdata = { name: name, contents: contents, confshortname: 'M1', start: startdatestr, end: enddatestr }; $.ajax({ type: "POST", url: "../DateHandle/InsertData.ashx", data: taskdata, //要發送的數據 success: function (data) { //對話框里面的數據提交完成，data為操作結果 //data為主鍵ID mainid = data; var schdata2 = { title: name, fullname: name, confshortname: 'M1', start: startdatestr, end: enddatestr, id: mainid }; $('#calendar').fullCalendar('renderEvent', schdata2, true); $("#start").val(''); //開始時間 $("#end").val(''); //結束時間 $("#Name").val(''); //標題 } }); }
可能有人注意到了紅色部分，在保存成功后界面不會展現新添加的任務，所以要對其進行渲染操作。
4、任務的編輯操作
在fullcalendar.js文件里 初始化calendar的方法中有eventClick方法，此方法的用處就在於點擊日歷上的信息時執行自己想要的操作，在此無疑我們想要點擊某個任務來進行修改，fullcalendar屬性中有一個id(事件的唯一標識)，在上面添加的操作中我們已經把insert后返回的主鍵賦值給id，所以在點擊每個任務時，可以把id傳遞過去進行修改操作。
上面的編輯界面中我用到的實體對數據進行展現，所以在請求到Edit的Action時如果是新建操作則new 一個Task返回到界面，如果是編輯則查詢數據庫是否存在，如果存在則返回，Controller里的Edit方法：
[AcceptVerbs(HttpVerbs.Get)] public ActionResult Edit(string id) { if (!string.IsNullOrEmpty(id)) { SQLHelper<Task> dataHelper = new SQLHelper<Task>(); string str = string.Format("SELECT * FROM Task where ID ='{0}'", id); IList<Task> task = dataHelper.GetData(str); return PartialView(task[0]); } else return PartialView(Create()); } /// <summary> /// 創建初始化數據 /// </summary> /// <returns></returns> private static Task Create() { Task task = new Task(); task.Name = ""; task.Contents = ""; task.StartDate = null; task.EndDate = null; task.ID = null; return task; }
編輯界面：
在編輯完信息保存時用ajax，POST方法訪問UpdateData.ashx一般處理程序通過ado.net方式來對數據進行更新：
var SaveEditDatas = function (event) { var startdatestr = $("#start").val(); //開始時間 var enddatestr = $("#end").val(); //結束時間 var name = $("#Name").val(); var contents = $("#Contents").val(); event.fullname = name; event.start = startdatestr; event.end = enddatestr; var schdata = { name: name, contents: contents, start: startdatestr, end: enddatestr, id: event.id }; $.ajax({ type: "POST", url: "../DateHandle/UpdateData.ashx", data: schdata, //要發送的數據 success: function (data) { $('#calendar').fullCalendar('updateEvent', event); } }); }
同樣的，紅色部分也需要注意在修改完之后要通過updateEvent進行更新
4、任務的刪除操作
在上面的編輯操作中有一個刪除按鈕，在點開任務時，點擊此按鈕進行刪除。同樣的，把主鍵ID傳遞給DeleteData.ashx一般處理程序通過ado.net方式對數據進行刪除。
$.ajax({ type: "POST", url: "../DateHandle/DeleteData.ashx", data: para, success: function (data) { $('#calendar').fullCalendar('removeEvents', event.id); } });
刪除完之后要通過removeEvents進行刪除。
好了，以上就是本文章的主要內容，本文其實上周就應該寫完發布的，最近有點兒忙，元旦回來后趕緊把這篇補上，這個插件就講到這里，文章中很多代碼都沒有過多的處理，簡單的把增刪改查寫了寫，提供一個小小的思路，可能在您以后的工作中會用到此插件，如果能幫助到您，我將倍感榮幸，如有不足，請多多指正，在下感激不盡。。。
最后一定要分享源碼：http://files.cnblogs.com/files/crayoncode/MvcFullCalendar.rar