接上一篇日曆插件FullCalendar應用：(一)數據展現。這一篇主要講使用fullcalendar插件如何做數據的增刪改，用到了art.dialog web對話框組件，上一篇用到的webForm來展現數據，這一篇使用mvc模式來對數據進行增刪改查。1、準備工作本人用的SQLServer2012，...

接上一篇日曆插件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];
            }
        }
    }

View Code

然後添加泛型類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: '&#x3c;上月',
        nextText: '下月&#x3e;',
        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進行刪除。

好了，以上就是本文章的主要內容，本文其實上周就應該寫完發佈的，最近有點兒忙，元旦回來後趕緊把這篇補上，這個插件就講到這裡，文章中很多代碼都沒有過多的處理，簡單的把增刪改查寫了寫，提供一個小小的思路，可能在您以後的工作中會用到此插件，如果能幫助到您，我將倍感榮幸，如有不足，請多多指正，在下感激不盡。。。

最後一定要分享源碼：https://yunpan.cn/cu8Fn5CV3VsRD 訪問密碼 163b

日曆插件FullCalendar應用：(二)數據增刪改

1、準備工作

2、任務查看

3、任務的添加操作

4、任務的編輯操作

4、任務的刪除操作