تبدیل Theme در ASP.Net MVC

دوشنبه 12 مهر 1395

این مقاله در مورد چگونگی تبدیل یک صفحه HTML به ASP.NET MVC می‌باشد . با ارائه یک مثال و توضیح و شرح آن بصورت مرحله به مرحله ، این کار را به شما آموزش خواهیم داد .

تبدیل Theme در ASP.Net MVC

اساسایک صفحه Asp.Net همانند یک صفحه HTML است . یک صفحه HTML دارای پسوند html. است در صورتی که صفحات ASp.Net دارای پسوند aspx. می‌باشند . در ادامه چگونگی تبدیل صفحه HTml را به ASp.Net بصورت مرحله به مرحله توضیح خواهیم داد :

1. در مرحله اول Visual Studio 2015 را باز کنید . 



2. ASP.NET Web Application را انتخاب کنید و نام پروژه را به دلخواه انتخاب کنید . 



3. حال در پنجره ای که باز شده است ، Empty را انتخاب کنید ، تیک MVC را بزنید و در انتها Ok کنید . 

4. روی نام پروژه خود در قسمت Solution Explorer کلیک راست کرده و یک New Folrder با نام Scripts به پروژه خود اضافه کنید . فولدر Scripts بصورت پیش فرض دارای یکسری فایل های Javascript  و VBScript میباشد . 


با همین روش فولدر دیگری با نام Content به پروژه اضافه کنید که شامل فایل های Css پروژه خواهد بود . همچنین شما نیاز به اضافه کردن دو فولدر دیگر برای images و fonts ، دارید . این فولدر ها را نیز به پروژه اضافه کنید . به فولدر HTML Template رفته و عکس های صفحه Html خود را در فایل images پروژه کپی کنید . این کار را برای دیگر فولدر ها هم نیز انجام دهید . 

5. اضافه کردن HomeController :
روی فولدر Controller کلیک راست کرده و Add Controller را بزنید . 


6. MVC 5 Controller - Empty  را انتخاب کرده و Ok را بزنید . 



در مرحله بعد شما باید نامی برای Controller انتخاب کنید . نام آن را HomeCotroller بگذارید . توجه داشته باشید که پسوند Controller همراه نام Controller هست و جز نام کنترلر محسوب نمیشود . در واقع نام کنترلر ما Home است . 

 
8. HomeController.cs در برنامه ما شامل دو کنترل Index و About باید باشد . 

فایل HomeController.cs را باز کنید ، با راست کلیک بر روی ActionResult میتوانید View اضافه کنید . 

ActionResult>RightClick> Add views ...

فولدر Views فایل های (فایلهای HTML) مربوط به نمایش برنامه به کاربر (User Interface) را در خود دارد . این فایل ها ممکن است بسته به زبان محتوای ما دارای پسوند های html, asp, aspx, cshtml, و vbhtml باشند . 


9. نام آن را دست نزنید . برای شروع فعلا Empty(Without model) template را انتخاب کنید . تیک 
Use a layout page را بزنید . 

بعد از add کردن ، در فولدر Views دو فولدر با نام های Home و Shared ساخته میشود . در Home ، فایل های View مربوط به HomeController ذخیره می‌شود و در Shared ، فایل هایی که در بین تمامی Controller ها به اشتراک گذاشته میشود ، قرار میگیرد . 

10. در فایل Index.cshtml شما تمامی محتوای dynamic را در اینجا قرار میدهید . 
اینجا قسمت RenderBody میباشد .


11. در فایل  Layout.cshtml_ ، شما تمامی قسمت های Static  پروژه را اضافه میکنید .  همانند header و footer و ... .

تمامی لینک های موجود در بالای صفحه در تگ head را کپی کنید . 



 12. و در درون تگ header , footer  ، body را قرار دهید . در بین تگ header و footer کد زیر را قرار دهید . 

<div>
@RenderBody()
</div>



13. در اینجا یک چیز بسیار مهم دیگر نیز وجود دارد . شما باید یه جابجایی ای نیز انجام دهید . 

/images/ با ~/images/
/css/ با ~/content/
/js/ با ~/js/
/fonts/ با ~/fonts/

ctrl +alt +h را بزنید و تغییرات بالا را به کمک این اعمال کنید . 


بعد از اتمام این جابجایی ها کار ما به اتمام رسیده است و ما یک صفحه HTML را به یک صفحه ASP.Net تبدیل کردیم . 

آموزش asp.net mvc

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید