آموزش ASP.NET Core Static File- جلسه هشتم

در جسله هشتم از آموزش جامع ASP.NET Core قصد داریم تا درباره فایل‌های ایستا (Static File) و نحوه استفاده و اجرای فایل‌های ایستا در ASP.Net Core Web App صحبت کنیم. فایل‌های ایستا Static File به فایل‌هایی مانند html، CSS، جاوا اسکریپت و تصاویر اطلاق میگردد که به صورت پیش‌فرض باید در پوشه wwwroot قرارداده شود.

محل قراردادن ASP.NET Core Static File

فایل‌های ایستا (Static File) همانگونه که اشاره کردیم به صورت پیش فرض می‌بایست در پوشه wwwroot در پوشه اصلی پروژه قرار داشته باشد. البته این فایل‌ها را میتوان در پوشه یا قسمت دیگری نیز ذخیره نمود که نحوه انجام این کار را در قسمت بعدی همین دوره آموزشی شرح خواهیم داد.

برای ایجاد پوشه wwwroot کافیست بروی عنوان پروژه راست کلیک نمایید و از قسمت Add گزینه New Folder را انتخاب نموده و نام آن را به wwwroot تغییر دهید. همچنین بهتر است برای منظم‌تر شدن ساختار این پوشه، درون آن، پوشه های دیگری برای قراردادن فایل‌های تصویر، جاوا اسکریپت، html و CSS ایجاد نماییم. تمامی این مراحل در ویدئو آموزشی این جلسه با جزئیات کامل ارائه گردیده است.

میان‌افزارهای مورد نیاز ASP.NET Core Static File

جهت بارگذاری فایل‌های ایستا در پروژه، ما نیازمند استفاده از میان‌افزارهای (Middleware) مختلفی می‌باشیم. میان‌افزار UseStaticFile یکی از میان‌افزار‌هایی میباشد که جهت استفاده از فایل‌های ایستا می‌بایست به پروژه اضافه گردد. همچنین با استفاده از میان‌افزار UseDefaultFiles میتوان با اضافه نمودن یک فایل html با عناوین زیر صفحه ابتدایی پروژه خود را تغییر دهیم.

• index.htm
• index.html
• default.htm
• default.html

نکته مهم در خصوص این دو Middleware تقدم استفاده از آنها می‌باشد که میان‌افزار UseDefaultFiles میبایست قبل از UseStaticFile فراخونی گردد که در قطعه کد زیر قابل مشاهده میباشد.

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


            app.UseDefaultFiles();
            app.UseStaticFiles();
            app.UseRouting();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapGet("/", async context =>
                {

                    await context.Response.WriteAsync("Hello World!");
                });
            });
        }

همچنین با استفاده از overload میان‌افزار UseDefaultFiles و DefaultFilesOptions امکان استفاده از فایل‌های html با نام‌های دیگر به عنوان فایل پیشفرض پروژه وجود دارد. به این منظور ابتدا یک شیء از DefaultFilesOptions ایجاد نمایید.

DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions();

سپس با استفاده از این شیء مقادیر پیش‌فرض این میان‌افزار را حذف نمایید.

defaultFilesOptions.DefaultFileNames.Clear();

و در ادامه مقدار جدید را به آن اضافه نمایید و به میان‌افزار UseDefaultFiles انتقال دهید.

defaultFilesOptions.DefaultFileNames.Add("myhtml.html");
app.UseDefaultFiles(defaultFilesOptions);

قطعه کد کامل تغییر فایل پیشفرض پروژه

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

  DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions();
  defaultFilesOptions.DefaultFileNames.Clear();
  defaultFilesOptions.DefaultFileNames.Add("myhtml.html");

  app.UseDefaultFiles(defaultFilesOptions);
  app.UseStaticFiles();
  app.UseRouting();
  app.UseEndpoints(endpoints =>
  {
    endpoints.MapGet("/", async context =>
     {

       await context.Response.WriteAsync("Hello World!");
     });
  });
 }


میان‌افزار UseFileServer

این امکان وجود دارد که روند فوق را با استفاده از یک Middleware عملی نمود. به این منظور میتوان از میان‌افزار UseFileServer استفاده نمود. این میان‌افزار به تنهایی مانند اضافه نمودن دو میان‌افزار UseStaticFile و UseDefaultFiles عمل می‌کند. در صورت اضافه نمودن آن به تنهایی در صورت وجود فایل html با عناوین ذکر شده در بالا، پروژه با نمایش آن فایل شروع می‌گردد. همچنین با استفاده از overload این میان‌افزار و FileServerOptions امکان تغییر فایل پیش فرض وجود دارد که روند آن بسیار مشابه حالت فوق می‌باشد. کد زیر نشان دهنده تغییر فایل پیش‌فرض پروژه توسط میان‌افزار UseFileServer و FileServerOptions میباشد.

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

  FileServerOptions fileServerOptions = new FileServerOptions();
  fileServerOptions.DefaultFilesOptions.DefaultFileNames.Clear();
  fileServerOptions.DefaultFilesOptions.DefaultFileNames.Add("myhtml.html");
  app.UseFileServer(fileServerOptions);

  app.UseRouting();
  app.UseEndpoints(endpoints =>
  {
    endpoints.MapGet("/", async context =>
    {
       await context.Response.WriteAsync("Hello World!");
    });
  });
}

در صورت نیاز به جزئیات بیشتر، میتوانید ویدئو آموزشی این جلسه را تماشا نمایید. همچنین برای آگاهی از جلسات بعدی این دوره آموزشی، ما را در اینستاگرام، تلگرام و یوتیوب دنبال کنید و از این طریق با ما در ارتباط باشد.

تماشای ویدیو در یوتیوب ما

دانلود اسلایدهای آموزشی این جلسه از اینجا