Incluir archivo JavaScript en las vistas parciales

https://stackoverflow.com/questions/912755

06-09-2019
|

Pregunta

Me pregunto cuál es la mejor práctica es para incluir archivos javascript dentro de vistas parciales. Una vez dictada esto va a terminar como un js incluyen la etiqueta en el medio de html de mi página. Desde mi punto de vista esto no es una buena manera de hacer esto. Pertenecen en la etiqueta de la cabeza y, como tal, no debe impedir que el navegador haciendo que el HTML de una sola vez.

Un ejemplo: Estoy usando un plugin jQuery picturegallery dentro de una vista parcial 'picturegallery' ya que esta vista parcial será utilizado en varias páginas. Este plugin solo necesita ser cargado cuando se utiliza este punto de vista y no quiero tener que necesitar saber qué complementos cada vista parcial está utilizando ...

Gracias por sus respuestas.

Solución

Parece muy similar a esta pregunta: Vinculación de Bibliotecas de JavaScript en controles de usuario

Voy a renovar mi respuesta que esa pregunta aquí.

Sin duda lo desaconsejan su puesta parciales dentro de exactamente la razón por la que usted menciona. Hay una alta probabilidad de que un punto de vista podría tirar en dos parciales que ambos tienen referencias al mismo archivo JS. También tiene el impacto en el rendimiento de los js de carga antes de cargar el resto del HTML.

No sé sobre las mejores prácticas, pero elijo para incluir todos los archivos js comunes dentro de la Maestra y luego definir un ContentPlaceHolder separado para algunos archivos js adicionales que son específicos de un determinado número de puntos de vista o pequeño.

El siguiente es un ejemplo de página maestra - es bastante explicativo

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<head runat="server">
    ... BLAH ...
    <asp:ContentPlaceHolder ID="AdditionalHead" runat="server" />
    ... BLAH ...
    <%= Html.CSSBlock("/styles/site.css") %>
    <%= Html.CSSBlock("/styles/ie6.css", 6) %>
    <%= Html.CSSBlock("/styles/ie7.css", 7) %>
    <asp:ContentPlaceHolder ID="AdditionalCSS" runat="server" />
</head>
<body>
    ... BLAH ...
    <%= Html.JSBlock("/scripts/jquery-1.3.2.js", "/scripts/jquery-1.3.2.min.js") %>
    <%= Html.JSBlock("/scripts/global.js", "/scripts/global.min.js") %>
    <asp:ContentPlaceHolder ID="AdditionalJS" runat="server" />
</body>

Html.CSSBlock y Html.JSBlock son, obviamente, mis propias extensiones pero una vez más, que son explica por sí mismo en lo que hacen.

A continuación, en una vista digamos SignUp.aspx que tendría

<asp:Content ID="signUpContent" ContentPlaceHolderID="AdditionalJS" runat="server">
    <%= Html.JSBlock("/scripts/pages/account.signup.js", "/scripts/pages/account.signup.min.js") %>
</asp:Content>

HTHS, Charles

Sal. Aquí hay una pregunta de seguimiento Pregunté por minifying y concatenar archivos JS: Concatenate y Minify JS en el volar o en tiempo de compilación - ASP.NET MVC

EDIT: a lo solicitado en mi otra respuesta, mi aplicación de .JSBlock (a, b) conforme a lo solicitado

public static MvcHtmlString JSBlock(this HtmlHelper html, string fileName)
{
    return html.JSBlock(fileName, string.Empty);
}

public static MvcHtmlString JSBlock(this HtmlHelper html, string fileName, string releaseFileName)
{
    if (string.IsNullOrEmpty(fileName))
        throw new ArgumentNullException("fileName");

    string jsTag = string.Format("<script type=\"text/javascript\" src=\"{0}\"></script>",
                                 html.MEDebugReleaseString(fileName, releaseFileName));

    return MvcHtmlString.Create(jsTag);
}

Y a continuación, donde la magia sucede ...

    public static MvcHtmlString MEDebugReleaseString(this HtmlHelper html, string debugString, string releaseString)
    {
        string toReturn = debugString;
#if DEBUG
#else
        if (!string.IsNullOrEmpty(releaseString))
            toReturn = releaseString;
#endif
        return MvcHtmlString.Create(toReturn);
    }

Otros consejos

La razón por la que pondría una secuencia de comandos en la parte inferior de la página es para asegurar que el DOM se ha cargado antes de realizar cualquier manipulación. Esto también se puede lograr en algo así como el $ (document) ready (devolución de llamada); método jQuery.

Comparto la opinión de no poner JavaScript embebido en el html. En lugar de eso uso un asistente de HTML para crear un div vacío para usar como una instrucción de servidor. El sig ayudante es Html.ServerData (String name, los datos de objeto);

Yo uso este método ServerData de instrucciones del servidor al cliente. La etiqueta div mantiene limpio y el atributo "Data-" es HTML5 válido.

Para la instrucción CargarScript que puede hacer algo como esto en mi ascx o aspx:

<%= Html.ServerData("loadScript", new { url: "pathTo.js" }) %>

O añadir otro ayudante para hacer esto que se ve un poco más limpio:

<%= Html.LoadScript("~/path/to.js") %>

La salida html sería:

<div name="loadScript" data-server="encoded json string">

