آموزش تبدیل قالب Html به Layout در asp.net core

در آموزش تبدیل قالب Html به Layout در asp.net core قصد داریم تا یک قالب Html را به یک Layout در Asp.Net Core تبدیل کنیم. تبدیل یک قالب HTML به یک Layout در ASP.NET Core فرایندی شامل چندین مرحله است که در نهایت به شما کمک می‌کند تا از قالب‌های HTML آماده در پروژه‌های خود استفاده کنید و قابلیت‌های Razor Pages را با آن ترکیب کنید. که شامل مراحل زیر است.

اضافه کردن قالب HTML به پروژه

قالب HTML خود را به پروژه اضافه کنید. به طور معمول، این قالب شامل فایل‌های CSS، JavaScript، و تصاویر است. تمام فایل‌های استاتیک (مانند CSS، JS و تصاویر) را در پوشه wwwroot قرار دهید. در صورتی که فایل های تکراری وجود دارد آنها را حذف کنید. مثلا در قالب ما فایل های بوت استرپ استفاده شده. و این فایل ها در خود پروژه نیز وجود دارد پس یکی را حذف میکنیم.

اضافه کردن قالب HTML به پروژه

ایجاد یک Layout

فایل Layout یک فایل Razor است که ساختار اصلی صفحات شما را تعریف می‌کند. این فایل معمولاً در مسیر Views/Shared/_Layout.cshtml قرار دارد. میتوانید فایل _Layout.cshtml را ویرایش کنید و قالب جدید خود را در آن بسازید ولی پیشنهاد میکنم یک Layout جدید مانند تصویر زیر بسازید. نام  Layout خود را در این مثال _TehranitContent قرار دادیم. قالب ما حد اقل به سه Layout نیاز دازد. کد های خود را در این فایل کپی کنید.

ایجاد یک Layout

اصلاح آدرس فایل ها

در قالب ها تعداد زیادی فایل Css و Js وجود دارد نیاز است آدرس های آنها را اصلاح کنید. ابتدا از مسیر آن مطمئن شوید که درست است. در قدم بعدی به اول آدرس ها مقدار ~ را وارد کنید. این کاراکتر آدرس روت را مشخص میکند.

استفاده از Section

در برخی از صفحات یا Layout ها نیاز است که به فایل های Css و Js خود فایل های جدیدی اضافه کنیم. در این مواقع از قابلیت Section استفاده میکنیم. هنگام طراحی Layout حتما دو Section برای فایل های css و js باید ایجاد کنید. و در نام گزاری مانند زیر عمل کنید.

@await RenderSectionAsync("Styles", required: false)
@await RenderSectionAsync("Scripts", required: false)

استفاده از ViewBag

هر کدام از ویو هایی که ایجاد میکنیم در اصل از Layout ما ارث بری میکنند. هر کدام از این ویو ها نیاز به بخش هایی دارند که متعلق به خودشان است ولی در RenderBody نیستند. مثل تگ Title که در هدر هر صفحه وجود دارد. و باید متناسب با همان صفحه ایجاد شود. در این مواقع میتوانیم از ViewBag استفاده کنیم.

<title>@ViewBag.Title - TehranITCoreDash</title>

استفاده از Partial Views

برای قسمت‌هایی از قالب که در چندین صفحه تکرار می‌شوند (مثل هدر، فوتر، یا منوها) می‌توانید از Partial View‌ها استفاده کنید. توجه در Partial View ها نمیتوانید از قابلیت Section استفاده کنید. به عنوان مثال در قالب Html خود نیاز به پارشیال های زیر داریم.

• پارشیال ویو هدر – HeaderPartialView
• پارشیال ویو فوتر – FooterPartialView
• پارشیال ویو منو – NavbarPartialView
• پارشیال ویو تایتل – TitlePartialView
• پارشیال ویو سایدبار – SidebarPartialView

جایگذاری RenderBody

RenderBody را جای مناسب آن قرار دهید. وظیفه RenderBody این است که، محتوای ویو را در بخشی که RenderBody قرار گرفته جایگذاری کند. توجه داشته باشید که جایگذاری هیچ ورودی و خروجی دریافت نمیکند.

تنظیم View Start

اطمینان حاصل کنید که فایل _ViewStart.cshtml به درستی به Layout شما اشاره می‌کند. این فایل معمولاً در پوشه Views قرار دارد.

تنظیم قالب های Scaffolding

ابتدا باید ابزارهای مورد نیاز برای Scaffolding را نصب کنید. برای این کار از منوی Project گزینه Manage NuGet packages را انتخاب کنید. و ابزار و پکیج های مورد نیاز را نصب کنید.

dotnet-aspnet-codegenerator

Microsoft.VisualStudio.Web.CodeGeneration.Design

Scaffolding از یک سری قالب پیش‌فرض برای ایجاد تم ها استفاده میکند. این قالب‌های پیش‌فرض در دایرکتوری ابزار Scaffolding قرار دارند. شما می‌توانید این قالب‌ها را کپی کرده و در پروژه خود سفارشی کنید. مسیر قالب‌های پیش‌فرض معمولاً به شکل زیر است:

C:\Users\[YourUsername]\.nuget\packages\microsoft.visualstudio.web.codegenerators.mvc\[Version]\Templates

در مسیر روت پروژه خود یک فولدر به نام Templates ایجاد کنید. و قالب‌های مورد نظر را در آن کپی کنید. و فولدرهای زیر را در آن کپی کنید.

Bundle و Minify کردن فایل های Css و Js

• اکستنشن Bundler & Minifier 2022 را نصب کنید.
• یک فایل به نام bundleconfig.json در ریشه پروژه خود ایجاد کنید.
• فایل ساده bundleconfig.json می‌تواند به شکل زیر باشد.

[
{
"inputFiles": [
"wwwroot/lib/bootstrap/dist/css/bootstrap.rtl.min.css",
"wwwroot/assets/fonts/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css",
"wwwroot/assets/fonts/vazir/Font-Vazir.css",
"wwwroot/assets/css/TehranIt.css"
],
"outputFileName": "wwwroot/Bundel/site.min.css",
"minify": {
"enabled": true,
"adjustRelativePaths": true,
"commentMode": "none",
"gzip": true
}
},
{
"inputFiles": [
"wwwroot/lib/jquery/dist/jquery.min.js",
"wwwroot/lib/bootstrap/dist/js/bootstrap.bundle.min.js",
"wwwroot/assets/lib/Loader-Preloader-Plugin-jQuery-Preloadinator/dist/js/jquery.preloadinator.min.js",
"wwwroot/assets/js/TehranIT.js"
],
"outputFileName": "wwwroot/Bundel/site.min.js",
"minify": {
"enabled": true,
"adjustRelativePaths": true,
"commentMode": "none",
"gzip": true
}
}
]

دانلود فایل های پروژه شامل پروژه HTML و قالب Asp.Net Core تهران آی تی

«از آنجا که فایل‌های قالب به‌صورت مستمر در حال به‌روزرسانی هستند، صفحه‌ای را برای این قالب ایجاد کردیم تا راحت‌تر با آن دسترسی داشته باشید و آخرین آموزش‌های آن را مشاهده کنید.»

• برای دانلود فایل های پروژه شامل پروژه HTML و قالب اینجا کلیک کنید.