一個自定義的典型的CRUD示例

這是一個自定義小示例，包括bootstrap2的使用、模態（彈出）窗口、自定義分頁、CRUD、自定義數據表單驗證、時間控件等，僅供自己練手和有需要的新手朋友參考。

數據庫採用MySQL，創建表的語句如下：

/*
Navicat MySQL Data Transfer

Source Server         : localhost
Source Server Version : 50617
Source Host           : localhost:3306
Source Database       : freeride

Target Server Type    : MYSQL
Target Server Version : 50617
File Encoding         : 65001

Date: 2015-08-10 13:33:39
*/

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for `example_datatype`
-- ----------------------------
DROP TABLE IF EXISTS `example_datatype`;
CREATE TABLE `example_datatype` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `moneyType` double(11,2) DEFAULT NULL,
  `accountType` varchar(50) DEFAULT NULL,
  `urlType` varchar(50) DEFAULT NULL,
  `emailType` varchar(50) DEFAULT NULL,
  `telTyple` varchar(50) DEFAULT NULL,
  `mobilePhoneType` varchar(50) DEFAULT NULL,
  `ipType` varchar(50) DEFAULT NULL,
  `qqType` varchar(50) DEFAULT NULL,
  `idType` varchar(50) DEFAULT NULL,
  `postCodeType` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=33 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of example_datatype
-- ----------------------------
INSERT INTO `example_datatype` VALUES ('1', '2222222.22', 'fangrenlai1989', 'http://www.baidu.com', '[email protected]', '027-88776655', '13245679876', '192.168.1.1', '478586054', '421127198911335674', '436500');
INSERT INTO `example_datatype` VALUES ('7', '11.00', 'sss', 'ss', 'sss', null, null, null, null, null, null);
INSERT INTO `example_datatype` VALUES ('11', '11.00', 'ddd', 'dd', 'dddd', null, null, null, null, null, null);
INSERT INTO `example_datatype` VALUES ('22', '11.00', 'fff', 'fff', 'fff', null, null, null, null, null, null);
INSERT INTO `example_datatype` VALUES ('23', '22.22', 'df', 'df', 'df', null, null, null, null, null, null);
INSERT INTO `example_datatype` VALUES ('24', '333.00', 'hhh', 'hhh', 'hh', null, null, null, null, null, null);
INSERT INTO `example_datatype` VALUES ('25', '11.00', 'gg', 'ggg', 'gg', null, null, null, null, null, null);
INSERT INTO `example_datatype` VALUES ('26', '22.00', 'ff', 'ff', 'ff', null, null, null, null, null, null);
INSERT INTO `example_datatype` VALUES ('27', '22.00', 'rrr', 'rr', 'rr', null, null, null, null, null, null);
INSERT INTO `example_datatype` VALUES ('28', '444.00', 'fff', 'fff', 'fff', null, null, null, null, null, null);
INSERT INTO `example_datatype` VALUES ('29', '33.00', 'ddd', 'dd', 'dd', null, null, null, null, null, null);
INSERT INTO `example_datatype` VALUES ('30', '222.00', 'rrr', 'rr', 'rrr', null, null, null, null, null, null);
INSERT INTO `example_datatype` VALUES ('31', '444.00', 'yyy', 'yy', 'yy', null, null, null, null, null, null);
INSERT INTO `example_datatype` VALUES ('32', '11.00', 'dsfasf', 'http://localhost.com/CRUD/Index', '[email protected]', null, null, null, null, null, null);

後臺採用的是.net MVC4，Model類如下：

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

namespace Freeride.FRL.Model.Example
{
    /// <summary>
    /// 常見驗證數據類型實體類，2015年7月29日09:09:06，fangrenlai
    /// </summary>
    public class DataTypeModel
    {
        /// <summary>
        /// 主鍵ID
        /// </summary>
        public int Id { get; set; }

        /// <summary>
        /// 金額類型
        /// </summary>
        public double MoneyType
        { get; set; }

        /// <summary>
        /// 賬號類型
        /// </summary>
        public string AccountType
        { get; set; }

        /// <summary>
        /// URL類型
        /// </summary>
        public string UrlType
        { get; set; }

        /// <summary>
        /// 郵箱地址類型
        /// </summary>
        public string EmailType
        { get; set; }

        /// <summary>
        /// 固定電話類型
        /// </summary>
        public string TelTyple
        { get; set; }

        /// <summary>
        /// 移動手機號碼類型
        /// </summary>
        public string MobilePhoneType
        { get; set; }

        /// <summary>
        /// IP地址類型
        /// </summary>
        public string IpType
        { get; set; }

        /// <summary>
        /// QQ號碼類型
        /// </summary>
        public string QqType
        { get; set; }

        /// <summary>
        /// 身份證號碼類型
        /// </summary> 
        public string IdType
        { get; set; }

        /// <summary>
        /// 郵政編碼類型
        /// </summary>
        public string PostCodeType
        { get; set; }

    }
}

DAL層如下：

using Freeride.FRL.DBUtility;
using Freeride.FRL.Model.Example;
using MySql.Data.MySqlClient;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;

namespace Freeride.FRL.DAL.Example
{
    /// <summary>
    /// 常見驗證數據類型DAL層，2015年7月29日09:11:22，fangrenlai
    /// </summary>
    public class DataTypeDAL
    {
        /// <summary>
        /// 獲取符合條件的記錄數
        /// </summary>
        /// <param name="queryKey">查詢關鍵字</param>
        /// <returns></returns>
        public int GetTotalCount(string queryKey)
        {
            string countSQL = string.Format(@"select count(id) from example_datatype t where 1=1 ");
            if (!string.IsNullOrEmpty(queryKey))
            {
                countSQL += string.Format(" and t.accoutType like '%{0}%'", queryKey);
            }
            object obj = DbHelperMySQL.GetSingle(countSQL);
            if (obj == null)
            {
                return 0;
            }
            else
            {
                return Convert.ToInt32(obj);
            }
        }

