Bootstrap +mvc实现网络共享文件查阅（应用于企业ISO等共享文件呈现）

选择MVC因为为当前主流框架，bootstap为了任何客户端浏览网页都可以自适应

以上两个框架均为本人第一次使用，因此记录下来，希望可以帮助到有同样需求的人

要求如果是PDF文件直接网页打开，如果是别的文件可以下载或者打开

在Models 建立基类

      public string Path { get; set; }//路径
        public string TitleC { get; set; }//文件夹中文名
        public string menu { get; set; }//菜单名 为了显示在台头

         public List<string> Dict { get; set; } //存放目录
        public List<string> Files { get; set; }//存放文件

 public ActionResult Index(string fn, string titleC,string menu)      

   {

            if (string.IsNullOrEmpty(fn)) fn = Server.MapPath("~/Application Forms (体系文件)/Forms/ISO 受控表格");  

           if (string.IsNullOrEmpty(titleC)) titleC = "公司ISO受控表单";           

           if (string.IsNullOrEmpty(menu)) menu = Server.MapPath("~/Application Forms (体系文件)/Forms/ISO 受控表格");           

            var dict = new List<string>();            

             var files = new List<string>();            

              foreach (var obj in subs)            

              {                

                  if (Directory.Exists(obj))                

                  {                   

                         dict.Add(obj);                 }              

       else                 {                     files.Add(obj);                                  }                

                var m = new ViewManageIndexViewModel        //返回到客户端    

                {                 Dict = dict,                 Files = files,                 Path = fn,                 TitleC = titleC,                 menu=menu                                          };             return View(m);         }       

这样可以基本实现指定路径下读取文件和文件夹呈现在客户端

下面为客户端代码以下为bootstrap 的响应式菜单当到手机上会自动自适应效果见下图

<nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"></a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
             <li><a href="" >HOME</a></li> 
                <li class="dropdown" style=""> 
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">FORMS <b class="caret"></b></a> 
                <ul class="dropdown-menu" role="menu"> 
                   <li>@Html.ActionLink("ISO 受控表格", "Index", new { fn = Server.MapPath("~/Application Forms (体系文件)/FORMS/ISO 受控表格"),menu=Server.MapPath("~/Application Forms (体系文件)/FORMS/ISO 受控表格"), titleC = "公司ISO 受控表单" })</li> 
                   <li>@Html.ActionLink("EHS 受控表格", "Index", new { fn = Server.MapPath("~/Application Forms (体系文件)/FORMS/EHS 受控表格"), menu = Server.MapPath("~/Application Forms (体系文件)/FORMS/EHS 受控表格"), titleC = "公司EHS 受控表格" })</li> 
                   <li>@Html.ActionLink("其他表格", "Index", new { fn = Server.MapPath("~/Application Forms (体系文件)/FORMS/其他表格"), menu = Server.MapPath("~/Application Forms (体系文件)/FORMS/其他表格"), titleC = "公司其他表格" })</li> 
                </ul> 
                </li>
                    <li class="dropdown"> 
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">POLICIES <b class="caret"></b></a> 
                        <ul class="dropdown-menu"> 
                            <li><a href="#">HR POLICIES</a></li> 
                            <li><a href="#">GA POLICIES</a></li> 
                            <li><a href="#">IT POLICIES</a></li> 
                        </ul> 
                    </li>       
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
 
</nav>

文件的呈现才有bootstrap的table class="table table-bordered" 可以在窗口变小的时候自动生成滚动条效果见下图

 <table class="table table-bordered">
          
           <thead>
              <tr>
                 <th>文件名</th>
                 <th>修改时间</th>
                 <th>操作</th>
              </tr>
           </thead>
           <tbody>
  
            @foreach (var d in Model.Files)
            {
                if ((@File.GetAttributes(d) & FileAttributes.Hidden) != FileAttributes.Hidden)
                {
                      <tr>
                         <td> @Path.GetFileNameWithoutExtension(d)</td>
                         <td> @String.Format("{0:yyyy-MM-dd}", @File.GetLastWriteTime(d))</td>
                        @* <td> @System.Diagnostics.FileVersionInfo.GetVersionInfo(d).FileVersion
                          </td>*@
                          @if(@Path.GetExtension(d)==".pdf")
                          {
                             
                              <td>  @Html.ActionLink("表单申请流程", "openfile", new { path = Path.Combine(Model.Path, "流程"), fileName = Path.GetFileName(d).Substring(0, 11) + ".pdf" })&nbsp;&nbsp;&nbsp;
                              @Html.ActionLink("查看文件", "openfile", new { path = Model.Path, fileName = Path.GetFileName(d) })</td>
                          }
                          else
                          {
                             <td> @Html.ActionLink("查看文件/下载文件", "GetFileFromDisk", new { path = Model.Path, fileName = Path.GetFileName(d) })</td>
                          }
                      </tr>
                }
            }
   
           </tbody>
       </table>

当点击查看文件时调用的方法是

public FilePathResult GetFileFromDisk(string path, string fileName)
        {
         
           
            return File(path + "\" + fileName, "application/zip-x-compressed", fileName);
           
        }

这个时候点击以后会下显示器下方显示

我不想出现下载的按钮只想在线打开所以改写如下 

Response.ContentType = "Application/pdf";
               // string fileName = inFilePath.Substring(inFilePath.LastIndexOf('\') + 1);
                Response.AddHeader("content-disposition", "filename=" + filename);
                Response.WriteFile(path + "\" + filename);
                Response.End();

以上基本完成所要功能