Master Layout creation bootstrap template & Dot Net MVC
1 like433 views
The document discusses how to implement a UI theme template in an ASP.NET MVC application. It recommends breaking the screen into separate partial views for the header, menu, body, and footer. It then describes mapping these partial views in the shared _Layout.cshtml file. Issues implementing the template, such as the menu rendering in the header, are addressed. The document concludes by offering code for each component and recommending a "divide and conquer" approach.
Master Layout creation bootstrap template & Dot Net MVC
- 2. Got your theme Template for application ■ After doing lots of browsing and rejection you finally was able to freeze on a UI theme for the application. SO Happy . See my theme below. Header Menu Body Footer
- 3. Now its time to put this layout in my new asp.net mvc application ■ How should I proceed Now? ? Header Menu Body Footer
- 4. Now its time to put this layout in my new asp.net mvc application ■ Lets follow our golden rule and Break the Screen into pieces Code for Header and login header in it Code for Menu Code for Dynamic Content Body Code for Footer
- 5. Now its time to put this layout in my new asp.net mvc application ■ What shall I do with these broken down codes its of no use for me ? Code for Header and login header in it Code for Menu Code for Dynamic Content Body Code for Footer
- 6. Now its time to put this layout in my new asp.net mvc application ■ OK.. Don’t panic now lets get to the application and make some folder structure in the shared folder inside view (Application Presentation Layer > Views > Shared )
- 7. Now its time to put this layout in my new asp.net mvc application ■ Now lets use the new folder to have partial views of each broken code (Application Presentation Layer > Views > Shared > OtherLayouts)
- 8. Now its time to put this layout in my new asp.net mvc application ■ I am trying to run the application nothing is happening (())
- 9. Now its time to put this layout in my new asp.net mvc application ■ Have patience, it will work and listen to me. Now open the _Layout.cshtml and map the partial views in the code, I will also put what code is for what the <div> can change on your need. Renders the Header Renders the Dynamic Body Renders the Footer Renders the Header Renders the Dynamic Body Renders the Footer Renders the Menu
- 10. Now its time to put this layout in my new asp.net mvc application ■ Excuse me, but what when the _Menu.cshtml is part of header getting rendered ? Renders the Header Renders the Dynamic Body Renders the Footer Renders the Dynamic Body Renders the Footer Renders the Menu
- 11. Now its time to put this layout in my new asp.net mvc application ■ Now you are asking good question, well at that time _Menu.cshtml has to be rendered in the _Header.cshtml. Renders the Header Renders the Dynamic Body Renders the Footer Renders the Menu
- 12. Now its time to put this layout in my new asp.net mvc application ■ Hey its working now Header Menu Body Footer
- 13. Now let me show you the code for each and how to divide and conquer ■ Please refer the file named Bootstrap division with MVC Header Menu Body Footer
- 14. Thank You