        /// <summary>
        /// 獲取符合條件的每一頁數據，2015年7月29日13:08:01，fangrenlai
        /// </summary>
        /// <param name="queryKey">查詢關鍵字</param>
        /// <param name="sortName">排序名稱</param>
        /// <param name="sortOrder">升序/降序</param>
        /// <param name="currentPage">當前頁碼</param>
        /// <param name="pageSize">每頁顯示記錄數</param>
        /// <returns></returns>
        public List<DataTypeModel> RetrievePageData(string queryKey, string sortName, string sortOrder, string currentPage, string pageSize)
        {
            StringBuilder dataSQL = new StringBuilder();
            dataSQL.Append("select * from example_datatype t where 1=1 ");
            // 拼接過濾條件
            if (!string.IsNullOrEmpty(queryKey))
            {
                dataSQL.Append(string.Format(" and t.accountType like '%{0}%'", queryKey));
            }
            // 排序條件
            if (!string.IsNullOrEmpty(sortName) && !string.IsNullOrEmpty(sortOrder))
            {
                dataSQL.Append(string.Format(" order by t.{0} {1}", sortName, sortOrder));
            }
            // 分頁條件 limit (currentPage - 1) * pageSize,pageSize
            int from = (Int32.Parse(currentPage) - 1) * Int32.Parse(pageSize);
            int rows = Int32.Parse(pageSize);
            dataSQL.Append(string.Format(" limit {0},{1}", from, rows));
            DataSet pageSet = DbHelperMySQL.Query(dataSQL.ToString());
            if (null == pageSet || 0 >= pageSet.Tables[0].Rows.Count)
            {
                return null;
            }
            else
            {
                List<DataTypeModel> list = new List<DataTypeModel>();
                foreach (DataRow dr in pageSet.Tables[0].Rows)
                {
                    DataTypeModel newModel = new DataTypeModel();
                    newModel = Dr2Model(dr);
                    list.Add(newModel);
                }
                return list;
            }
        }

        /// <summary>
        /// DataRow數據轉換成model實體
        /// </summary>
        /// <param name="dr">DataRow數據</param>
        /// <returns></returns>
        private DataTypeModel Dr2Model(DataRow dr)
        {
            DataTypeModel newModel = new DataTypeModel();
            if (null != dr["id"] && !string.IsNullOrEmpty(dr["id"].ToString()))
            {
                newModel.Id = Int32.Parse(dr["id"].ToString());
            }
            else
            {
                newModel.Id = 0;
            }
            if (null != dr["moneyType"] && !string.IsNullOrEmpty(dr["moneyType"].ToString()))
            {
                newModel.MoneyType = Double.Parse(dr["moneyType"].ToString());
            }
            else
            {
                newModel.MoneyType = 0.00;
            }
            if (null != dr["accountType"] && !string.IsNullOrEmpty(dr["accountType"].ToString()))
            {
                newModel.AccountType = dr["accountType"].ToString();
            }
            else
            {
                newModel.AccountType = "";
            }
            if (null != dr["urlType"] && !string.IsNullOrEmpty(dr["urlType"].ToString()))
            {
                newModel.UrlType = dr["urlType"].ToString();
            }
            else
            {
                newModel.UrlType = "";
            }
            if (null != dr["emailType"] && !string.IsNullOrEmpty(dr["emailType"].ToString()))
            {
                newModel.EmailType = dr["emailType"].ToString();
            }
            else
            {
                newModel.EmailType = "";
            }
            if (null != dr["telTyple"] && !string.IsNullOrEmpty(dr["telTyple"].ToString()))
            {
                newModel.TelTyple = dr["telTyple"].ToString();
            }
            else
            {
                newModel.TelTyple = "";
            }
            if (null != dr["mobilePhoneType"] && !string.IsNullOrEmpty(dr["mobilePhoneType"].ToString()))
            {
                newModel.MobilePhoneType = dr["mobilePhoneType"].ToString();
            }
            else
            {
                newModel.MobilePhoneType = "";
            }
            if (null != dr["ipType"] && !string.IsNullOrEmpty(dr["ipType"].ToString()))
            {
                newModel.IpType = dr["ipType"].ToString();
            }
            else
            {
                newModel.IpType = "";
            }
            if (null != dr["qqType"] && !string.IsNullOrEmpty(dr["qqType"].ToString()))
            {
                newModel.QqType = dr["qqType"].ToString();
            }
            else
            {
                newModel.QqType = "";
            }
            if (null != dr["idType"] && !string.IsNullOrEmpty(dr["idType"].ToString()))
            {
                newModel.IdType = dr["idType"].ToString();
            }
            else
            {
                newModel.IdType = "";
            }
            if (null != dr["postCodeType"] && !string.IsNullOrEmpty(dr["postCodeType"].ToString()))
            {
                newModel.PostCodeType = dr["postCodeType"].ToString();
            }
            else
            {
                newModel.PostCodeType = "";
            }
            return newModel;
        }


        /// <summary>
        /// 根據ID獲取單個實體類
        /// </summary>
        /// <param name="id">記錄id</param>
        /// <returns></returns>
        public DataTypeModel RetrieveById(string id)
        {
            StringBuilder dataSQL = new StringBuilder();
            dataSQL.Append(string.Format(@"select * from example_datatype t where id = '{0}' ", id));
            DataSet ds = DbHelperMySQL.Query(dataSQL.ToString());
            if (null == ds || 0 == ds.Tables[0].Rows.Count)
            {
                return null;
            }
            else
            {
                return Dr2Model(ds.Tables[0].Rows[0]);
            }
        }


        /// <summary>
        /// 新增一條記錄
        /// </summary>
        /// <param name="model">待新增實體類</param>
        /// <returns></returns>
        public bool CreateModel(DataTypeModel model)
        {
            StringBuilder strSql = new StringBuilder();
            strSql.Append("insert into example_datatype(");
            strSql.Append("moneyType,accountType,urlType,emailType,telTyple,mobilePhoneType,ipType,qqType,idType,postCodeType)");
            strSql.Append(" values (");
            strSql.Append("@moneyType,@accountType,@urlType,@emailType,@telTyple,@mobilePhoneType,@ipType,@qqType,@idType,@postCodeType)");
            MySqlParameter[] parameters = {
					new MySqlParameter("@moneyType", MySqlDbType.Double,11),
                    new MySqlParameter("@accountType", MySqlDbType.VarChar,50),
					new MySqlParameter("@urlType", MySqlDbType.VarChar,50),
					new MySqlParameter("@emailType", MySqlDbType.VarChar,50),
					new MySqlParameter("@telTyple", MySqlDbType.VarChar,50),
					new MySqlParameter("@mobilePhoneType", MySqlDbType.VarChar,50),
					new MySqlParameter("@ipType", MySqlDbType.VarChar,50),
					new MySqlParameter("@qqType", MySqlDbType.VarChar,50),
					new MySqlParameter("@idType", MySqlDbType.VarChar,50),
                    new MySqlParameter("@postCodeType", MySqlDbType.VarChar,50)};
            parameters[0].Value = model.MoneyType;
            parameters[1].Value = model.AccountType;
            parameters[2].Value = model.UrlType;
            parameters[3].Value = model.EmailType;
            parameters[4].Value = model.TelTyple;
            parameters[5].Value = model.MobilePhoneType;
            parameters[6].Value = model.IpType;
            parameters[7].Value = model.QqType;
            parameters[8].Value = model.IdType;
            parameters[9].Value = model.PostCodeType;

            int rows = DbHelperMySQL.ExecuteSql(strSql.ToString(), parameters);
            if (rows > 0)
            {
                return true;
            }
            else
            {
                return false;
            }
        }


