Jak dołączyć JavaScript z widoku częściowego w ASP.NET MVC3

Chciałbym być w stanie zapewnić sposób częściowych widoków do włączenia kodu/plików JavaScript u dołu widoku. Umożliwi to częściowym widokom uwzględnienie dowolnych plików JavaScript, od których zależą. Na przykład, jeśli chciałbym napisać fragment, który musi utworzyć okno dialogowe JQueryUI, chciałbym zaimportować plik JavaScript JQueryUI, a także dodać kod JavaScript, który renderuje okno dialogowe.Jak dołączyć JavaScript z widoku częściowego w ASP.NET MVC3

Obecnie piszę ten kod w widoku nadrzędnym, co sprawia, że używanie widoku częściowego jest bezcelowe.

Rozumiem, że wielokrotne wywoływanie RenderPartial powodowałoby wielokrotne dołączanie skryptów. Jest to problem, który można rozwiązać, gdy już wiem, jak włączyć JavaScript do głównego widoku z częściowego widoku.

Źródło

2011-01-16 Jonathan Matheus

Możesz dodać znaczniki <script> wewnątrz znacznika <body>, aby móc je umieścić w widoku częściowym.

Źródło

2011-01-16 20:59:29 Vadim

+15

posiadające znaczniki skryptów w środku div i tabel jest uważane za złą praktyką i może prowadzić do problemów z wydajnością stronie obciążenia. Chcę dodać skrypty w sekcji head lub u dołu strony. –

To również nie rozwiązuje konkretnego problemu, o który pytano w tym pytaniu. Zgodnie z najlepszymi praktykami typowy układ MVC i struktura widoku powoduje, że skrypt zawiera renderowanie u dołu strony. Dlatego używanie składni jQuery na przykład w skrypcie w widoku częściowym powoduje błąd składni JS. – Sean

Definiowanie ContentPlaceHolder w MasterPage (ASPX) lub sekcji w układ strony (Razor)

ASPX:

<body> 
    <!-- End of Body --> 
    <asp:ContentPlaceHolder ID="JavaScriptIncludes" runat="server" /> 
</body>

Razor:

<body> 
    <!-- End of Body --> 
    @RenderSection("JavaScriptIncludes", required: false) 
</body>

Następnie w częściowej:

ASPX:

<asp:Content ID="ExtraJs" ContentPlaceHolderID="JavaScriptIncludes" runat="server"> 
    <script type="text/javascript" src="@Url.Content("/Scripts/SomeScript.js")" /> 
</asp:Content>

Razor:

@section JavaScriptIncludes 
{ 
    <script type="text/javascript" src="@Url.Content("/Scripts/SomeScript.js")" /> 
}

Również pomyśleć o użyciu Pomocnika HTML do renderowania na zewnątrz <script> tagi.

Źródło

2011-01-16 22:37:46 RPM1984

+14

Nie udało mi się uzyskać tego przy pomocy maszynki Razor. To właśnie robię w moich poglądach. Jednak nie wygląda na to, że częściowe elementy dziedziczą układ z ich widoku nadrzędnego. Jeśli spróbujesz ustawić go jawnie w swoich widokach częściowych za pomocą twojego przykładu, otrzymasz dodatkowe tagi treści, w których renderowane są częściowe widoki. –

"Jednak nie wygląda na to, że częściowe elementy dziedziczą układ z ich widoku nadrzędnego." - Jesteś pewny? Czy możesz podać częściowy widok - powinien on mieć definicję układu u góry. – RPM1984

Jakąkolwiek odpowiedź, która działa na maszynie Razor? Jeśli uwzględnisz układ w częściowym, elementy układu zostaną zduplikowane. Jeśli ich nie uwzględnisz, sekcja częściowa zostanie zignorowana. –

Oto jak można mieć Częściowy widok z kodu JavaScript, który wykorzystuje każdą bibliotekę (nawet gdy biblioteki są ładowane na końcu strony)

W swojej częściowy widok dodają:

@{ 
    TempData["Script"] += "MyFunction();"; 
} 

<script type="text/javascript"> 
    function MyFunction() { 
     // you can call your library here, e.g. jquery: 
     $(function() { 

     }); 
    } 
</script>

W swojej _Layout.cshtml stronie dodać po twoim biblioteki obejmowały:

@*LOAD YOUR LIBRARIES HERE (E.G. JQUERY) *@ 


@if (TempData["Script"] != null) 
{ 
    <script type="text/javascript"> 
     @Html.Raw(TempData["Script"].ToString()) 
    </script> 
}

Możesz mieć wiele widoków częściowych, dołączając swoje funkcje do tego samego klucza TempData ["Script"]. Będą one szczęśliwie współistnieją jeśli trzymać dodając funkcje używając + = operatora:

@{ 
    TempData["Script"] += "AnotherFunction();"; 
}

Źródło

2016-10-07 06:45:32 VeganHunter

Jak dołączyć JavaScript z widoku częściowego w ASP.NET MVC3

Odpowiedz

Powiązane problemy