लेआउट और विभिन्न सामग्री और शैलियों, जटिल एमवीसी 4 एप्लिकेशन

मैं web-forms और .master बनाम एमवीसी मास्टर लेआउट से आगे बढ़कर ट्यूटोरियल देख रहा था।लेआउट और विभिन्न सामग्री और शैलियों, जटिल एमवीसी 4 एप्लिकेशन

मेरे पास जो मुद्दा है, वह एम्बेडेड वैश्विक फाइलों के बारे में है जो अलग-अलग पृष्ठों की फाइलें बनाम हैं।

(फ़ाइलें = शैलियों और स्क्रिप्ट)

साइड नोट ताकि लेआउट-स्वामी एक LO पोस्टफ़िक्स है मेरे विचार में मैं एक छोटे से नामकरण परंपरा/नियम लागू कर दिया है, मेरे ऐप "SAdmin" नाम इसलिए यदि तो, मेरी लेआउट (गुरु) -chtml नाम दिया जाएगा: _SAdminLO.cshtml

और मेरे लेआउट मास्टर में मेरे पास है:

(सादगी के लिए) सिर्फ एक मुख्य बार - लिंक (ताकि सभी पृष्ठों है कि "संबंध हैं "टॉप-बार)

इस तो मैं सूचकांक पृष्ठ है मुख्य लेआउट

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

है (यह नाम cpanel है)

मेरी सूचकांक में

मुख्य लेआउट का शाब्दिक बार के अलावा cpanel.chtml मैं जोड़ लिया है माउस ... की प्रतिकृति माउस मेनू का एक रूप में शीर्ष पट्टी

[IMG]   [IMG] 
    page_name  page_name 

    [IMG]   [IMG] 
    page_name  page_name

तो एक साथ लेआउट मास्टर _SAdminLO.cshtml + cpanel.chtml - मेरे एप्लिकेशन का "घर पृष्ठ" froms

012,

अब मैं अलग-अलग पृष्ठों कि उनके कार्यों

में पूरी तरह से स्वतंत्र हो, लेकिन जैसा कि cpanel (इंडेक्स)

तो मेरी स्थिति है करने का विरोध सभी वे की जरूरत है, सीएसएस + ऊपर पट्टी के 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

आपको डबल ' 'मिला है क्योंकि दोनों लेआउट और मुख्य दृश्य पृष्ठों में टैग है। इसे व्यू पेज से हटा दें, फिर एक कस्टम (और आवश्यक नहीं) अनुभाग '@section myCustomSection {)} – Jasen

@Jasen में "वैरिएबल हेड कंटेंट" शामिल करें। इस "व्यक्तिगत.cshtml" दृश्य को अपने स्वयं के सीएसएस + जेएस कॉल की आवश्यकता है, individual2 में भी है ... मास्टर लेआउट + इंडेक्स-आंशिक का अपना स्वयं का है, और यह वास्तव में मदद करेगा यदि आप 'लेआउटफाइल' + के 'इंडेक्स' आत्मा साथी 'आंशिक दृश्य' के फ्रेम को केवल 'व्यक्तिगत' के लिए एक फ्रेम पोस्ट कर सकते हैं। cshtml' –

आप लेआउट के अलावा अन्य पृष्ठों से सिर और बॉडी टैग को आसानी से हटा सकते हैं और अपने स्वयं के सीएसएस और जेएस फाइलों को लोड करने के लिए सेक्शन का उपयोग कर सकते हैं – ssilas777

शायद मैं काफी नहीं समझ रहा हूँ लेकिन ऐसा लगता है आप कर सकते हैं कस्टम एस का प्रयोग करें ections।

_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", आवश्यक: झूठी) ' –

लेकिन w8 .. यह' somepage 'के बारे में क्या है और इसके अपने सिर + स्क्रिप्ट्स –

के लिए बिल्कुल सही है, मुझे शायद कुछ चाहिए यह लिंक ... ओवर-मार की तरह दिखता है ... या आपके लिए एक साधारण जोड़ होगा? नेस्टेड मास्टर्स-लेआउट लिंक [http://www.mikesdotnetting.com/article/164/nested-layout-pages-with-razor] –

लेआउट और विभिन्न सामग्री और शैलियों, जटिल एमवीसी 4 एप्लिकेशन

उत्तर

संबंधित मुद्दे