        /// <summary>
        /// 更新數據
        /// </summary>
        /// <param name="model">待更新實體類</param>
        /// <returns></returns>
        public bool UpdateModel(DataTypeModel model)
        {
            StringBuilder strSql = new StringBuilder();
            strSql.Append("update example_datatype set ");
            strSql.Append("moneyType=@moneyType,");
            strSql.Append("accountType=@accountType,");
            strSql.Append("urlType=@urlType,");
            strSql.Append("emailType=@emailType,");
            strSql.Append("telTyple=@telTyple,");
            strSql.Append("mobilePhoneType=@mobilePhoneType,");
            strSql.Append("ipType=@ipType,");
            strSql.Append("qqType=@qqType,");
            strSql.Append("idType=@idType,");
            strSql.Append("postCodeType=@postCodeType");
            strSql.Append(" where id=@id");
            MySqlParameter[] parameters = {
					new MySqlParameter("@moneyType", MySqlDbType.Double,11),
                    new MySqlParameter("@accountType", MySqlDbType.VarChar,50),
					new MySqlParameter("@urlType", MySqlDbType.VarChar,50),
					new MySqlParameter("@emailType", MySqlDbType.VarChar,50),
					new MySqlParameter("@telTyple", MySqlDbType.VarChar,50),
					new MySqlParameter("@mobilePhoneType", MySqlDbType.VarChar,50),
					new MySqlParameter("@ipType", MySqlDbType.VarChar,50),
					new MySqlParameter("@qqType", MySqlDbType.VarChar,50),
					new MySqlParameter("@idType", MySqlDbType.VarChar,50),
                    new MySqlParameter("@postCodeType", MySqlDbType.VarChar,50),
					new MySqlParameter("@id", MySqlDbType.Int32,11)};
            parameters[0].Value = model.MoneyType;
            parameters[1].Value = model.AccountType;
            parameters[2].Value = model.UrlType;
            parameters[3].Value = model.EmailType;
            parameters[4].Value = model.TelTyple;
            parameters[5].Value = model.MobilePhoneType;
            parameters[6].Value = model.IpType;
            parameters[7].Value = model.QqType;
            parameters[8].Value = model.IdType;
            parameters[9].Value = model.PostCodeType;
            parameters[10].Value = model.Id;

            int rows = DbHelperMySQL.ExecuteSql(strSql.ToString(), parameters);
            if (rows > 0)
            {
                return true;
            }
            else
            {
                return false;
            }
        }

        /// <summary>
        /// 批量刪除數據
        /// </summary>
        /// <param name="ids">待刪除記錄的id字符串，多個的話用逗號隔開</param>
        /// <returns></returns>
        public int DeleteByIds(string ids)
        {
            StringBuilder strSql = new StringBuilder();
            strSql.Append("delete from example_datatype ");
            strSql.Append(" where id in (" + ids + ")  ");
            int rows = DbHelperMySQL.ExecuteSql(strSql.ToString());
            return rows;
        }

    }
}

BLL層如下：

using Freeride.FRL.DAL.Example;
using Freeride.FRL.Model.Example;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace Freeride.FRL.BLL.Example
{
    /// <summary>
    /// 常見驗證數據類型BLL層，2015年7月29日09:12:26，fangrenlai
    /// </summary>
    public class DataTypeBLL
    {
        private DataTypeDAL dataTypeDAL = new DataTypeDAL();
        /// <summary>
        /// 獲取符合條件的記錄數，2015年7月29日10:54:06，方仁來
        /// </summary>
        /// <param name="queryKey"></param>
        /// <returns></returns>
        public int GetTotalCount(string queryKey)
        {

            return dataTypeDAL.GetTotalCount(queryKey);

        }


        /// <summary>
        /// 獲取符合條件的分頁數據，2015年7月29日10:54:06，方仁來
        /// </summary>
        /// <param name="queryKey">查詢關鍵字</param>
        /// <param name="sortName">排序名稱</param>
        /// <param name="sortOrder">升序/降序</param>
        /// <param name="currentPage">當前頁碼</param>
        /// <param name="pageSize">每頁顯示記錄數</param>
        /// <returns></returns>
        public List<DataTypeModel> RetrievePageData(string queryKey, string sortName, string sortOrder, string currentPage, string pageSize)
        {
            return dataTypeDAL.RetrievePageData(queryKey, sortName, sortOrder, currentPage, pageSize);
        }

        /// <summary>
        /// 根據ID獲取單個實體信息
        /// </summary>
        /// <param name="id">記錄id</param>
        /// <returns></returns>
        public DataTypeModel RetrieveById(string id)
        {
            return dataTypeDAL.RetrieveById(id);
        }

        /// <summary>
        /// 創建一個實體
        /// </summary>
        /// <param name="transModel">新增實體類</param>
        /// <returns></returns>
        public bool CreateModel(DataTypeModel transModel)
        {
            return dataTypeDAL.CreateModel(transModel);
        }

        /// <summary>
        /// 修改一個實體
        /// </summary>
        /// <param name="transModel">待修改實體類</param>
        /// <returns></returns>
        public bool UpdateModel(DataTypeModel transModel)
        {
            return dataTypeDAL.UpdateModel(transModel);
        }

        /// <summary>
        /// 批量刪除記錄
        /// </summary>
        /// <param name="ids">待刪除記錄的id字符串，多個的話用逗號隔開</param>
        /// <returns></returns>
        public int DeleteByIds(string ids)
        {
            return dataTypeDAL.DeleteByIds(ids);
        }
    }
}

Cotroller層如下：

