Asp.Net Core MVC 静态文件与目录浏览

访问静态文件

  常见静态文件有css样式表、js脚本、多媒体文件、html静态页面等。
  Asp.Net Core 应用默认不启用对静态文件访问,如果启用需要在Startup.Configure方法中调用UserStaticFiles方法。
  静态文件默认位于/wwwroot目录下,若要更改位置,可用StaticFileOptions类来进行配置。

  Startup类配置静态文件参数。目录为/wwwroot/extLibs/js映射后相对URL为/js。

    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            StaticFileOptions sfoption = new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(Path.Combine(env.WebRootPath, "extLibs/js")),
                RequestPath = "/js"
            };
            app.UseStaticFiles(sfoption);
            app.UseMvc();
        }
    }

  项目下新建Pages目录,Pages下添加Index.cshtml。在header元素中引用jquery.js脚本路径就可以写为/js/jquery.js。

@page "~/"
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        #rect{
            background-color:red;
            position:relative;
            float:left;
            width:100px;
            height:100px;
            margin:8px
        }
    </style>
    <script type="text/javascript" src="/js/jquery.js"></script>
</head>
<body>
    <div>
        <button id="btnstart">向右移动</button>
        <button id="btnreset">重置</button>
    </div>
    <div>
        <div id="rect"/>
    </div>
    <script type="text/javascript">
        $("#btnstart").click(() => {
            $("#rect").animate({
                left: 150
            }, 600);
        });
        $("#btnreset").click(() => {
            $("#rect").css("left", 0);
        });
    </script>
</body>
</html>

开启目录浏览功能

  目录浏览功能允许客户端查看某个Web目录下的子目录和文件列表,可以直接查看或下载。

  在 /wwwroot/images 目录下放置五个.gif文件。ConfigureServices方法中调用AddDirectoryBrowser方法注册服务。Configure方法中,调用UseStaticFilesUseDirectoryBrowser
  UseStaticFilesUseDirectoryBrowser方法参数设置相同,但是UseStaticFiles方法必须调用,否则客户端只能浏览目录而不能下载文件。

    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDirectoryBrowser();
        }
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseStaticFiles(new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(Path.Combine(env.WebRootPath, "images")),
                RequestPath = "/gifs"
            });
            app.UseDirectoryBrowser(new DirectoryBrowserOptions
            {
                FileProvider = new PhysicalFileProvider(Path.Combine(env.WebRootPath, "images")),
                RequestPath = "/gifs"
            });

            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("Hello World!");
            });
        }
    }

文件服务

  如果既要浏览目录又要访问静态文件,比较好的替代方案是调用UserFileServer方法。它综合了UseStaticFilesUseDirectoryBrowser方法功能,参数可通过FileServerOptions类来设置。

  在wwwroot目录下新建六个文本文件,ConfigureServices方法中调用AddDirectoryBrowser方法,Configure方法中调用UserFileServer方法,EnableDirectoryBrowsing属性设置为true才会提供浏览目录服务,不设置的话就相当于提供静态文件服务不能浏览目录结构。

    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDirectoryBrowser();
        }
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseFileServer(new FileServerOptions
            {
                FileProvider = new PhysicalFileProvider(env.WebRootPath),
                RequestPath = "/files",
                EnableDirectoryBrowsing = true
            });

            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("Hello World!");
            });
        }
    }
posted @ 2021-01-07 22:49  一纸年华  阅读(9)  评论(0编辑  收藏  举报  来源