のレイアウトと異なるコンテンツとスタイル、複雑なMVC4アプリケーション

私はweb-formsと.masterとMVCマスターレイアウトの2つのチュートリアルを見ていました。のレイアウトと異なるコンテンツとスタイル、複雑なMVC4アプリケーション

問題は埋め込みグローバルファイルと個々のページのファイルに関するものです。レイアウト - マスターがLO接尾辞を持つように私は少し命名規則/ルールを実装している私の見解で

（ファイル=スタイルやスクリプト）

サイドノート、私のアプリは「SADMIN」と命名そうならば、その後、私のレイアウト（マスター）-chtmlが命名されます。

_SAdminLO.cshtml

を、私のレイアウトのマスターに私が持っている：

（簡略化のため）だけでメインバー - リンク（すべてのページには、「リンクを持っているように、 "トップバー）

これは...その後、私はメインのレイアウトのテキストバーのほかにアイコンを追加した私のインデックスcpanel.chtmlにインデックスページ（それの名前はcPanelのです）

を持っているの複製メインレイアウト

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

ですアイコンメニューの形で上部バー

[IMG]   [IMG] 
    page_name  page_name 

    [IMG]   [IMG] 
    page_name  page_name

ので、一緒にレイアウトマスター_SAdminLO.cshtml + cpanel.chtmlは - 私のアプリの「ホーム・ページ」をfroms

今私は、彼らの行動

に完全に独立している個々のページを持っていますが、cpanel（インデックス）とは対照的に、彼らが必要とするすべては、トップバーのCSS + HTMLで

ので、私の状況ですその： rightclick->ビュー・ソースで、私はすべての私のページがダブルhtmlタグを持っていることがわかります -

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

の

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

ファイル：

-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>

出典

2016-03-25 Avia Afer

「」は、レイアウトページとメインビューページの両方にタグがあるため、2倍になります。ビューページからそれを削除してから、可変ヘッダーのコンテンツをカスタム（必須ではない）セクションに含めます。@section myCustomSection {...} ' – Jasen

@Jasenこの" individual.cshtml "ビューには、自分自身のCSS + individual2も...マスターレイアウト+ index-partialには独自のものがあり、 'Layoutfile' +フレームの' index'ソウルメイト 'partial view'と' individualX 'のフレームコードだけを投稿すると本当に役に立ちます。 cshtml' –

レイアウト以外の他のページからheadタグとbodyタグを削除し、セクションを使用して独自のcssファイルとjsファイルをロードすることができます – ssilas777

は、たぶん私はかなり理解していないんだが、それはあなたができるようですカスタムを使用する訴訟。

_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>

セクションでは、ビューは、そのセクションが含まれていない限り、何をレンダリングしようとはしませんでしょうrequired: false宣言したので。

ページあたりのセクションの内容を変更できます。むしろ複数のレイアウトより

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>

- あなたはまた、可変コンテンツのレンダリングを行うために部分的なビューと子アクションを使用することができます。

SomePage3.cshtml

@{ 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
    ViewBag.Title = "Some Page 3"; 
} 

@Html.Partial("widget") 
@{Html.RenderAction("UserInfo");}

次にレイアウトコンテンツの多くは除去され、それがコンテンツ包含なく除外ルールにすべてを画定なります。

レイアウトページが少なく、パーシャルを使用するとメンテナンスが容易になり、ページは表示ページだけを見てレンダリングする内容を分かりやすくします。

出典

2016-03-25 18:14:17 Jasen

ありがとうございます。 '@Section customHead'を呼び出して' @RenderSection（ "customHead"、required：false）を呼び出します。 –

しかしw8 ..これは 'somepage'には完璧です' otherPage'とそれ自身の頭+スクリプト –

多分私はこのリンクは...オーバーキル...のように見えますか、またはあなたのための簡単な追加はできますか？ネストされたmasters-layoutsリンク[http://www.mikesdotnetting.com/article/164/nested-layout-pages-with-razor] –

のレイアウトと異なるコンテンツとスタイル、複雑なMVC4アプリケーション

答えて

関連する問題