using Freeride.FRL.BLL.Example;
using Freeride.FRL.Model.Example;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Freeride.FRL.Web.Controllers
{
    public class CRUDController : Controller
    {

        private readonly DataTypeBLL dataTypeBLL = new DataTypeBLL();
        /// <summary>
        /// 跳轉到主頁面
        /// </summary>
        /// <returns></returns>
        public ActionResult Index()
        {
            return View();
        }


        /// <summary>
        /// 獲取分頁數據，2015年7月29日10:33:35，fangrenlai
        /// </summary>
        /// <param name="queryKey">查詢關鍵字</param>
        /// <param name="sortName">排序名稱</param>
        /// <param name="sortOrder">升序/降序</param>
        /// <param name="currentPage">當前頁碼</param>
        /// <param name="pageSize">每頁顯示記錄數</param>
        /// <returns></returns>
        [HttpGet]
        public ActionResult RetrievePageData(string queryKey, string sortName, string sortOrder, string currentPage, string pageSize)
        {
            if (string.IsNullOrEmpty(pageSize) || string.IsNullOrEmpty(currentPage))
            {
                return Json(new { result = -1, msg = "錯誤的分頁參數" }, JsonRequestBehavior.AllowGet);
            }
            else
            {
                int totalCount = dataTypeBLL.GetTotalCount(queryKey);
                //int totalCount = 10;
                if (0 == totalCount)
                {
                    return Json(new { result = 0, msg = "沒有查詢到相關數據" }, JsonRequestBehavior.AllowGet);
                }
                else
                {
                    List<DataTypeModel> pageDataList = dataTypeBLL.RetrievePageData(queryKey, sortName, sortOrder, currentPage, pageSize);
                    int totalPage = 0;
                    if (0 == totalCount % Int32.Parse(pageSize))
                    {
                        totalPage = totalCount / Int32.Parse(pageSize);
                    }
                    else
                    {
                        totalPage = totalCount / Int32.Parse(pageSize) + 1;
                    }
                    return Json(new { result = 1, msg = "查詢到相關數據", data = pageDataList, totalCount = totalCount, currentPage = Int32.Parse(currentPage), totalPage = totalPage }, JsonRequestBehavior.AllowGet);
                }
            }
        }

        /// <summary>
        /// 遠程驗證新增的賬號信息
        /// </summary>
        /// <param name="createAccountType">待驗證的賬號信息</param>
        /// <returns></returns>
        [HttpGet]
        public ActionResult ValidCreateAccountType(string createAccountType)
        {
            // 默認通過驗證
            return Json(new { result = 0, msg = createAccountType }, JsonRequestBehavior.AllowGet);
        }

        /// <summary>
        /// 創建一條記錄
        /// </summary>
        /// <param name="transModel">新增實體</param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult DoCreate(DataTypeModel transModel)
        {

            if (null == transModel)
            {
                return Json(new { result = -1, msg = "錯誤的請求參數" });
            }
            else
            {
                bool result = dataTypeBLL.CreateModel(transModel);
                if (result)
                {
                    return Json(new { result = 1, msg = "創建成功" });
                }
                else
                {
                    return Json(new { result = 0, msg = "創建失敗" });
                }
            }

        }


        /// <summary>
        /// 修改一條記錄
        /// </summary>
        /// <param name="transModel">待修改實體</param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult DoUpdate(DataTypeModel transModel)
        {


            if (null == transModel)
            {
                return Json(new { result = -1, msg = "錯誤的請求參數" });
            }
            else
            {
                bool result = dataTypeBLL.UpdateModel(transModel);
                if (result)
                {
                    return Json(new { result = 1, msg = "修改成功" });
                }
                else
                {
                    return Json(new { result = 0, msg = "修改失敗" });
                }
            }
        }

        /// <summary>
        /// 根據ID獲取單個信息
        /// </summary>
        /// <param name="id">記錄主鍵id</param>
        /// <returns></returns>
        [HttpGet]
        public ActionResult RetrieveById(string id)
        {
            if (string.IsNullOrEmpty(id))
            {
                return Json(new { result = -1, msg = "錯誤的請求參數" }, JsonRequestBehavior.AllowGet);
            }
            else
            {
                DataTypeModel dataTypeModel = dataTypeBLL.RetrieveById(id);

                if (null == dataTypeModel)
                {
                    return Json(new { result = 0, msg = "沒有獲取到相關數據" }, JsonRequestBehavior.AllowGet);
                }
                else
                {
                    return Json(new { result = 1, msg = "獲取到相關數據", data = dataTypeModel }, JsonRequestBehavior.AllowGet);
                }
            }
        }

        /// <summary>
        /// 刪除記錄
        /// </summary>
        /// <param name="ids">待刪除記錄的id字符串，多個的話用逗號隔開</param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult DoDelete(string ids)
        {
            if (string.IsNullOrEmpty(ids))
            {
                return Json(new { result = -1, msg = "錯誤的請求參數" });
            }
            else
            {
                int rows = dataTypeBLL.DeleteByIds(ids);
                if (0 < rows)
                {
                    return Json(new { result = 1, msg = "成功刪除" + rows + "條數據" });
                }
                else
                {
                    return Json(new { result = 0, msg = "刪除失敗" });
                }
            }
        }
    }
}

頁面代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CRUD實例</title>
    <!-- 引入CSS -->
    <link href="~/Content/bootstrap2.3.2/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap_plugin/bootstrap-datetimepicker-0.0.11/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <link href="~/Content/selfDefine/dataForm.css" rel="stylesheet" />
    <!-- 引入JS -->
    <script src="~/Content/jquery1.9.1/jquery-1.9.1.min.js"></script>
    <script src="~/Content/bootstrap2.3.2/js/bootstrap.min.js"></script>
    <script src="~/Content/bootstrap_plugin/bootstrap-datetimepicker-0.0.11/js/bootstrap-datetimepicker.min.js"></script>
    <script src="~/Content/bootstrap_plugin/bootstrap-datetimepicker-0.0.11/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="~/Scripts/CRUD/crud.js"></script>
