Visual Studio 2015 MVC 导入数据

开发工具与关键技术：Visual Studio 2015，MVC
导入数据
视图：
先设置一个导入按钮，然后写一个模态框，当点击导入按钮时弹出模态框，在MVC中怎么写呢？在视图区的HTML中写，导入按钮比较简单，模态框中的内容才是重点。
接下来请看HTML中的代码

写完HTML后我们要怎么实现它的功能呢？
（1） 要给按钮绑定点击事件
（2） 要打开导入模态框
（3） 给下载按钮绑定点击事件，点击下载按钮时下载导入模板
（4） 用XMLHttpRequest 上传文件，先要获取到选中的文件，然后创建PormData对象，接着将数据添加到PormData中；再创建一个XMLHttpRequest对象，然后打开指定的URL（路径），给它设置一个回调方法来把返回的字符串反序列化为json对象
（5） 发送数据
代码如下：
//打开导入模态框
function openImportModal() {
$(’#formImportUser[type=“reset”]’).click();//重置表单
$("#modImportUser").modal(‘show’);//显示模态框
}
//下载导入模板
function downImportTemplate() {
window.open("@Url.Content("~/OthersMaintenance/UserDataMaintain/DownImportTemplate")");
}
//文件上传XMLHttpRequest
function uploadExcelFile() {
//获取选择文件
var files = document.getElementById(“fileExcel”).files;
console.log(files);
if (files.length>0) {
//获取文件
var excelFile = files[0];
//===使用XMLHttpRequest
//创建FormData对象
var formData = new FormData();
//将数据添加到FormData
formData.append(“excelFile”, excelFile);
//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//打开指定的URL
xhr.open(“POST”, “@Url.Content(”~/OthersMaintenance/UserDataMaintain/ImportExcel")");
//设置回调方法
xhr.onload = function (data) {
//data.currentTarget.responseText 具体的返回内容
var msg = JSON.parse(data.currentTarget.responseText);
//把返回的字符串反序列化为json对象
layer.close(layerIndex);//关闭加载层
if (msg.State) {
layer.alert(msg.Text, { icon: 1 });
$("#modImportUser").modal(‘hide’);//关闭模态框
//刷新表格
tabUserList.reload({
page: {
curr: 1 //重新从第 1 页开始
}
});
} else {
layer.alert(msg.Text, { icon: 2 });
}
};
//发送数据
xhr.send(formData);
} else {
alert(“请选择要上传的Excel(.xls)文件”);
}
}
效果展示