All geek questions in one place

Layouts and various content and styles, complex MVC4 application

I looked through a lot of tutorials, moving from web-forms and .master to the MVC Master layout.

The problem I have is with embedded global files and individual files of my own pages.

(files = styles and scripts)

A side note in my views, I implemented a small naming convention / rule, so the master layouts have the LO postfix so if my application is called "SAdmin" then my layout (master) -chtml will be called: _SAdminLO.cshtml

and in my host layout I:

(for simplicity) just the main link bar (so all pages have a top link bar)

this is the main layout

  [textlink1] | [textlink2] | [textlink3] | [textlink4] ....

then I have an index page (this is the name cpanel)

in my cpanel.chtml index I have added icons in addition to the main text column ... replicating the top bar in the form of an icon menu

  [IMG] [IMG] page_name page_name [IMG] [IMG] page_name page_name

so together Layout-master _SAdminLO.cshtml + cpanel.chtml - from the "home page" of my application

I now have separate pages that are completely independent in their actions.

but all they need is css + html of the top bar , not cpanel (index)

so my situation is this: in rightclick-> view-source, I see that there are two html tags on all my pages -

 <html> + <head> + <body> markup of `LO`

&

 <html> + <head> + <body> markup of `individual.cshtml `

files:

-Master -

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <link href='@Href("~/Content/css/GlobUtils.css")' rel='stylesheet' type='text/css' /> <title>@ViewBag.Title</title> @Scripts.Render("~/js")// C# bundle @RenderSection("head", false) </head> <body id="bodid"> <h2>Cpanel</h2> <div id="navbar"> <ul id="nav"> <div class="menu-main-container"> <ul id="menu-main" class="menu"> <li id="menu-item-0" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-0 current_page_item menu-item-0"> @Html.ActionLink("Cpanel", "Cpanel", "ControlPanel") </li> <li id="menu-item-1" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1 current_page_item menu-item-1"> @Html.ActionLink("Templates Generator", "TemplateGenerator", "ControlPanel") </li> <li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-2"> @Html.ActionLink("Content Editor", "ContentEditor", "ControlPanel") </li> <li id="menu-item-3" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-3 current_page_item menu-item-2"> @Html.ActionLink("Files Uploader", "FilesUploader", "ControlPanel") </li> <li id="menu-item-4" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-2"> @Html.ActionLink("Code Dev", "CodeDev", "ControlPanel") </li> </ul> </div> </ul> </div> @RenderBody() </body> </html>

someindividualpage.chtml

 @{ Layout = "~/Views/Shared/_EvProAdminLO.cshtml"; } @model MvcE.Models.IndexModel.CreatedTemplateJPacket <!DOCTYPE html> @{ ViewBag.Title = "TemplateGenerator"; } <html> <head> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Template Generator</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link href='@Href("~/Content/css/Chrm_TemplateGenerator.css")' rel="stylesheet" type="text/css" /> </head> <body id="bodid"> <div id="DivEditor"> <h1 id="ContH"> ControlPanel - TemplateGenerator</h1> <div class="container-fluid"> <div> <a class="btn btn-CtrlsTmplt" id="save" href="#">save</a> <a class="btn btn-CtrlsTmplt" id="load" href="#">load</a> <a class="btn btn-CtrlsTmplt" id="clear" href="#">clear</a> <input type="text" id="scr1" class="input_Border_AndBGClear" /> </div> <hr/> @*----------------------------------localData-------------------------------------*@ <div id="localData"> <input id="DataValue_FormFileds" type="hidden" /> </div> </div> </div> <div id="SaveNewTmpltWwrap"> </div> <script src='@Href("~/Js/jspart2.js")' type="text/javascript"></script> </body>

+5
source share
1 answer

Perhaps I do not quite understand, but it looks like you can use custom sections.

_layout

 <html> <head> <title>@ViewBag.Title</title> @* common script, css *@ <script src="jquery.js"></script> @* variable script, css *@ @RenderSection("customHead", required: false) </head> <body> <!-- nav bar here --> @RenderBody() @RenderSection("footer", required: false) </body> </html>

SomePage.cshtml

 @{ Layout = "~/Views/Shared/_EvProAdminLO.cshtml"; ViewBag.Title = "Some Page 1"; } @section customHead { <script src="page1.js"></script> } @* no <html>,<head>,<body> *@ @* inserted into RenderBody() *@ <div id="page1content"> ... </div>

Since the section declared required: false , it will not try to display anything if the view does not contain this section.

You can change the contents of the section on the page.

SomePage2.cshtml

 @{ Layout = "~/Views/Shared/_EvProAdminLO.cshtml"; ViewBag.Title = "Some Page 2"; } @section customHead { <script src="page2.js"></script> } @section footer { <div>footer</div> } <div id="page2content"> </div>

Instead of multiple layouts, you can also use partial views and child actions to perform contextual content conversion.

SomePage3.cshtml

 @{ Layout = "~/Views/Shared/_Layout.cshtml"; ViewBag.Title = "Some Page 3"; } @Html.Partial("widget") @{Html.RenderAction("UserInfo");}

Now most of the contents of the layout are removed, and this becomes inclusion of the content, and not the definition of everything with exclusion rules.

I find fewer layout pages, and partial files are easier to maintain, and pages are easier to understand what will be displayed by viewing only the viewing page.

+5
source

Source: https://habr.com/ru/post/1245783/

More articles:


All Articles