</head>
<body>
    <div class="container-fluid">
        <!-- start 查詢區域 -->
        <div class="form-inline" id="queryDIV" style="margin-top: 10px;">
            <div id="datetimepicker" class="input-append date">
                <input id="queryStartedAt" name="queryStartedAt" type="text"></input>
                <span class="add-on">
                    <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                </span>
            </div>
            <input id="retrieveBtn" type="button" class="btn btn-primary" value="查詢" />
        </div>
        <!-- end 查詢區域 -->
        <!-- start 操作區域 -->
        <div class="form-inline" id="operatorDIV" style="margin-top: 10px;">
            <input id="detailBtn" type="button" class="btn btn-success" value="詳情" />
            <input id="createBtn" type="button" class="btn" value="新增" />
            <input id="updateBtn" type="button" class="btn btn-warning" value="修改" />
            <input id="deleteBtn" type="button" class="btn btn-danger" value="刪除" />
        </div>
        <!-- end 操作區域 -->
        <!-- start 數據區域 -->
        <div id="dataDIV" style="margin-top: 10px; min-height: 410px;">
            <table id="dataTable" class="table table-bordered">
                <thead>
                    <tr>
                        <th>選擇</th>
                        <th>序號</th>
                        <th>主鍵ID</th>
                        <th>金額</th>
                        <th>賬號</th>
                        <th>URL</th>
                        <th>郵箱地址</th>
                        <th>固定電話</th>
                        <th>移動手機號碼</th>
                        <th>IP地址</th>
                        <th>QQ號碼</th>
                        <th>身份證號碼</th>
                        <th>郵政編碼</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <!-- end 數據區域 -->
        <!-- start 分頁隱藏區域 -->
        <div id="pageHiddenDIV" style="display: none;">
            <input type="hidden" value="1" id="currentPage" />
            <input type="hidden" value="10" id="pageSize" />
            <input type="hidden" value="0" id="totalPage" />
            <input type="hidden" value="0" id="totalCount" />
        </div>
        <!-- end 分頁隱藏區域 -->
        <!-- start 分頁信息區域 -->
        <div id="pageInfoDIV" class="pagination">
            <ul>
                <li><a href="javascript:void(0);" id="pageInfo">總共0條記錄，總共1頁，當前第1頁</a></li>
            </ul>
            <ul id="pageLinks">
            </ul>
        </div>
        <!-- end 分頁信息區域 -->
    </div>
    <!-- satart 提示信息模態窗口 -->
    <div id="infoModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="infoModalLabel">提示信息</h3>
        </div>
        <div class="modal-body">
            <p id="infoModalMsg" class="text-info"></p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">確定</button>
        </div>
    </div>
    <!-- end 提示信息模態窗口 -->
    <!-- start 詳情的模態窗口 -->
    <div id="detailModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="detailModalLabel">詳細信息</h3>
        </div>
        <div class="modal-body">
            <table class="table table-bordered">
                <tr>
                    <th>金額：</th>
                    <td id="detailMoneyType"></td>
                    <th>賬號：</th>
                    <td id="detailAccountType"></td>
                </tr>
                <tr>
                    <th>URL：</th>
                    <td id="detailUrlType"></td>
                    <th>郵箱地址：</th>
                    <td id="detailEmailType"></td>
                </tr>
            </table>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">確定</button>
        </div>
    </div>
    <!-- end 詳情的模態窗口 -->
    <!-- start 新增數據模態窗口 -->
    <div id="createModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="createModalLabel">新增記錄</h3>
        </div>
        <div class="modal-body">

            <div class="dataForm">
                <div class="dataRow">
                    <div class="dataItem">
                        <div>
                            <div class="textName"><strong>金額<span class="requiredMarker">(必填)</span>：</strong></div>
                            <div id="createMoneyTypeErrorMsg" class="textErrorMsg"></div>
                        </div>
                        <div>
                            <input id="createMoneyType" type="text" />
                        </div>
                    </div>
                    <div class="dataItem">
                        <div>
                            <div class="textName"><strong>賬號<span class="requiredMarker">(必填)</span>：</strong></div>
                            <div id="createAccountTypeErrorMsg" class="textErrorMsg"></div>
                        </div>
                        <div>
                            <input id="createAccountType" type="text" />
                        </div>
                    </div>
                </div>
                <div class="dataRow">
                    <div class="dataItem">
                        <div>
                            <div class="textName"><strong>URL<span class="requiredMarker">(必填)</span>：</strong></div>
                            <div id="createUrlTypeErrorMsg" class="textErrorMsg"></div>
                        </div>
                        <div>
                            <input id="createUrlType" type="text" />
                        </div>
                    </div>
                    <div class="dataItem">
                        <div>
                            <div class="textName"><strong>郵箱地址<span class="requiredMarker">(必填)</span>：</strong></div>
                            <div id="createEmailTypeErrorMsg" class="textErrorMsg"></div>
                        </div>
                        <div>
                            <input id="createEmailType" type="text" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
            <button id="resetCreateBtn" class="btn btn-warning">重置</button>
            <button id="doCreateBtn" class="btn btn-primary">確定</button>
        </div>
    </div>
    @*bootstrap2樣式的表單
    <form class="form-horizontal">
        <div class="control-group warning">
            <label class="control-label" for="inputWarning">Input with warning</label>
            <div class="controls">
                <input type="text" id="inputWarning">
                <span class="help-inline">Something may have gone wrong</span>
            </div>
        </div>
    </form>
    *@
    <!-- end 新增數據模態窗口 -->
    <!-- start 更新數據模態窗口 -->
    <div id="updateModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="updateModalLabel">更新記錄</h3>
        </div>
        <div class="modal-body">

            <div class="dataForm">
                <div class="dataRow">
                    <div class="dataItem">
                        <div>
                            <div class="textName"><strong>金額<span class="requiredMarker">(必填)</span>：</strong></div>
                            <div id="updateMoneyTypeErrorMsg" class="textErrorMsg"></div>
                        </div>
                        <div>
                            <input id="updateId" type="hidden" />
                            <input id="updateMoneyType" type="text" />
                        </div>
                    </div>
                    <div class="dataItem">
                        <div>
                            <div class="textName"><strong>賬號<span class="requiredMarker">(必填)</span>：</strong></div>
                            <div id="updateAccountTypeErrorMsg" class="textErrorMsg"></div>
                        </div>
                        <div>
                            <input id="updateAccountType" type="text" />
                        </div>
                    </div>
                </div>
                <div class="dataRow">
                    <div class="dataItem">
                        <div>
                            <div class="textName"><strong>URL<span class="requiredMarker">(必填)</span>：</strong></div>
                            <div id="updateUrlTypeErrorMsg" class="textErrorMsg"></div>
                        </div>
                        <div>
                            <input id="updateUrlType" type="text" />
                        </div>
                    </div>
                    <div class="dataItem">
                        <div>
                            <div class="textName"><strong>郵箱地址<span class="requiredMarker">(必填)</span>：</strong></div>
                            <div id="updateEmailTypeErrorMsg" class="textErrorMsg"></div>
                        </div>
                        <div>
                            <input id="updateEmailType" type="text" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
            <button id="resetUpdateBtn" class="btn btn-warning">重置</button>
            <button id="doUpdateBtn" class="btn btn-primary">確定</button>
        </div>
    </div>
    <!-- end 更新數據模態窗口 -->
    <!-- start 刪除前確認模態窗口 -->
    <div id="deleteConfirmModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="deleteConfirmModalLabel">確認信息</h3>
        </div>
        <div class="modal-body">
            <p id="deleteConfirmMsg" class="text-warning"></p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">取消</button>
            <button id="doDeleteBtn" class="btn btn-primary">確定</button>
        </div>
    </div>
    <!-- end 刪除前確認模態窗口 -->
