در برنامه های وب، فایل هایی مانند جاوا اسکریپت، سی اس اس، اچ تی ام ال و فایل های دیگر مانند تصویرها، همگی به نام فایل های ایستا (Static File) شناخته می شوند. برای اینکه آنها بتوانند در پروژه به کار گرفته شوند، می بایست برخی از پیکربندی ها را درون پروژه انجام دهیم.

پیش از این گفتیم که فایل های سی اس اس، اسکریپت های جاوا اسکریپت و کتابخانه های آنها مانند Bootstrap به ترتیب در زیر پوشه هایی به نام css و js و lib در زیر پوشه wwwroot نگهداری می شوند که در شکل زیر نشان داده شده است. همانگونه که می بینید فایل های کتابخانه های Bootstarp و JQuery در مسیر wwwroot/lib نگهداری می شوند.

پوشه wwwroot به نام Web Root شناخته می شود و جایی است که هیچ کد سی شارپ (مانند کلاس های کنترل گر، کلاس های مدل یا دیگر کلاس ها) در آن نگهداری نمی شود. در پروژه برای دسترسی به پوشه wwwroot باید کاراکترهای /~ را به کار ببریم، بنابرین بر این پایه برای دسترسی به پوشه css باید css/~ و برای پوشه js باید js/~ را به کار ببریم. شکل زیر که بخشی از فایل Shared/_Layout.cshtml، چگونگی تنظیم مسیر برای دسترسی به فایل های bootstarp.min.css   در زیر پوشه های lib/bootstrap/dist/css را نشان می دهد.

تگ <link> درون تگ <head> برای اشاره به هر یک از فایل های css درون پروژه یا فایل های css درون نشانی وب به کار می رود. تگ دیگری که برای اشاره به فایل های ایستا به کار می رود، <script> است که پارامتر src آن به یک فایل js اشاره دارد. تگ <script> نیز می تواند درون تگ <head> باشد ولی رایج است که آن در پایان فایل HTML و پیش از بسته شدن تگ body، یعنی پیش از <body/> نوشته شود. 

میان افزار ()UseStaticFiles

این میان افزار باید به درون متد ()Configure از کلاس Startup افزوده شود تا فایل های استاتیک برای مسیر درخواست کنونی فعال شده و به کار بروند. این میان افزار در ASP.NET Core MVC3 پیش فرض به درون متد ()Configure افزوده شده است، اکنون اگر شما مسیر زیر را در مرورگر اجرا کنید، محتوای فایل css/site.css/~ نشان داده ممی شود.

برای نگهداری تصویرها می توانید یک زیر پوشه به نام images در wwwroot بسازید و سپس همه تصویرها را درون آن بریزید یا یا اینکه خود images را به زیر پوشه هایی بخش بندی کنید. اگر یک تصویر به نام img.png در زیر wwwroot/images داشته باشیم، پس می توانیم با نشانی https://localhost:5001/images/img.png به أن دسترسی داشته باشیم.

مسیری دیگر برای فایل های ایستا

مسیر پیش فرض برای فایل های ایستا درون زیر پوشه های درون wwwroot است ولی می توانیم به کمک میان افزار ()UseStaticFiles مسیر دیگری را نیز برای نگهداری فایل های ایستا به پروژه معرفی کنیم. توجه کنید متد میان افزار ()UseStaticFiles دارای چندین Overload است که پیش فرض در متد ()Configure آن که بدون پارامتر ورودی است، افزوده شده است.

کلاس StaticFileOptions و گزینه FileProvider

StaticFileOptions نام کلاسی است که پیکربندی ها و گزینه ها (Option) برای به کار گرفتن فایل های ایستا در پروژه را اعمال می کند. در کد زیر می بینید که یکی از Overload های متد ()UseStaticFiles می تواند نمونه ای از کلاس StaticFileOptions باشد. همچنین در خود کلاس StaticFileOptions، گزینه ای به نام FileProvider که یکی از چندین گزینه فایل های ایستا است را به کار برده ایم. FileProvider مشخص می کند که یک پوشه درون سیستم فایل برای نگهداری فایل های ایستا به کار گرفته می شود.

کلاس PhysicalFileProvider

در کد زیر می بینید که مقداری که به FileProvider داده شده است یک نمونه از کلاسی به نام ()PhysicalFileProvider است. این کلاس، بر روی سیستم فایل های روی دیسک ها به دنبال فایل (پوشه یا دایرکتوری) می گردد. کد زیر ورودی به تابع سازنده این کلاس را نشان می دهد.

دومین پارامتری که ()UseStaticFiles در کد زیر دریافت کرده است، پارامتری به نام RequestPath است که مسیر یا بهتر است بگوییم نام پوشه ای را مشخص می کند که می خواهیم در کنار wwwroot برای فایل های ایستا به کار روند. بنابراین نیاز است تا شما در زیر پوشه اصلی پروژه، یک پوشه برای نمونه به نام  StaticFiles را بسازید.

فرض کنید که مسیر تازه StaticFiles است و درون آن یک زیر پوشه به نام images ساخته اید و اکنون می خواهید یکی از این تصویرها را درون صفحه های HTML و به کمک تگ <img> نشان دهید، پس آغاز مسیر به صورت StaticFiles/images/~ خواهد بود، بنابراین کوچکی و بزرگی حروف مهم است و همچنین بازهم برای اشاره به مسیر فایل های ایستا، سر آغاز آن با /~ مشخص می شود.