28

Mi piacerebbe essere in grado di fornire un modo per le viste parziali di includere codice/file JavaScript nella parte inferiore di una vista. Ciò consentirebbe alle viste parziali di includere qualsiasi file JavaScript da cui dipendono. Ad esempio, se volessi scrivere un partial che deve creare una finestra di dialogo JQueryUI, vorrei importare il file JavaScript JQueryUI e aggiungere codice JavaScript che rende la finestra di dialogo.Come includere JavaScript da una vista parziale in ASP.NET MVC3

Attualmente sto scrivendo questo codice nella vista genitore, il che rende quasi inutile l'uso di una vista parziale.

Capisco che chiamare più volte RenderPartial comporti l'inserimento di script più volte. Questo è un problema risolvibile una volta che so come includere effettivamente JavaScript nella vista principale dalla vista parziale.

risposta

0

È possibile includere i tag <script> all'interno del tag <body> in modo da poterli inserire nella vista parziale.

+15

con tag di script nel bel mezzo di div e tabelle è considerata una cattiva pratica e può portare a pagina problemi di prestazioni di carico. Voglio la possibilità di aggiungere gli script nella sezione di testa o nella parte inferiore della pagina. –

+1

Anche questo non affronta il particolare problema che viene posto in questa domanda. Seguendo le best practice, il tipico layout MVC e i risultati della struttura di visualizzazione nello script includono il rendering nella parte inferiore della pagina. Pertanto, utilizzando la sintassi jQuery, ad esempio, in uno script in una vista parziale si ottiene un errore di sintassi JS. – Sean

7

Definire ContentPlaceHolder nel MasterPage (ASPX) o Sezione nel layout di pagina (Razor)

ASPX:

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

Razor:

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

Poi nel parziale:

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")" /> 
} 

pensare anche sull'utilizzo di un Helper HTML per rendere i <script> tag.

+14

Non sono riuscito a farlo funzionare con Razor. Questo è quello che ho fatto nelle mie opinioni. Tuttavia, non sembra che i partial ereditino il layout dalla loro vista genitore. Se provi a impostarlo esplicitamente nelle tue viste parziali usando il tuo esempio, alla fine ottieni dei tag body aggiuntivi in ​​cui vengono visualizzate le viste parziali. –

+0

"Tuttavia, non sembra che i partial ereditino il layout dalla loro vista genitore." - sei sicuro? Puoi fornire la tua vista parziale - dovrebbe avere la definizione del layout in alto. – RPM1984

+0

Qualche risposta che funziona per Razor? Se includi il layout nel partial, gli elementi del layout vengono duplicati. Se non li includi, la sezione nel partial viene ignorata. –

1

Ecco come si può avere vista parziale con il codice JavaScript che usa qualsiasi libreria (anche quando le librerie sono caricate al termine della pagina)

Secondo te vista parziale aggiuntivo:

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

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

     }); 
    } 
</script> 

Nella tua _Layout.cshtml pagina aggiungi dopo le librerie inclusi:

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


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

È possibile avere più viste parziali che collegano le loro funzioni alla stessa chiave TempData ["Script"]. Saranno felicemente coesistere se continuare ad aggiungere le funzioni utilizzando + = operatore:

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