استفاده از قالب های آماده در Asp.Net Core

استفاده از قالب های آماده در Asp.Net Core

لینک کوتاه آموزش: https://www.nonevisan.ir/c/8bce9

اولین اقدام موقع راه اندازی یک سایت انتقال قالب به پروژه است ما در این مقاله به شما یاد میدهیم چطوری در Asp.Net Core قالب خود را پروژه منتقل کنید و چگونه تنظیمات مربوط را انجام دهید تا قالب شما بهم نریزد و دقیقا به همان شکلی که ایجاد شده نمایش داده شود دقت داشته باشید قالب زیبا تاثیر زیادی در جذب کاربر دارد پس تلاش کنید قالب مناسبی برای سایت خود ایجاد کنید تا آخر مقاله همراه ما باشید تا بهتون یاد بدم چطوری قالب را در پروژه خود قرار دهید

72785193-c178-4871-ae84-4fc2877a0811.jpg

این آموزش فاقد ویدئو آموزشی است

اولین کاری که میکنید یک پروژه ایجاد میکنید حالا اگر پروژه شما از نوع Empty باشد و تنظیمات پیشفرض را نداشته باشد باید چندتا کار بیشتر انجام دهید در اولین قدم روی اسم پروژه خود کلیک راست میکنید و وارد بخش Add میشوید تا یک پوشه ایجاد کنید بعد از اضافه کردن folder جدید باید اسمش را wwwroot بزارید این پوشه محل نگهداری فایل های ثابت مثل تصاویر و ویدئوها و بخشی است که فایل های قالب هم داخل آن قرار میدهیم در مرحله بعد باید صفحه Layout را ایجاد کنید دوباره روی پروژه کلیک راست کنید و یک پوشه به اسم Views ایجاد کنید این folder برای این است که فایل Layout و View ها را در آن قرار دهیم حالا که پوشه Views را ایجاد کردید روی آن کلیک راست کنید و در آن یک پوشه به نام Shared ایجاد کنید بعد از اینکه پوشه Shared را ایجاد کردید باید صفحه Layout را در آن قرار دهید که محل قرارگیری کد های قالب است برای اینکار روی Shared کلیک راست کنید و در بخش Add روی New Item کلیک کنید یا پوشه Shared را انتخاب کنید و دکمه های ctrl + shift + A را بزنید تا در نهایت صفحه زیر باز شود

در کادر بالا سمت راست میتونید سرچ کنید و در کادر پایین نام صفحه Layout را وارد کنید و بعد Add رو بزنید تا Layout شما ساخته شود حالا هرچی کد در صفحه جدید می بینید پاک کنید الان نوبت تنظیمات در Startup است باید در Configure تنظیمات فایل های ثابت را بدهید پس بعد از ;()app.UseHttpsRedirection که مربوط به https است ;()app.UseStaticFiles را بنویسید که دسترسی به فایل های داخل wwwroot را باز میکند این مراحل برای وقتی بود که پروژه از نوع Empty ایجاد شده بود حالا تنظیمات مربوطه انجام شد اگر پروژه شما تنظیمات پیشفرض را دارد دیگر این مراحل نیاز نیست حالا باید فایل های قالب را به wwwroot انتقال دهید

SaveTamplateInwwwroot

تصویر بالا یک قالب html است حالا اگر بخواهید فایل های قالب رو به wwwroot منتقل کنید تمام بخش هارو که مربوط به قالب است بجز فایل های html انتخاب کنید و با موس بکشید تا در wwwroot بریزید دقت کنید با کپی کردن ممکن است فایل ها منتقل نشود حالا که فایل های قالب را انتقال دادید نوبت انتقال کد های صفحه Index به درون صفحه Layout است برای اینکار صفحه Index را به درون ویژوال بکشید و رها کنید تا کد های صفحه رو برای شما نمایش بده بعد به ctrl + A همه ی کد هارو انتخاب کنید و کپی کنید در مرحله بعد کد هارو در Layout کپی پیست کنید در مرحله بعد ممکن است اگر پروژه را استارت کنید با ارور زیر مواجه شوید

InvalidOperationException: RenderBody has not been called for the page at '/Views/Shared/_Layout.cshtml'. To ignore call IgnoreBody

ارور بالا بخاطر این است که صفحه شما کد ()RenderBody@ را ندارد حالا این کد را باید جایی از صفحه Index بزارید که متغیر هستش و در همه صفحه ها تکرار نمیشود

SelectRendreBody

بخشی که در کادر مشکی قرار گرفته RenderBody است چون منو بالا در همه صفحه ها تکراری است و همچنین میتوانید فوتر را در همه صفحه ها مشاهده کنید پس این وسط را باید در قالب پیدا کنید و RenderBody را در آن قرار بدهید

SelectRenderBodyInLayout

حالا ارور شما برطرف میشود اما ممکن است بعد از انتقال قالب وقتی پروژه را ران میکنید صفحه شما بهم ریخته باشد این مشکل بخاطر این است که css,js,bootstrap های قالب شما به درستی Load نشده اند پس تنها یک کار باقی مانده و آن هم این است که مشکل بهم ریختن قالب را حل کنیم وارد Layout شوید و قبل css,js,bootstrap یک اسلش " / " قرار دهید

اگر به تصویر بالا دقت کنید lib اول " / " نداره اما دومی داره پس همه رو دقیقا مثل دومی اسلش میزاریم اولش حالا شاید قالب شما تصویر زیاده داشته باشه و نتونید دونه دونه " / " بزارید اولش پس کدی که باید اولش اسلش قرار بگیره را انتخاب کنید و ctrl + H را بزنید تا یک کادر جدید باز شود

SittingLoadTempaheSlash

در فیلد اول کلمه ای که باید ویرایش شود و دومی تغییر لازمه را باید بنویسید پس در فیلد دوم اولش یک " / " قرار بدید و Ok کنید تا در کل Layout تغییرات اعمال شود این بود آموزش استفاده از قالب های آماده در Asp.Net Core حالا میتونید به راحتی قالب خود را به پروژه Asp.Net Core منتقل کنید اگر سوالی داشتید در بخش مدرسین وارد بیوگرافی محمد مهدی زارع شوید و به شماره من در واتساپ پیام دهید

دنبال کردن ما در تلگرام