</body>
</html>

js代碼如下：

$(document).ready(function () {

    // 初始化時間控件
    initDateTimePicker();
    // 第一次查詢數據
    btnQuery();
    // 查詢按鈕點擊事件
    $('#retrieveBtn').on('click', function () {
        btnQuery();
    });

    // start  詳情操作相關
    // 詳情按鈕點擊事件
    $('#detailBtn').on('click', function () {
        var selectedCheckBoxArray = $('.dataId:checked');// 選擇所有勾選
        if (0 == selectedCheckBoxArray.length) {
            $('#infoModalMsg').text('請選擇一條數據進行操作');
            $('#infoModal').modal('show');
        } else if (1 < selectedCheckBoxArray.length) {
            $('#infoModalMsg').text('請勿選擇多條數據進行操作');
            $('#infoModal').modal('show');
        } else {
            var dataId = $(selectedCheckBoxArray[0]).attr("data-id");
            console.log('選擇的dataId = ' + dataId);
            $.ajax({
                url: '/CRUD/RetrieveById',
                data: { id: dataId },
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    if (1 == data.result) {
                        $('#detailMoneyType').text(data.data.MoneyType);
                        $('#detailAccountType').text(data.data.AccountType);
                        $('#detailUrlType').text(data.data.UrlType);
                        $('#detailEmailType').text(data.data.EmailType);
                        $('#detailModal').modal('show');
                    } else {
                        $('#infoModalMsg').text(data.msg);
                        $('#infoModal').modal('show');
                    }
                },
                error: function (err) {
                    $('#infoModalMsg').text('網絡錯誤，請稍後重試');
                    $('#infoModal').modal('show');
                }
            });

        }
    });
    // end  詳情操作相關
    // start  新增操作相關
    // 彈出新增窗口
    $('#createBtn').on('click', function () {
        initCreateInputs();
        initCreateStyle();
        $('#createModal').modal('show');
    });
    // 重置
    $('#resetCreateBtn').on('click', function () {
        initCreateInputs();
        initCreateStyle();
    });
    // 提交新增數據
    $('#doCreateBtn').on('click', function () {
        var createModel = new Object();
        createModel.MoneyType = parseFloat($('#createMoneyType').val().trim());
        createModel.AccountType = $('#createAccountType').val().trim();
        createModel.UrlType = $('#createUrlType').val().trim();
        createModel.EmailType = $('#createEmailType').val().trim();
        if (validateCreateData(createModel)) {// 通過了前臺的數據驗證，ajax提交數據
            $('#createModal').modal('hide');// 爲了避免重複提交，modal隱藏掉
            commitCreateData(createModel);
        } else {// 沒有通過驗證,do nothing...just show those err msgs

        }
    });
    // end  新增操作相關

    // start  修改操作相關
    // 修改按鈕點擊事件
    $('#updateBtn').on('click', function () {
        var selectedCheckBoxArray = $('.dataId:checked');// 選擇所有勾選
        if (0 == selectedCheckBoxArray.length) {
            $('#infoModalMsg').text('請選擇一條數據進行操作');
            $('#infoModal').modal('show');
        } else if (1 < selectedCheckBoxArray.length) {
            $('#infoModalMsg').text('請勿選擇多條數據進行操作');
            $('#infoModal').modal('show');
        } else {
            var dataId = $(selectedCheckBoxArray[0]).attr("data-id");
            $.ajax({
                url: '/CRUD/RetrieveById',
                data: { id: dataId },
                type: 'get',
                dataType: 'json',
                //async: false,// 設置爲同步模式
                success: function (data) {
                    if (1 == data.result) {
                        initUpdateStyle();
                        $('#updateId').val(data.data.Id);
                        $('#updateMoneyType').val(data.data.MoneyType);
                        $('#updateAccountType').val(data.data.AccountType);
                        $('#updateUrlType').val(data.data.UrlType);
                        $('#updateEmailType').val(data.data.EmailType);
                        $('#updateModal').modal('show');
                    } else {
                        $('#infoModalMsg').text(data.msg);
                        $('#infoModal').modal('show');
                    }
                },
                error: function (err) {
                    $('#infoModalMsg').text('網絡錯誤，請稍後重試');
                    $('#infoModal').modal('show');
                }
            });
        }
    });

    // 修改重置
    $('#resetUpdateBtn').on('click', function () {
        var selectedCheckBoxArray = $('.dataId:checked');// 選擇所有勾選
        var dataId = $(selectedCheckBoxArray[0]).attr("data-id");
        $.ajax({
            url: '/CRUD/RetrieveById',
            data: { id: dataId },
            type: 'get',
            dataType: 'json',
            success: function (data) {
                if (1 == data.result) {
                    initUpdateStyle();
                    $('#updateId').val(data.data.Id);
                    $('#updateMoneyType').val(data.data.MoneyType);
                    $('#updateAccountType').val(data.data.AccountType);
                    $('#updateUrlType').val(data.data.UrlType);
                    $('#updateEmailType').val(data.data.EmailType);
                } else {
                    $('#updateModal').modal('hide');
                    $('#infoModalMsg').text(data.msg);
                    $('#infoModal').modal('show');
                }
            },
            error: function (err) {
                $('#updateModal').modal('hide');
                $('#infoModalMsg').text('網絡錯誤，請稍後重試');
                $('#infoModal').modal('show');
            }
        });
    });

    // 確認修改
    $('#doUpdateBtn').on('click', function () {
        var updateModel = new Object();
        updateModel.Id = parseInt($('#updateId').val().trim());
        updateModel.MoneyType = parseFloat($('#updateMoneyType').val().trim());
        updateModel.AccountType = $('#updateAccountType').val().trim();
        updateModel.UrlType = $('#updateUrlType').val().trim();
        updateModel.EmailType = $('#updateEmailType').val().trim();
        if (validateUpdateData(updateModel)) {
            $('#updateModal').modal('hide');
            commitUpdateData(updateModel);
        } else {
        }
    });
    // end  修改操作相關

    // start  刪除操作相關
    //刪除按鈕點擊事件
    $('#deleteBtn').on('click', function () {
        var selectedCheckBoxArray = $('.dataId:checked');// 選擇所有勾選
        if (0 == selectedCheckBoxArray.length) {
            $('#infoModalMsg').text('請選擇數據進行操作');
            $('#infoModal').modal('show');
        } else {
            var count = selectedCheckBoxArray.length;
            $('#deleteConfirmMsg').text('確定要刪除這' + count + '條數據嗎？');
            $('#deleteConfirmModal').modal('show');
        }
    });

    // 確認刪除
    $('#doDeleteBtn').on('click', function () {
        $('#deleteConfirmModal').modal('hide');// 
        var selectedCheckBoxArray = $('.dataId:checked');// 選擇所有勾選
        var dataIds = '';
        for (var i = 0; i < selectedCheckBoxArray.length; i++) {
            dataIds += $(selectedCheckBoxArray[i]).attr("data-id");
            dataIds += ',';
        }
        dataIds = dataIds.substring(0, dataIds.length - 1);// 去除後面的逗號
        $.ajax({
            url: '/CRUD/DoDelete',
            data: { ids: dataIds },// 
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                $('#infoModalMsg').text(data.msg);
                $('#infoModal').modal('show');
                setTimeout("clearMsgAndRefreshData();", 2000);
            },
            error: function (err) {
                $('#infoModalMsg').text('網絡錯誤，請稍後重試');
                $('#infoModal').modal('show');
                setTimeout("clearMsgAndRefreshData();", 2000);
            }
        });
    });
    // end  刪除操作相關
});

