写在前面
上篇文章更新了编辑了文件名的操作，本片文章将实现新建文件夹的功能。
系列文章
[EF]vs15+ef6+mysql code first方式
[实战]MVC5+EF6+MySql企业网盘实战(2)——用户注册
[实战]MVC5+EF6+MySql企业网盘实战(3)——验证码
[实战]MVC5+EF6+MySql企业网盘实战(4)——上传头像
[实战]MVC5+EF6+MySql企业网盘实战(5)——登录界面，头像等比例压缩
[实战]MVC5+EF6+MySql企业网盘实战(5)——页面模板
[实战]MVC5+EF6+MySql企业网盘实战(5)——ajax方式注册
[实战]MVC5+EF6+MySql企业网盘实战(6)——ajax方式登录
[实战]MVC5+EF6+MySql企业网盘实战(7)——文件上传
[实战]MVC5+EF6+MySql企业网盘实战(8)——文件下载、删除
[实战]MVC5+EF6+MySql企业网盘实战(9)——编辑文件名
代码片段
实现目标：可以新建文件夹。默认文件夹排在列表前面并按照时间进行排序。为了减少查询的次数，需要添加一个字段标示是否是文件夹，可置为0，文件置为1，按照这个字段排序，并按照时间进行排序。
为MyFile类添加属性，IsFolder
public int IsFolder { get; set; }
修改文件上传，文件类型为1，并修改文件列表，按照文件类型，时间排序。
[HttpGet]
public ActionResult FileList()
{
UserInfo userInfo = Session["user"] as UserInfo;
if (userInfo == null)
{
return RedirectToAction("Login", "UserInfo");
}
var fileList = _myFileServiceRepository.FindAll(x => x.User.Id == userInfo.Id && !x.IsDelete).OrderBy(x => x.IsFolder).OrderByDescending(x => x.CreateDt);
ViewBag.UserInfo = userInfo;
ViewBag.ChildTitle = "我的网盘";
return View(fileList);
}
新建文件夹
public JsonResult CreateFolder()
{
UserInfo userInfo = Session["user"] as UserInfo;
if (userInfo == null)
{
RedirectToAction("Login", "UserInfo");
}
string folderPath = Request.Params["folderPath"];
string folderName = Request.Params["folderName"];
if (string.IsNullOrEmpty(folderName))
{
throw new ArgumentNullException("文件夹名称不能为空");
}
//检查文件夹是否已经存在
var count = _myFileServiceRepository.FindAll(x => x.User.Id == userInfo.Id && x.IsFolder == 0 && x.IsDelete == false && x.FileName.Contains(folderName)).Count();
userInfo = _userInfoServiceRepository.Find(x => x.Id == userInfo.Id);
if (count > 0)
{
//如果不存在，则新建，否则进行自动重命名
folderName = folderName + "(" + (count + 1).ToString() + ")";
}
if (string.IsNullOrEmpty(folderPath))
{
folderPath = "/NetDisk/" + userInfo.UserName;
}
MyFile folder = new MyFile()
{
FilePath = folderPath + '/' + folderName,
FileName = folderName,
CreateDt = DateTime.Now,
User = userInfo,
FileExt = string.Empty,
FileIcon = "/Content/Images/FolderType.png",
FileMd5 = string.Empty,
FileSize = 0,
IsDelete = false,
ModifyDt = DateTime.Now
};
try
{
_myFileServiceRepository.Add(folder);
_myFileServiceRepository.SaveChanges();
}
catch (Exception)
{
return new JsonResult() { Data = new JavaScriptSerializer().Serialize(new { code = 500, msg = "创建失败" }) };
}
return new JsonResult() { Data = new JavaScriptSerializer().Serialize(new { code = 200, folder = folder }) };
}
前端
<tbody role="alert" aria-live="polite" aria-relevant="all">
@{int i = 0;}
@foreach (var item in Model)
{
i++;
<tr class="i%2==0?'even':'odd'" id="tr-@item.Id">
@{
if (@item.FileMd5 != "")
{
<td class=" even sorting_1"><img src="@item.FileIcon" alt="" /> <span id="sp-@item.Id">@item.FileName</span></td>
<td class="center ">@item.FileSize 字节</td>
}
else
{
<td class=" even sorting_1">
<a href="#" id="lnkFolder-@item.Id" onclick="clickFolder('sp-@item.Id')">
<img src="@item.FileIcon" alt="@item.FileName" />
<span id="sp-@item.Id">@item.FileName</span>
</a>
</td>
<td class="center "></td>
}
}
<td class="center ">@item.ModifyDt</td>
<td class="center ">
<a class="btn btn-info" href="javascript:void(0)" onclick="editFile(@item.Id,'@item.FileName')">
<i class="glyphicon glyphicon-edit icon-white"></i>
编辑
</a>
<a class="btn btn-danger" href="javascript:void(0)" onclick="deleteFile(@item.Id)">
<i class="glyphicon glyphicon-trash icon-white"></i>
删除
</a>
@{ if (@item.FileMd5 != "")
{ <a class="btn btn-success" href="/Home/DownLoadFile?fileId=@item.Id">
<i class="glyphicon glyphicon-zoom-in icon-white"></i>
下载
</a> }
}
</td>
</tr>
}
</tbody>
jquery
//创建文件夹
$('#btnNewFolder').click(function () {
//设置弹出框标题
var title = $('#alertTitlte').html();
$('#alertTitlte').html('新建文件夹');
//清空弹出框内容
$(".modal-body").html('');
$(".modal-body").html('<input type="text" placeholder="请输入名称" class="form-control" name="name" value="新建文件夹" id="txtFileName" />');
$('#txtFileName').val('');
$('#modal-edit').modal('show');
$('#txtFileName').val('新建文件夹');
$('#lnkSave').unbind('click');
$('#lnkSave').bind('click', function () {
$.post('CreateFolder', { folderName: $('#txtFileName').val(), folderPath: $('#hdFilePath').val() }, function (data) {
data = JSON.parse(data);
var folder = data.folder;
if (data.code == 200) {
$('<tr class="odd"> <td class=" even sorting_1" id="fileName"> <a href="#" id="lnkFolder-' + folder.Id + '" onclick="clickFolder(sp-' + folder.Id + ')"><img src="/Content/Images/FolderType.png" id="fileicon" alt="" />' + folder.FileName + '</a></td><td class="center"></td><td class="center ">' + CurentTime() + '</td><td class="center "><a class="btn btn-info" href="#" id="fileEdit"> <i class="glyphicon glyphicon-edit icon-white"></i> 编辑 </a><a class="btn btn-danger" href="#"><i class="glyphicon glyphicon-trash icon-white" id="fileDelete"></i> 删除 </a> </td></tr>').insertBefore($('#fileList tbody'));
};
//还原弹出框标题
$('#alertTitlte').html(title);
});
});
});
测试
![[实战]MVC5+EF6+MySql企业网盘实战(10)——新建文件夹](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9pbWdzLzgvNy84LzkvMzgvYjRlYWVlZDY3MjZlMTExM2IyZmFhNzI4OTU1Njg3MzkuanBl.jpe?w=700&webp=1 "[实战]MVC5+EF6+MySql企业网盘实战(10)——新建文件夹")
![[实战]MVC5+EF6+MySql企业网盘实战(10)——新建文件夹](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9pbWdzLzcvMC8yLzcvMTYvZmZmOTNiNTA1MWMzNWVkNzg1YTM3MzZiYjE4NmNiM2EuanBl.jpe?w=700&webp=1 "[实战]MVC5+EF6+MySql企业网盘实战(10)——新建文件夹")
总结
本篇文章简单实现了新建文件夹的过程。下篇文章将实现进入文件夹的过程。