ASP.NET CoreASP.NET MVCآموزش ها

نحوه انتقال قالب به پروژه MVC

نحوه انتقال قالب به پروژه MVC

ظاهر وبسایت بسیار مهم است. در واقع کاربر وقتی وارد یک وبسایت می‌شود، ابتدا ظاهر سایت برای او جلب توجه می‌کند. پس ظاهر سایت باید خوب باشد.

هرچهقدر شما برنامه نویس ماهری باشید و قسمت Backend پروژه خوب کار کند، پروژه بدون ظاهر جذاب برای مخاطب جالب نیست و به آن اعتماد نمی‌کند.

حال بسیاری از افراد که به صورت FreeLancer برنامه نویسی ASP.NET MVC انجام می‌دهند، ممکن است با کد های Html و CSS آشنایی زیادی نداشته باشند و توانایی ساخت یک ظاهر زیبا برای پروژه ی خود را ندارند و می‌خواهند از قالب آماده html استفاده کنند.

پس ما در در این قسمت از وبسایت پرعلم تصمیم گرفتیم تا انتقال قالب html به پروژه در ASP.NET MVC را توضیح دهیم. با ما در ادامه همراه باشید.

ما در این قسمت از یک قالب html صفحه ادمین دارک استفاده می‌کنیم که از لینک زیر می‌توانید آن را دانلود کنید :

مطلب پیشنهادی : هدایت کاربر به صفحه خاص بعد از ورود در ASP.NET MVC

دانلود ویژوال استودیو

مراحل انتقال قالب به پروژه mvc

ابتدا از لینک بالا قالب را دانلود کنید. سپس در ادامه با ما همراه باشید تا با هم این قالب زیبا را به پروژه اضافه کنیم.

1 – ابتدا یک پروژه ASP.NET MVC را در Visual Studio بسازید. (حتما پروژه را از نوع Empty در نظر بگیرید، زیرا فایل های bootstrap و فایل های پیش فرض که در پروژه  MVC هستند ممکن است قالب را بهم بریزد و به درستی نمایش داده نشود).

2 – حال به سراغ قالبی که دانلود کردید بروید و هر یک از صحه Index هایی که باب سلیقه شما بود را انتخاب کرده و آن را در NotePad و یا Visual Studio باز کنید :

3 – وقتی آن را باز کردید، تمام کد های داخل آن را کپی کنید و آنها را در Layout پروژه قرار دهید.

مطلب پیشنهادی : نحوه آپلود فایل های حجیم در ASP.NET MVC

انتقال فایل ها

4 – حال نوبت آن رسیده که Css ها و js ها و Image ها را نیز به پروژه منتقل کنیم.

5 – در فایلی که دانلود کردید تمام پوشه ها را کپی کنید و آنها در پوشه ی Content قرار دهید. (اگر از ASP.NET Core استفاده می‌کنید آنها را در پوشه ی wwwroot قرار دهید):

6 – حال به صورت زیر پوشه ها را در پروژه مشاهده می‌کنید :

اگر پوشه ها به صورت زیر بود روی آنها کلیک راست کرده و Include in project را بزنید :

7 – حال که پوشه ها با موفقیت به پروژه اضافه شد، به سراغ Layout می‌رویم.

8 – در Layout باید آدرس فایل ها را درست کنیم، مانند زیر قبل از آدرس های css , img , script علامت ~ که نشانه ی ریشه ی سایت است را قرار داده و مسیر بعدی را می‌نویسیم :

9 – برای فایل های Script نیز به همین صورت عمل کنید.

10 – سپس هر قسمت از کد که می‌خواهید در همه صفحات وجود داشته باشد مانند منوی ساید بار را سر جای خود در Layout باقی بگذارید، و باقی کد ها که مربوط به وسط صفحه است را به صفحه Index در کنترلر Home منتقل کنید. و به جای آنها در Layout از RenderBody() استفاده کنید.

نکته : این صفحه باید از Layout که در مرحله قبل ساختیم استفاده کند.

اکنون پروژه را اجرا کنید. شما با موفقیت قالب را به پروژه اضافه کردید:

اگر صفحه به درستی نمایش داده نشد، احتمالا در لینک هایی که به css ها و script ها است مشکلی وجود دارد که باید آنها را برطرف کنید.

در انتها سوالات و نظرات خود را در بخش نظرات با ما در میان بگذارید.

نحوه انتقال قالب به پروژه MVC

, , , , , , , , ,
نوشتهٔ پیشین
ریست کردن تنظیمات فتوشاپ در 2 ثانیه
نوشتهٔ بعدی
چگونه در ویندوز 7 اسکرین شات بگیریم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.
برای ادامه، شما باید با قوانین موافقت کنید

*

code

فهرست