A continuación, tengo un método jQuery que puede encontrar cualquier etiqueta de datos del servidor: $ (ContainingElement) .serverData ( "CargarScript"); // devuelve un jQuery como matriz de los objetos JSON decodificados.

El cliente puede ser algo como esto:

var script = $(containingelement").serverData("loadScript");
$.getScript(script.url, function () {
    // script has been loaded - can do stuff with it now
});

Esta técnica es ideal para los controles de usuario o secuencias de comandos que necesitan ser cargado dentro del contenido ajax cargado. La versión que escribí es un poco de secuencias de comandos de manipulación de almacenamiento en caché más complicados para que se carguen solamente una vez por cada carga de página completa y contienen devoluciones de llamada y jQuery disparadores para que pueda conectar en él cuando está listo.

Si alguien está interesado en la versión completa de este (de MVC para la extensión de jQuery) estaría feliz de mostrar esta técnica con más detalle. De lo contrario -. Espera que alguien le da una nueva forma de abordar este problema complicado

Hoy he creado mi propia solución que encaja a la perfección. Si se trata de un buen diseño o no, es para que todos ustedes decidir, pero pensé que debería compartir cualquier manera!

A continuación se muestra mi clase HtmlExtensions que le permite hacer esto en su masterpage:

<%=Html.RenderJScripts() %>

Mi clase HtmlExtensions:

public static class HtmlExtensions
{
    private const string JSCRIPT_VIEWDATA = "__js";

    #region Javascript Inclusions

    public static void JScript(this HtmlHelper html, string scriptLocation)
    {
        html.JScript(scriptLocation, string.Empty);
    }

    public static void JScript(this HtmlHelper html, string scriptLocationDebug, string scriptLocationRelease)
    {
        if (string.IsNullOrEmpty(scriptLocationDebug))
            throw new ArgumentNullException("fileName");

        string jsTag = "<script type=\"text/javascript\" src=\"{0}\"></script>";

#if DEBUG
        jsTag = string.Format(jsTag, scriptLocationDebug);
#else
        jsTag = string.Format(jsTag, !string.IsNullOrEmpty(scriptLocationRelease) ? scriptLocationRelease : scriptLocationDebug);
#endif

        registerJScript(html, jsTag);
    }

    public static MvcHtmlString RenderJScripts(this HtmlHelper html)
    {
        List<string> jscripts = html.ViewContext.TempData[JSCRIPT_VIEWDATA] as List<string>;
        string result = string.Empty; ;
        if(jscripts != null)
        {
            result = string.Join("\r\n", jscripts);
        }
        return MvcHtmlString.Create(result);
    }

    private static void registerJScript(HtmlHelper html, string jsTag)
    {
        List<string> jscripts = html.ViewContext.TempData[JSCRIPT_VIEWDATA] as List<string>;
        if(jscripts == null) jscripts = new List<string>();

        if(!jscripts.Contains(jsTag))
            jscripts.Add(jsTag);

        html.ViewContext.TempData[JSCRIPT_VIEWDATA] = jscripts;
    }

    #endregion

}

¿Qué está pasando?
La clase anterior se extenderá el HtmlHelper con los métodos para añadir enlaces javascript a una colección que se está almacenado por la colección HtmlHelper.ViewContext.TempData. Al final de la masterpage pongo el <%=Html.RenderJScripts() %> que se bucle la colección jscripts dentro de la HtmlHelper.ViewContext.TempData y hacer que estos a la salida.

Hay una desventaja sin embargo, .. Usted tiene que asegurarse de que no se representan las secuencias de comandos antes de que les haya añadido. Si te gustaría hacer esto por enlaces CSS, por ejemplo, que no funcionaría porque hay que colocarlos en la etiqueta <head> de la página y la HtmlHelper haría que la salida antes de haber añadido un enlace.

Esto parece una pregunta similar (aunque no del todo). ¿Es una mala práctica para volver vistas parciales que contienen JavaScript?

Mi preferencia será la creación de una página plugin.master que hereda de su Site.Master principal. La idea es que usted rellena estos plugins en plugin.master y hacer los 8 o más páginas que van a usar esta vista parcial a heredar de plugin.master.

El enfoque preferido es que poner los scripts en el parte inferior, sin embargo, si no se puede evitar que entonces es razonable para ponerlos en el medio.

Los navegadores normalmente se cargan los diversos elementos de la página en paralelo, sin embargo, mientras el navegador está descargando el archivo Javascript, no se descarga ningún otro elemento de página en paralelo hasta que el Javascript se realiza la descarga. Esto significa que sus imágenes y lo que no tendrán que esperar por lo que generalmente se considera mejor para mover las secuencias de comandos en la parte inferior, pero si el script es pequeño, entonces yo no me preocuparía por eso.

hejdig.

Jugando con Aspnetmvc3 decidí, por ahora, para incluir sólo mi archivo javascript en el parcial

Este archivo js es entonces específico para mi archivo /user/List.schtml.

/ DE

Los diseñadores de MVC pasó por un montón de problemas que nos impida el uso de códigos traseros, pero mediante la creación de un archivo llamado <> ViewName .aspx.cs y modificar el atributo hereda de la página aspx en consecuencia, todavía es posible para obtenerlos.

Yo diría, el mejor lugar para poner el include sería en el manipulador Page_Load en el código subyacente (usando Page.ClientScript.RegisterClientScriptInclude).

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow