写在前面

上篇文章实现了创建文件夹的功能,这里面将实现单击文件夹,加载列表的功能。

系列文章

[EF]vs15+ef6+mysql code first方式

[实战]MVC5+EF6+MySql企业网盘实战(1)

[实战]MVC5+EF6+MySql企业网盘实战(2)——用户注册

[实战]MVC5+EF6+MySql企业网盘实战(3)——验证码

[实战]MVC5+EF6+MySql企业网盘实战(4)——上传头像

[Bootstrap]modal弹出框

[实战]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)——编辑文件名

[实战]MVC5+EF6+MySql企业网盘实战(10)——新建文件夹

[实战]MVC5+EF6+MySql企业网盘实战(11)——新建文件夹2

代码片段

考虑到如果采用无刷新的方式,拼接html标签比较麻烦,这里就直接采用传统的方式了。前端代码:

 <td class=" even sorting_1">
<a href="FileList?path=@item.FilePath" id="lnkFolder-@item.Id" onclick="clickFolder('sp-@item.Id')">
<img src="@item.FileIcon" alt="@item.FileName" />
<span id="sp-@item.Id" path="@item.FilePath">@item.FileName</span>
</a>
</td>

更新加载列表的逻辑。

        [HttpGet]
public ActionResult FileList()
{
UserInfo userInfo = Session["user"] as UserInfo;
if (userInfo == null)
{
return RedirectToAction("Login", "UserInfo");
}
string folderPath = Request.Params["path"];
Expression<Func<MyFile, bool>> where = null;
if (string.IsNullOrEmpty(folderPath))
{
where = x => x.User.Id == userInfo.Id && !x.IsDelete;
}
else
{
where = x => x.User.Id == userInfo.Id && !x.IsDelete && x.FilePath.StartsWith(folderPath) && x.FilePath != folderPath;
}
var fileList = _myFileServiceRepository.FindAll(where).OrderBy(x => x.IsFolder).OrderByDescending(x => x.CreateDt);
ViewBag.UserInfo = userInfo;
ViewBag.ChildTitle = "我的网盘";
return View(fileList);
}

更新新建文件夹的逻辑,从url中获取当前目录

    //创建文件夹
$('#btnNewFolder').click(function () {
//设置弹出框标题
var title = $('#alertTitlte').html();
//从url中获取当前目录
var url = window.location.href;
console.log(url);
if (url.indexOf('path') > ) {
$('#hdFilePath').val(url.split('=')[]);
};
$('#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 == ) {
$('<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> 编辑 &nbsp;</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企业网盘实战(11)——新建文件夹2的更多相关文章

  1. [实战]MVC5+EF6+MySql企业网盘实战(28)——其他列表

    写在前面 本篇文章将实现,其他文件类型的列表. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) [实战]MVC5+EF ...

  2. [实战]MVC5+EF6+MySql企业网盘实战(27)——应用列表

    写在前面 本篇文章将实现应用列表,同样和其他列表的不同之处,在于查询条件的不同. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘 ...

  3. [实战]MVC5+EF6+MySql企业网盘实战(26)——音乐列表

    写在前面 本篇文章将实现,音乐列表,同样和其他列表的不同之处,在于查询条件的不同. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网 ...

  4. [实战]MVC5+EF6+MySql企业网盘实战(25)——种子列表

    写在前面 上篇文章实现了视频列表,本篇文章继续实现其他的文件列表.功能相似.这里就不再赘述. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MyS ...

  5. [实战]MVC5+EF6+MySql企业网盘实战(24)——视频列表

    写在前面 上篇文章实现了文档列表,所以实现视频列表就依葫芦画瓢就行了. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) ...

  6. [实战]MVC5+EF6+MySql企业网盘实战(23)——文档列表

    写在前面 上篇文章实现了图片列表,这篇文章实现文档列表将轻车熟路,因为逻辑基本相似,只是查询条件的不同.这里将txt,doc,docx,ppt,pptx,xls,xlsx的文件都归为文档列表中. 系列 ...

  7. [实战]MVC5+EF6+MySql企业网盘实战(22)——图片列表

    写在前面 实现逻辑是:单击图片节点,加载所有的当前用户之前上传的图片,分页,按时间倒序加载. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MyS ...

  8. [实战]MVC5+EF6+MySql企业网盘实战(21)——网盘操作日志

    写在前面 上篇文章介绍了一个bootstrap的分页插件,这篇将弄一个完整的例子,就以日志分页为例说明如何请求服务端然后进行分页. 系列文章 [EF]vs15+ef6+mysql code first ...

  9. [实战]MVC5+EF6+MySql企业网盘实战(20)——Bootstrap Paginator

    写在前面 考虑到数据量的问题,特引入bootstrap的分页插件.插件下载地址:https://github.com/lyonlai/bootstrap-paginator 系列文章 [EF]vs15 ...

随机推荐

  1. Spring MVC 使用Servlet原生API作为参数

    具体看代码: @RequestMapping("/testServletAPI") public void testServletAPI(HttpServletRequest re ...

  2. webpack 4.x使用总结

    1.webpack 全局安装 npm install -g webpack 2.创建项目 比如文件夹是webpackdemo cd到webpackdemo文件夹下,执行: npm init 和 npm ...

  3. 学习笔记:使用opencv做双目测距(相机标定+立体匹配+测距).

    最近在做双目测距,觉得有必要记录点东西,所以我的第一篇博客就这么诞生啦~ 双目测距属于立体视觉这一块,我觉得应该有很多人踩过这个坑了,但网上的资料依旧是云里雾里的,要么是理论讲一大堆,最后发现还不知道 ...

  4. 学习 opencv---(11)OpenC 边缘检测:Canny算子,Sobel算子,Laplace算子,Scharr滤波器

    本篇文章中,我们将一起学习OpenCV中边缘检测的各种算子和滤波器——Canny算子,Sobel算子,Laplace算子以及Scharr滤波器.文章中包含了五个浅墨为大家准备的详细注释的博文配套源代码 ...

  5. Google protocol buffer的配置和使用(Linux&&Windows)

    最近自己的服务器做到序列化这一步了,在网上看了下,序列化的工具有boost 和google的protocol buffer, protocol buffer的效率和使用程度更高效一些,就自己琢磨下把他 ...

  6. python 获取文件md5

    def GetFileMd5(filename): if not os.path.isfile(filename): return myhash = hashlib.md5() f = file(fi ...

  7. PHP字符串定义方式和单引号双引号的区别

    $str=<<<任意标记 ......................... .............................. 任何标记; 单引号和双引号的区别? ''号 ...

  8. 有向图博弈+出度的结合 Codeforces Round #406 (Div. 2) C

    http://codeforces.com/contest/787/problem/C 题目大意:有一个长度为n的环,第1个位置是黑洞,其他都是星球.已知在星球上(不含第一个黑洞)有一位神.有两个人, ...

  9. js设置html区域隐藏和显示

    if(message != "指派") { document.getElementById("appoint").style.display="non ...

  10. CodeForces 869B

    Even if the world is full of counterfeits, I still regard it as wonderful. Pile up herbs and incense ...