Verwenden Sie Abschnitte in Teilansichten in MVC 4.0

Question

Ich möchte Skripts in meine Teilansichten einschließen, wenn ich Fälle habe, in denen ich jQuery ui auf bestimmten Elementen initialisieren muss. Es gehört wirklich zur partiellen und nicht zur enthaltenden Seite oder zum Layout.

Angeblich gibt es einen Weg, es in MVC 4 zu tun, aber ich kann anscheinend keine Informationen darüber finden.

Answer 1

Ich hatte auch ein ähnliches Problem. Hoffe das hilft. Wir wollten eine Ansicht, die einen gemeinsamen Header-Abschnitt enthält, der einige Daten anzeigt, und einen anderen Abschnitt, der sich dynamisch ändern sollte, wenn wir auf einen Link auf unserer Seite klicken. (etwas ähnlich wie eine Registerkarte) Da wir den Header-Abschnitt nicht mehrere Male neu laden wollten, entschieden wir uns, eine Container-Ansicht und ein Platzhalter-div zu haben, um eine Teilansicht dynamisch zu laden, wenn wir auf einen Ajax klicken Verknüpfung. Teilansichten, die in den Platzhalter geladen wurden, enthielten jedoch viel JavaScript-Code und wir konnten nicht den gesamten Code, der von verschiedenen Teilansichten verwendet wurde, in eine einzige Javascript-Datei einschließen und aus der Containeransicht verweisen, da es Konflikte gab Funktionen. Die Einführung von Namespaces, um dieses Problem zu beheben, war auch kein sehr effizienter Ansatz, da die gesamte JavaScript-Logik immer noch unnötig geladen wäre. Ein bisschen Googeln hat mir klar gemacht, dass es nicht funktionieren wird, wenn ich einen Skriptabschnitt in einer Teilansicht habe. Ich habe versucht, mit @RenderSection ("partialScripts", erforderlich: false) einen Abschnitt in meiner Ansicht zu definieren, allerdings ohne Erfolg, da RenderSection nur in einer Layout-Ansicht funktioniert. Im Folgenden ist der Ansatz, den ich unternommen habe, um dieses Problem zu überwinden. Der in der Layoutansicht definierte Abschnitt "scripts" kann ein beliebiges gültiges Markup enthalten. Also entschied ich mich, eine div zu haben, die mir helfen wird, Skripte dynamisch innerhalb des Scripts-Bereichs meiner Containeransicht zu laden. Der OnSuccess-Ereignishandler der Aktionsverknüpfung wurde verwendet, um die Skripts dynamisch anzuhängen. Hier ist der Code für meine Containeransicht.

<ul> 
    <li> 
     @Ajax.ActionLink("Partial One", "PartialOne", ajaxOptions: new AjaxOptions 
        { 
         HttpMethod = "Get", 
         InsertionMode = InsertionMode.Replace, 
         UpdateTargetId = "container", 
         OnSuccess = "loadScriptsDynamically('PartialOne')" 
        }) 
    </li> 
    <li> 
     @Ajax.ActionLink("Partial Two", "PartialTwo", ajaxOptions: new AjaxOptions 
        { 
         HttpMethod = "Get", 
         InsertionMode = InsertionMode.Replace, 
         UpdateTargetId = "container", 
         OnSuccess = "loadScriptsDynamically('PartialTwo')" 
        }) 
    </li> 
</ul> 

<div id="container"> 
</div> 

@section scripts 
{ 
    <script src="@Url.Content("~/Scripts/app/Container.js")"></script> 
    <div id="dynamicScripts" 
     data-partial-one="@Url.Content("~/Scripts/App/PartialOne.js")" 
     data-partial-two="@Url.Content("~/Scripts/App/PartialTwo.js")"> 
    </div> 
} 

-Code aus der Controller-Klasse

public PartialViewResult PartialOne() 
    { 
     return PartialView("_PartialOne"); 
    } 

    public PartialViewResult PartialTwo() 
    { 
     return PartialView("_PartialTwo"); 
    } 

Container.js Datei enthält die Logik, die die notwendigen Skripte für verschiedene Teilansichten dynamisch geladen werden.

function loadScriptsDynamically(name) { 
    var script = document.createElement('script'); 
    var dynamicScriptsDiv = document.getElementById('dynamicScripts'); 
    var dynamicScriptDivJQuery = $('#dynamicScripts'); 
    dynamicScriptDivJQuery.empty(); 
    if (name === 'PartialOne') { 
     script.src = dynamicScriptDivJQuery.data('partial-one'); 
     dynamicScriptsDiv.appendChild(script); 
    } else if (name === 'PartialTwo'){ 
     script.src = dynamicScriptDivJQuery.data('partial-two'); 
     dynamicScriptsDiv.appendChild(script); 
    } 
} 

Wir können jQuery nicht verwenden, um ein Skriptelement aufgrund einiger Einschränkungen an ein div anzuhängen. Aber wir können einen altmodischen JavaScript-Code verwenden, um ein Skriptelement zu erstellen und an dynamicScriptsDiv anzuhängen. Bitte beachten Sie, dass ich auf die Skriptpfade zugreife, die ich zuvor an dynamicScriptsDiving angehängt habe, indem ich einige Datenattribute verwende, da unsere MVC-App auf dem IIS-Server läuft und wir sie nicht hart codieren wollen.

Das Anhängen an Ereignisse, nachdem das Skript dynamisch geladen wurde, war unsere nächste Herausforderung. Durch Verwendung einer Sofortaufruffunktion konnte ich meinen gesamten Ereignisbindungscode und jede Initialisierungslogik, die ich ausführen muss, unter Verwendung des folgenden Codes registrieren.

(function initPartialOne() { 
    $('#myButton').click(function() { 
     setLabelText(); 
    }); 
})(); 

function setLabelText() { 
    $('#myLabel').text('One was clicked'); 
} 

Und schließlich der Code für eine meiner Teilansichten.

<label id="myLabel">[Message]</label> 
<input type="button" id="myButton" value="Click me partial one"/> 

Answer 2

Dies ist in ASP.NET MVC (See second comment in this post) nicht möglich. Abschnitte können nur in (Haupt-) Ansichten verwendet werden, nicht in Teilansichten.

Ich bin derzeit nicht in der Lage, Ressourcen nach MVC Version 4 zu finden, aber ein kurzer Test in Visual Studio schlägt auch für MVC 4 fehl, wenn Sie die gesamte Teilansicht innerhalb des Abschnitts rendern.

Trotzdem würde ich solche Dinge nicht empfehlen. Ich habe Caching-Probleme in der Vergangenheit mit Donut-Caching Teilansichten zum Beispiel erlebt. Das Zwischenspeichern der Teilansichten führte dazu, dass Code nicht ausgeführt wurde und verursachte, dass der erforderliche JavaScript-Code nicht gerendert wurde. Daher empfehle ich, alles, was Sie für die Teilansicht benötigen, in die Teilansicht selbst zu stellen oder (was noch besser wäre) über ein klares Design nachzudenken und Ihren Javascript-Code in eine verkleinerte Javascript-Datei zu schreiben, die einmal für die ganze Seite geladen wird (und wird dann im Cache des Browsers zwischengespeichert).