// 驗證修改數據 
function validateUpdateData(updateModel) {
    var validFlag = true;
    var updateMoneyType = updateModel.MoneyType;
    var updateMoneyTypeExp = /^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$/;// 0-99999999.99
    if ('' == updateMoneyType) {
        validFlag = false;
        $('#updateMoneyTypeErrorMsg').text('此項必填');
    } else if (!updateMoneyTypeExp.test(updateMoneyType)) {
        validFlag = false;
        $('#updateMoneyTypeErrorMsg').text('格式不符合要求');
    } else {
        $('#updateMoneyTypeErrorMsg').text('');
    }

    var updateAccountType = updateModel.AccountType;
    console.log('updateAccountType = ' + updateAccountType);
    var updateAccountTypeExp = /^[A-Za-z]{6,20}$/;
    if ('' == updateAccountType) {
        validFlag = false;
        $('#updateAccountTypeErrorMsg').text('此項必填');
    } else if (!updateAccountTypeExp.test(updateAccountType)) {
        validFlag = false;
        $('#updateAccountTypeErrorMsg').text('格式不符合要求');
    }
    else {
        $('#updateAccountTypeErrorMsg').text('');
    }

    var updateUrlType = updateModel.UrlType;
    var updateUrlTypeExp = /^[A-Za-z]+$/;
    if ('' == updateUrlType) {
        validFlag = false;
        $('#updateUrlTypeErrorMsg').text('此項必填');
    } else if (!updateUrlTypeExp.test(updateUrlType)) {
        validFlag = false;
        $('#updateUrlTypeErrorMsg').text('格式不符合要求');
    } else {
        $('#updateUrlTypeErrorMsg').text('');
    }

    var updateEmailType = updateModel.EmailType;
    var updateEmailTypeExp = /^.+@.+\..+$/;
    if ('' == updateEmailType) {
        validFlag = false;
        $('#updateEmailTypeErrorMsg').text('此項必填');
    } else if (!updateEmailTypeExp.test(updateEmailType)) {
        validFlag = false;
        $('#updateEmailTypeErrorMsg').text('格式不符合要求');
    } else {
        $('#updateEmailTypeErrorMsg').text('');
    }
    return validFlag;
}
// 提交修改數據
function commitUpdateData(updateModel) {
    $.ajax({
        url: '/CRUD/DoUpdate',
        data: updateModel,// 直接將js object類作爲參數，可行！
        type: 'POST',
        dataType: 'json',
        success: function (data) {
            $('#infoModalMsg').text(data.msg);
            $('#infoModal').modal('show');
            setTimeout("clearMsgAndRefreshData();", 2000);
        },
        error: function (err) {
            $('#infoModalMsg').text('網絡錯誤，請稍後重試');
            $('#infoModal').modal('show');
            setTimeout("clearMsgAndRefreshData();", 2000);
        }
    });
}
// 提交新增數據
function commitCreateData(createModel) {
    $.ajax({
        url: '/CRUD/DoCreate',
        data: createModel,// 直接將js object類作爲參數，可行！
        type: 'POST',
        dataType: 'json',
        success: function (data) {
            $('#infoModalMsg').text(data.msg);
            $('#infoModal').modal('show');
            setTimeout("clearMsgAndRefreshData();", 2000);
        },
        error: function (err) {
            $('#infoModalMsg').text('網絡錯誤，請稍後重試');
            $('#infoModal').modal('show');
            setTimeout("clearMsgAndRefreshData();", 2000);
        }
    });
}

