Wie zu verwenden „RenderBody()“ in Teilansicht bei dem partiellen Sichtweise über layout-Seiten?

Folgenden wird das genaue Szenario in meinem ASP.NET MVC-Anwendung:

Es gibt zwei layout-Seiten, die sind ganz identisch zu einander. Aber ist man mit Winkel-bezogene Attribute in „“ – tag, in der Erwägung, dass andere ist ein nicht-Winkel-layout. Um zu vermeiden, dass doppelte markup in beiden razor-layout-Dateien, ich dachte, das erstellen einer Teilansicht und teilen Sie es in den layout-Seiten.

Folgenden ist die Teilansicht (razor), habe ich es mit dem Namen als „_LayoutPartial“:

_LayoutPartial.cshtml

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

Den oben genannten partiellen Sichtweise in der „_Layout.cshtml“ und „_AngularLayout.cshtml“, die wie nachstehend erklärt:

_Layout.cshtml

<body>
    @Html.Partial("_LayoutPartial")

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>

_AngularLayout.cshtml

<body ng-app="myAngularLab">
    @Html.Partial("_LayoutPartial")

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>

Wenn ich versuche zu laufen, die MVC-Anwendung, bekomme ich folgenden Fehler:

In der Datei „~/Views/Shared/_LayoutPartial.cshtml“ kann nicht angefordert werden
direkt, weil es fordert, die „RenderBody Methode“.

Die Fehlermeldung ist sehr offensichtlich, und es scheint, dass wir verwenden können, RenderBody Methode nur in der master-Seite, und nicht irgendwo anders. Aber ich bin gespannt zu erfahren, wie wir haben zwei identische Seiten-layout (mit ein wenig Unterschiede wie im Beispiel gezeigt) durch das schreiben von gemeinsamen code, anstatt zu halten doppelten code in beiden layout-Seiten?

  • Können Sie diesen code <div class="container body-content"> @RenderBody() <hr /> <footer> <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> </footer> </div> AUS der gemeinsamen Datei und setzen Sie individuell in sowohl der Axial-und _Layout Datei?
  • Ich bin ein Anfänger, nur Fragen, ob das irgendeinen Unterschied machen würde
  • Ja, das funktioniert. Im Grunde, wenn wir RenderBody in _Layout Seite sollte es durch design. Aber der Grund, warum ich mich nicht lieber zu tun, ist zu diesem Zeitpunkt, weil derzeit der layout-Seite nicht viel Inhalt, aber wie wir wachsen, unsere website, das layout der Seite gebunden ist komplexer geworden, und dann wird es eine Menge doppelte Inhalte in beiden Dateien, wenn wir kopieren alles ab RenderBody in beiden layout-Dateien, und es wird die Niederlage der Zweck.
  • Die andere option ist das erstellen mehrerer teilweise auf und nehmen Sie die meisten der Dinge, die außer „RenderBody“ in die jeweiligen teilweise Ansichten, und RenderBody in der layout-Seiten. Aber, die Anzahl der teilweise Ansichten, die so einfach denken, wenn es gibt keine effizientere Methode als das?
  • Was über die Verwendung von „nested-layout“? Ich habe oft die Verwendung mehrerer master-layout als freigegebene layouts mit anderen Kind-layouts, die darauf verweisen, es gibt keine Notwendigkeit, Sie zu wiederholen @Scripts & @Styles Erklärung im Kindes-layouts. In diesem Fall ng-app="myAngularLab" platziert auf einem div statt body.
  • Danke @TetsuyaYamamoto, ja, es scheint geschachtelte layout ist eine ideale Lösung, die in dieser Art von Szenarien. Ich werde erkunden, ein bisschen mehr über Sie, und werde zu aktualisieren meinem code pro dass. danke für Eure Hilfe.
  • kannst du bitte posten Sie Ihre Kommentare als Antwort, so kann ich es markieren.

InformationsquelleAutor Nirman | 2017-07-26



2 Replies
  1. 2

    Ich glaube, Sie brauchen, um zu verwenden, „geschachtelte layout“ durch das setzen einer layout-Seite als „master-Seite“ für andere layouts, ähnlich wie webforms Gegenstück:

    _BaseLayout.cshtml

    <html>
    <head>
        <!-- other header tags (link, meta, title etc.) -->
    
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
    
        <!-- JS & CSS includes if available -->
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <!-- other elements -->
        </div>
        <div class="container body-content">
            @RenderBody()
            <!-- other elements -->
        </div>
    
        @RenderSection("scripts", required: false)
    </body>
    </html>

    _Layout.cshtml

    @{ Layout = "~/Views/Shared/_BaseLayout.cshtml"; } //put reference to base layout here
    
    <div>
        <!-- Non-Angular layout -->
        @RenderBody()
    </div>

    _AngularLayout.cshtml

    @{ Layout = "~/Views/Shared/_BaseLayout.cshtml"; } //put reference to base layout here
    
    <div ng-app="myAngularLab">
        <!-- Angular layout -->
        @RenderBody()
    </div>

    Vorteile durch die Verwendung von „nested “ layout“:

    1. Entfällt die Notwendigkeit, zu wiederholen @Styles.Render & @Scripts.Render auch für @RenderSection (Sie sind automatisch eingefügt, für alle Seiten verweisen auf das Basis-layout).

    2. Eliminiert die Notwendigkeit der Verwendung von mehr als einem body – tag, ersetzen Sie einfach mit div – tag zu halten-Ansicht-Seite Inhalt.

    Die Datei „X“ nicht direkt angefordert, weil es fordert, die „RenderBody“ Methode sicherlich stammt aus Html.Partial genannt, die direkt vom Kind layouts, wo eine layout-Seite mit RenderBody – Methode kann nicht angefordert werden, die direkt als Vorlage.

    Wenn Sie möchten, legen Sie Standard-layout für eine geschachtelte layout, das von der Kind-layout-Referenz in _ViewStart.cshtml:

    @{
        Layout = "~/Views/Shared/_Layout.cshtml";
    }

    Noch ein Hinweis: Teilweise Blick auf die bestimmt sind zur Verwendung in anzeigen, Seiten anzeigen, nicht im layout-Seiten. Layout-Seiten sind speziell als Platzhalter für Seiten anzeigen – nicht direkt von action-Methoden.

    • hilfreiche Antwort mit guter Erklärung => +1
  2. 0

    Versuchen, diese in _Layout.cshtml:

    <body>
        @Html.Partial("_LayoutPartial")
    
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
       <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
    </body>

    und entfernen Sie die @RenderBody() aus _LayoutPartial.cshtml.

    @RenderBody() wird Häufig verwendet, in layout-Seiten, macht es den Teil einer content-Seite, die nicht in einen genannten Bereich.

    Hoffe, das ist hilfreich:)

    • Danke, und Schätze Ihre Antwort. Aber ich schlug vor, diese beinhalten eine Menge duplizierten code auf layout-Seiten wenn Sie sind wohl um zu zeigen, gleichen Inhalt haben, oder sonst kann ich erstellen müssen teilweise mehrere Ansichten, und die Stecker müssen Sie an verschiedenen Orten in der layout-Seite. Geschachtelte layout ist etwas, dass ich würde gerne mehr erkunden.
    • ohhh ok, np , check dieser bei verschachtelten Layout, hoffe es hilft @Nirman
    • Dank Ahmad 🙂 viel geschätzt
    • herzlich Willkommen @Nirman :))

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.