資料的匯入匯出，在很多系統裡面都比較常見，這個匯入匯出的操作，在Winform裡面比較容易實現，我曾經在之前的一篇文章《Winform開發框架之通用資料匯入匯出操作》介紹了在Winform裡面的通用匯入匯出模組的設計和開發過程，但在Web上我們應該如何實現呢？本文主要介紹利用MVC4+EasyUI的特點，並結合檔案上傳控制元件Uploadify 的使用，實現檔案上傳後馬上進行處理並顯示，然後確認後把資料寫入資料庫的過程。

我們知道，Web上對Excel的處理和Winform的有所差異，如果是在Web上處理，我們需要把Excel文件上傳到伺服器上，然後讀取檔案進行顯示，所以第一步是實現檔案的上傳操作，關於檔案上傳控制元件，具體可以參考我的文章《

1、匯入資料的介面效果展示

在Winform裡面，我們處理Excel資料匯入的介面如下所示。

在Web上的主介面如下所示。

匯入介面如下所示。

2、Web資料匯入的處理邏輯和程式碼

為了實現Web上的資料匯入匯出操作，我們需要增加兩個按鈕，一個是匯入按鈕，一個是匯出按鈕。

 <a href="javascript:void(0)" class="easyui-linkbutton" id="btnImport" iconcls="icon-excel" onclick
 
="ShowImport()">匯入</a>
 <a href="javascript:void(0)" class="easyui-linkbutton" id="btnExport" iconcls="icon-excel" onclick="ShowExport()">匯出</a>

匯入的JS處理程式碼如下所示。

        //顯示匯入介面
        function ShowImport() {
            $.showWindow({
                title: '客戶聯絡人-Excel資料匯入',
                useiframe: 
 
true,
                width: 1024,
                height: 700,
                content: 'url:/Contact/Import',
                buttons: [{
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function (win) {
                        win.close();
                    }
                }]
            });
        }

上面主要就是彈出一個視窗（上面的匯入資料視窗），用來方便客戶選擇Excel檔案並儲存資料或者下載匯入模板等操作的。