// 清除提示信息並重新加載數據
function clearMsgAndRefreshData() {
    $('#infoModal').modal('hide');
    btnQuery();
}
// 驗證新增數據
function validateCreateData(createModel) {
    var validFlag = true;
    var createMoneyType = createModel.MoneyType;
    var createMoneyTypeExp = /^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$/;// 0-99999999.99
    if ('' == createMoneyType) {
        validFlag = false;
        $('#createMoneyTypeErrorMsg').text('此項必填');
    } else if (!createMoneyTypeExp.test(createMoneyType)) {
        validFlag = false;
        $('#createMoneyTypeErrorMsg').text('格式不符合要求');
    } else {
        $('#createMoneyTypeErrorMsg').text('');
    }

    var createAccountType = createModel.AccountType;
    console.log('createAccountType = ' + createAccountType);
    var createAccountTypeExp = /^[A-Za-z]{6,20}$/;
    if ('' == createAccountType) {
        validFlag = false;
        $('#createAccountTypeErrorMsg').text('此項必填');
    } else if (!createAccountTypeExp.test(createAccountType)) {
        validFlag = false;
        $('#createAccountTypeErrorMsg').text('格式不符合要求');
    }
    else {// 遠程驗證
        $.ajax({
            url: '/CRUD/ValidCreateAccountType',
            data: { 'createAccountType': createAccountType },
            type: 'get',
            dataType: 'json',
            async: false,// 設置爲同步模式
            success: function (data) {
                if (1 == data.result) {
                    validFlag = false;
                    $('#createAccountTypeErrorMsg').text('此賬號已經被使用');
                } else {
                    $('#createAccountTypeErrorMsg').text('');
                }
            },
            error: function (err) {
                validFlag = false;
                $('#createAccountTypeErrorMsg').text('此賬號已經被使用');
            }
        });
    }

    var createUrlType = createModel.UrlType;
    var createUrlTypeExp = /http:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/;
    if ('' == createUrlType) {
        validFlag = false;
        $('#createUrlTypeErrorMsg').text('此項必填');
    } else if (!createUrlTypeExp.test(createUrlType)) {
        validFlag = false;
        $('#createUrlTypeErrorMsg').text('格式不符合要求');
    } else {
        $('#createUrlTypeErrorMsg').text('');
    }

    var createEmailType = createModel.EmailType;
    var createEmailTypeExp = /^.+@.+\..+$/;
    if ('' == createEmailType) {
        validFlag = false;
        $('#createEmailTypeErrorMsg').text('此項必填');
    } else if (!createEmailTypeExp.test(createEmailType)) {
        validFlag = false;
        $('#createEmailTypeErrorMsg').text('格式不符合要求');
    } else {
        $('#createEmailTypeErrorMsg').text('');
    }
    return validFlag;
}
// 初始化新增輸入內容
function initCreateInputs() {
    $('#createMoneyType').val('');
    $('#createAccountType').val('');
    $('#createUrlType').val('');
    $('#createEmailType').val('');
}
// 初始化新增提示信息
function initCreateStyle() {
    $('#createMoneyTypeErrorMsg').text('');
    $('#createAccountTypeErrorMsg').text('');
    $('#createUrlTypeErrorMsg').text('');
    $('#createEmailTypeErrorMsg').text('');
}
// 初始化修改提示信息
function initUpdateStyle() {
    $('#updateMoneyTypeErrorMsg').text('');
    $('#updateAccountTypeErrorMsg').text('');
    $('#updateUrlTypeErrorMsg').text('');
    $('#updateEmailTypeErrorMsg').text('');
}
// 分頁鏈接點擊查詢
function pageQuery(target) {
    var queryKey = '';
    var sortName = 'id';
    var sortOrder = 'asc';
    var pageText = target.text;
    var currentPage = '1';
    if ('首頁' == pageText) {
        currentPage = '1';
    } else if ('末頁' == pageText) {
        currentPage = $('#totalPage').val();
    } else {
        currentPage = pageText;
    }
    var pageSize = $('#pageSize').val();
    getAndShowData(queryKey, sortName, sortOrder, currentPage, pageSize);
}
// 按鈕點擊查詢
function btnQuery() {
    var queryKey = '';
    var sortName = 'id';
    var sortOrder = 'asc';
    var currentPage = $('#currentPage').val();
    var pageSize = $('#pageSize').val();
    getAndShowData(queryKey, sortName, sortOrder, currentPage, pageSize);
}
// 獲取並顯示數據
function getAndShowData(queryKey, sortName, sortOrder, currentPage, pageSize) {
    $.ajax({
        url: '/CRUD/RetrievePageData',
        data: { 'queryKey': queryKey, 'sortName': sortName, 'sortOrder': sortOrder, 'currentPage': currentPage, 'pageSize': pageSize },
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            var trs = '';
            if (1 == data.result) {
                for (var i = 0; i < data.data.length; i++) {
                    var dataId = data.data[i].Id;
                    trs += '<tr>';
                    trs += '<td><input type="checkbox" class="dataId" data-id="' + dataId + '"/></td>';
                    trs += '<td>' + parseInt(i + 1) + '</td>';
                    trs += '<td>' + dataId + '</td>';
                    trs += '<td>' + data.data[i].MoneyType + '</td>';
                    trs += '<td>' + data.data[i].AccountType + '</td>';
                    trs += '<td>' + data.data[i].UrlType + '</td>';
                    trs += '<td>' + data.data[i].EmailType + '</td>';
                    trs += '<td>' + data.data[i].TelTyple + '</td>';
                    trs += '<td>' + data.data[i].MobilePhoneType + '</td>';
                    trs += '<td>' + data.data[i].IpType + '</td>';
                    trs += '<td>' + data.data[i].QqType + '</td>';
                    trs += '<td>' + data.data[i].IdType + '</td>';
                    trs += '<td>' + data.data[i].PostCodeType + '</td>';
                    trs += '</tr>';
                }

                var totalCount = data.totalCount;
                var currentPage = data.currentPage;
                var totalPage = data.totalPage;
                // 隱藏區域賦值
                $('#totalCount').val(totalCount);
                $('#currentPage').val(currentPage);
                $('#totalPage').val(totalPage);
                // 分頁信息提示顯示
                var pageInfo = '總共' + totalCount + '條記錄，總共' + totalPage + '頁，當前第' + currentPage + '頁';
                $('#pageInfo').html(pageInfo);
                // 分頁鏈接信息
                var pageLinks = '';
                pageLinks += '<li><a href="javascript:void(0);" class="pageQuery">首頁</a></li>';
                for (var j = 1; j <= parseInt(totalPage) ; j++) {
                    if (j == parseInt(currentPage)) {
                        pageLinks += '<li class="active"><a href="javascript:void(0);" class="pageQuery">' + j + '</a></li>';
                    } else {
                        pageLinks += '<li><a href="javascript:void(0);" class="pageQuery">' + j + '</a></li>';
                    }
                }
                pageLinks += '<li><a href="javascript:void(0);" class="pageQuery">末頁</a></li>';
                $('#pageLinks').html(pageLinks);
                // 綁定點擊事件
                $('.pageQuery').on('click', function () {
                    pageQuery(this);
                });
            } else {
                trs += '<tr><td colspan="13">';
                trs += '<div class="alert alert-warning">';
                trs += '<a href="#" class="close" data-dismiss="alert">';
                trs += '×';
                trs += '</a>';
                trs += '<strong>警告！</strong>' + data.msg;
                trs += '</div>';
                trs += '</td></tr>';
            }
            $('#dataTable tbody').html(trs);
        },
        error: function (ex) {
            var exTrs = '';
            exTrs += '<tr><td colspan="13">';
            exTrs += '<div class="alert alert-warning">';
            exTrs += '<a href="#" class="close" data-dismiss="alert">';
            exTrs += '×';
            exTrs += '</a>';
            exTrs += '<strong>警告！</strong>網絡錯誤，請稍後重試';
            exTrs += '</div>';
            exTrs += '</td></tr>';
            $('#dataTable tbody').html(exTrs);
        }
    });
}
// 初始化日期時間選擇控件
function initDateTimePicker() {
    $('#datetimepicker').datetimepicker({
        format: 'yyyy-MM-dd hh:mm:ss',
        language: 'zh-CN',// 默認的“en”。引入了擴展了的漢化js
        pickDate: true,
        pickTime: true,
        hourStep: 1,
        minuteStep: 15,
        secondStep: 30,
        inputMask: true
    });
}

附圖：