数据的导入导出，在很多系统里面都比较常见，这个导入导出的操作，在Winform里面比较容易实现，我曾经在之前的一篇文章《Winform开发框架之通用数据导入导出操作》介绍了在Winform里面的通用导入导出模块的设计和开发过程，但在Web上我们应该如何实现呢？本文主要介绍利用MVC4+EasyUI的特点，并结合文件上传控件Uploadify 的使用，实现文件上传后马上进行处理并显示，然后确认后把数据写入数据库的过程。
我们知道，Web上对Excel的处理和Winform的有所差异，如果是在Web上处理，我们需要把Excel文档上传到服务器上，然后读取文件进行显示，所以第一步是实现文件的上传操作，关于文件上传控件，具体可以参考我的文章《基于MVC4+EasyUI的Web开发框架形成之旅–附件上传组件uploadify的使用》。

1、导入数据的界面效果展示

在Winform里面，我们处理Excel数据导入的界面如下所示。

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

导入界面如下所示。

2、Web数据导入的处理逻辑和代码

为了实现Web上的数据导入导出操作，我们需要增加两个按钮，一个是导入按钮，一个是导出按钮。

 导入
 导出

导入的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里面，否则提示用户按模板格式录入数据。

 豫ICP备13019747号-13