然後在Import.cshtml的檢視程式碼裡面，我們需要初始化Datagrid和相關的介面元素，初始化DataGrid的程式碼如下所示。

        //實現對DataGird控制元件的繫結操作
        function InitGrid() {
            var guid = $("#AttachGUID").val();
            $('#grid').datagrid({   //定位到Table標籤，Table標籤的ID是grid
                url: '/Contact/GetExcelData?guid=' + guid,   //指向後臺的Action來獲取當前使用者的資訊的Json格式的資料
                title: '客戶聯絡人-Excel資料匯入',
                iconCls: 'icon-view',
                height: 400,
                width: function () { return document.body.clientWidth * 0.9 },//自動寬度

                ..................

上面紅色部分的內容，就是我們在檔案順利上傳到伺服器上的時候，根據一個guid的引數初始化DataGrid的列表資料。

下面是附件上傳控制元件uploadify的初始化指令碼程式碼，其中紅色部分注意一下，我們需要上傳的是一個檔案，並且不允許多選，限定上傳檔案的型別為xls。

檔案上傳完成後，首先呼叫CheckExcelColumns控制器函式來檢查是否匹配匯入模板的欄位，如果匹配通過，載入Excel並展示資料到Datagrid裡面，否則提示使用者按模板格式錄入資料。

    <script type="text/javascript">
        $(function () {
            //新增介面的附件管理
            $('#file_upload').uploadify({
                'swf': '/Content/JQueryTools/uploadify/uploadify.swf',  //FLash檔案路徑
                'buttonText': '瀏  覽',                                 //按鈕文字
                'uploader': '/FileUpload/Upload',                       //處理ASHX頁面
                'queueID': 'fileQueue',                        //佇列的ID
                'queueSizeLimit': 1,                          //佇列最多可上傳檔案數量，預設為999
                'auto': false,                                 //選擇檔案後是否自動上傳，預設為true
                'multi': false,                                 //是否為多選，預設為true
                'removeCompleted': true,                       //是否完成後移除序列，預設為true
                'fileSizeLimit': '10MB',                       //單個檔案大小，0為無限制，可接受KB,MB,GB等單位的字串值
                'fileTypeDesc': 'Excel Files',                 //檔案描述
                'fileTypeExts': '*.xls',  //上傳的檔案字尾過濾器
                'onQueueComplete': function (event, data) {    //所有佇列完成後事件
                    var guid = $("#AttachGUID").val();
                    ViewUpFiles(guid, "div_files");

                    //提示使用者Excel格式是否正常，如果正常載入資料
                    $.ajax({
                        url: '/Contact/CheckExcelColumns?guid=' + guid,
                        type: 'get',
                        dataType:'json',
                        success: function (data) {
                            if (data.Success) {                                
                                InitGrid(); //重新重新整理表格資料
                                $.messager.alert("提示", "檔案已上傳，資料載入完畢！");
                            }
                            else {
                                $.messager.alert("提示", "上傳的Excel檔案檢查不通過。請根據頁面右上角的Excel模板格式進行資料錄入。");
                            }
                        }
                    });                    
                },
                'onUploadStart': function (file) {
                    InitUpFile();//上傳檔案前 ，重置GUID，每次不同
                    $("#file_upload").uploadify("settings", 'formData', { 'folder': '資料匯入檔案', 'guid': $("#AttachGUID").val() }); //動態傳引數
                },
                'onUploadError': function (event, queueId, fileObj, errorObj) {
                    //alert(errorObj.type + "：" + errorObj.info);
                }
            });
        });

為了有效處理資料的匯入，我們需要嚴格保證匯入的資料是和模板的欄位是匹配的，否則處理容易出錯，也沒有任何意義。為了實現這個目的，框架裡面提供方法對欄位進行檢查，主要是確保Excel裡面包含了完整的欄位即可。

        /// <summary>
        /// 檢查Excel檔案的欄位是否包含了必須的欄位
        /// </summary>
        /// <param name="guid">附件的GUID</param>
        /// <returns></returns>
        public ActionResult CheckExcelColumns(string guid)
        {
            CommonResult result = new CommonResult();

            try
            {
                DataTable dt = ConvertExcelFileToTable(guid);
                if (dt != null)
                {
                    //檢查列表是否包含必須的欄位
                    result.Success = DataTableHelper.ContainAllColumns(dt, columnString);
                }
            }
            catch (Exception ex)
            {
                LogTextHelper.Error(ex);
                result.ErrorMessage = ex.Message;
            }

            return ToJsonContent(result);
        }

而在InitGrid的初始化中的這個GetExcelData的控制器方法如下所示。主要的邏輯就是獲取到Excel，並把Excel裡面的資料轉換為DataTable，最後初始化為實體類列表，並返回給呼叫頁面就可以了。

       /// <summary>
        /// 獲取伺服器上的Excel檔案，並把它轉換為實體列表返回給客戶端
        /// </summary>
        /// <param name="guid">附件的GUID</param>
        /// <returns></returns>
        public ActionResult GetExcelData(string guid)
        {
            if (string.IsNullOrEmpty(guid))
            {
                return null;
            }

            List<ContactInfo> list = new List<ContactInfo>();
            DataTable table = ConvertExcelFileToTable(guid);
            if (table != null)
            {
                #region 資料轉換
                int i = 1;
                foreach (DataRow dr in table.Rows)
                {
                    string customerName = dr["客戶名稱"].ToString();
                    if (string.IsNullOrEmpty(customerName))
                    {
                        continue;//客戶名稱為空，記錄跳過
                    }

                    CustomerInfo customerInfo = BLLFactory<Customer>.Instance.FindByName(customerName);
                    if (customerInfo == null)
                    {
                        continue;//客戶名稱不存在，記錄跳過
                    }

                    ContactInfo info = new ContactInfo();
                    info.Customer_ID = customerInfo.ID;//客戶ID
                    info.HandNo = dr["編號"].ToString();
                    info.Name = dr["姓名"].ToString();
                     ..............................//增加一個特殊欄位的轉義
                    info.Data1 = BLLFactory<Customer>.Instance.GetCustomerName(info.Customer_ID);

                    list.Add(info);
                }
                #endregion
            }
            var result = new { total = list.Count, rows = list };
            return JsonDate(result);
        }

3、Web上資料的匯出操作 

剛才介紹了資料的匯入操作，資料的匯出操作相對簡單一些，它的JS函式操作如下所示。

        //匯出Excel資料
        var exportCondition;
        function ShowExport() {
            var url = "/Contact/Export";
            $.ajax({
                type: "POST",
                url: url,
                data: exportCondition,
                success: function (filePath) {
                    var downUrl = '/FileUpload/DownloadFile?file=' + filePath;
                    window.location = downUrl;
                }
            });
        }

雖然資料的匯出比較簡單一點，但是由於我們需要使用POST方式對資料條件進行提交，因此不像普通的方式下載檔案Window.Open(url)就可以實現檔案下載了。如果POST方式提交了引數，那麼返回的資料即使是檔案流，也無法進行有效的下載。

從上面的指令碼我們可以看到，裡面的exportCondition就是我們需要提交到伺服器的條件，伺服器根據這個條件進行檢索資料，並返回一個Excel檔案就可以了。

由於使用ajax這種POST方式無法直接下載檔案流，因此，我們需要先根據條件，在伺服器上生成檔案，返回一個檔案路徑，再次通過DownloadFile方法進行檔案的下載才可以。

因此這個傳遞的條件也是很重要的，在查詢操作的時候，我們可以把對應的條件傳遞給它。

        //繫結搜尋按鈕的的點選事件
        function BindSearchEvent() {
            //按條件進行查詢資料，首先我們得到資料的值
            $("#btnSearch").click(function () {
                //得到使用者輸入的引數
                //取值有幾種方式：$("#id").combobox('getValue'), $("#id").datebox('getValue'), $("#id").val(),combotree('getValue')
                //欄位增加WHC_字首字元，避免傳遞如URL這樣的Request關鍵字衝突
                var queryData = {
                     WHC_Name: $("#txtName").val(),
                     WHC_OfficePhone: $("#txtOfficePhone").val(),
                     WHC_Mobile: $("#txtMobile").val(),
                     WHC_Address: $("#txtAddress").val(),
                     WHC_Email: $("#txtEmail").val(),
                     WHC_Note: $("#txtNote").val()
                  }
                //將值傳遞給DataGrid
                InitGrid(queryData);

                //傳遞給匯出操作
                exportCondition = queryData;

                return false;
            });
        }

在我們選定某個樹的節點的時候，我們也可以傳遞自定義的條件給它。

        //根據訊息分組載入指定列表
        function loadByGroupTree(node) {
            //賦值給特殊欄位，公司和部門查詢的時候選擇其中一個
            var queryParams = $('#grid').datagrid('options').queryParams;
            var condition = "{ id: \"" + node.id +"\", groupname:\"" + node.text +"\", userid:\"" + @Session["UserId"] + "\" }";
            queryParams.CustomedCondition = condition;//提供給datagrid的條件

            exportCondition = { CustomedCondition: condition };//提供給匯出的條件

            $("#grid").datagrid("reload");
            $('#grid').datagrid('uncheckAll');
        }

後臺的Export控制器方法主要的邏輯如下所示。

最終是返回一個生成好的檔案地址。

最後給一個方法直接下載檔案就可以了。

        /// <summary>
        /// 根據路徑下載檔案，主要用於生成的檔案的下載
        /// </summary>
        /// <param name="filePath">檔案路徑</param>
        /// <returns></returns>
        public ActionResult DownloadFile(string file)
        {
            string realPath = Server.MapPath(file);
            string saveFileName = FileUtil.GetFileName(realPath);

            Response.WriteFile(realPath);
            Response.Charset = "GB2312";
            Response.ContentEncoding = Encoding.GetEncoding("GB2312");
            Response.ContentType = "application/ms-excel/msword";
            Response.AppendHeader("Content-Disposition", "attachment;filename=" + HttpUtility.UrlEncode(saveFileName));
            Response.Flush();
            Response.End();

            return new FileStreamResult(Response.OutputStream, "application/ms-excel/msword");
        }

匯出的Excel介面效果如下所示。

由於篇幅的原因，這個匯入匯出的操作就介紹到這裡，希望有問題大家共同探討。

基於MVC4+EasyUI的Web開發框架的系列文章：