28

Me gustaría poder proporcionar una forma de que las vistas parciales incluyan código/archivos JavaScript en la parte inferior de una vista. Esto permitiría vistas parciales para incluir cualquier archivo JavaScript del que dependan. Por ejemplo, si quisiera escribir un parcial que necesita crear un diálogo JQueryUI, me gustaría importar el archivo JQueryUI JavaScript así como también agregar el código JavaScript que representa el diálogo.Cómo incluir JavaScript desde una vista parcial en ASP.NET MVC3

Actualmente estoy escribiendo este código en la vista principal, lo que hace que sea inútil utilizar una vista parcial.

Entiendo que al llamar varias veces al RenderPartial, los guiones se incluirán varias veces. Este es un problema solucionable una vez que sé cómo incluir JavaScript en la vista principal desde la vista parcial.

Respuesta

0

Puede incluir etiquetas <script> dentro de la etiqueta <body> para que pueda tenerlas dentro de su vista parcial.

+15

que tienen etiquetas script en el medio de divs y tablas se considera una mala práctica y puede conducir a problemas de rendimiento de carga de páginas. Quiero la capacidad de agregar los guiones en la sección principal o en la parte inferior de la página. –

+1

Esto tampoco soluciona el problema específico que se plantea en esta pregunta. Siguiendo las prácticas recomendadas, los diseños típicos de MVC y los resultados de la estructura de vista en el script se representan en la parte inferior de la página. Por lo tanto, el uso de la sintaxis de jQuery, por ejemplo, en una secuencia de comandos en una vista parcial da como resultado un error de sintaxis de JS. – Sean

7

Definir ContentPlaceHolder en su MasterPage (ASPX) o Sección en su diseño de página (Razor)

ASPX:

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

Razor:

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

A continuación, en el parcial:

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

también pensar en usar un ayudante HTML para renderizar los <script> etiquetas.

+14

No pude hacer que esto funcione con Razor. Eso es lo que he estado haciendo desde mi punto de vista. Sin embargo, no parece que los parciales hereden el diseño de su vista principal. Si intentas establecerlo explícitamente en tus vistas parciales usando tu ejemplo, terminas obteniendo etiquetas corporales adicionales donde se representan tus vistas parciales. –

+0

"Sin embargo, no parece que los parciales hereden el diseño de su vista principal". - ¿Estás seguro? ¿Puede proporcionar su vista parcial? Debe tener la definición de diseño en la parte superior. – RPM1984

+0

¿Alguna respuesta que funcione para Razor? Si incluye el diseño en el parcial, los elementos de diseño se duplican. Si no los incluye, la sección en el parcial se ignora. –

1

Aquí es cómo se puede tener la vista parcial con código JavaScript que utiliza cualquier biblioteca (incluso cuando las bibliotecas se cargan al final de la página)

En su vista parcial complemento:

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

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

     }); 
    } 
</script> 

En su página de _Layout.cshtml añadir después de sus bibliotecas incluyen:

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


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

Puede tener múltiples vistas parciales adjuntando sus funciones a la misma clave TempData ["Script"]. Con mucho gusto coexistir si se mantiene la adición de las funciones usando + = operador:

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