Estoy trabajando en la web de la aplicación, donde la página principal contiene dos partes: la constante de bloque que siempre está visible y el info-bloque formado por uno de los 3 parciales de las vistas. Cada una de las vistas parciales aparece como resultado de una petición AJAX y se carga una sola vez (después de que el cambio de windows es proporcionada por jquery). Funciona bien pero me he encontrado con un problema.

El código html de vistas parciales contiene js funciones que se utilizan en la constante de bloque y de la información en el bloque así. Cuando se carga la página, estas funciones pueden «verse» y funciona, pero resharper no puede encontrar declaraciones de función y me advierten acerca de esto. Yo no puede resolver el problema mediante la transferencia de los mismos en el archivo js externo debido a la sintaxis de afeitar que se puede encontrar en su código.

¿Qué puedo hacer con esto?

Gracias.

Actualización:

Finalmente me he decidido a resolver el problema de la separación de mi código js de vistas. Así que la pregunta era cómo incluir la sintaxis de afeitar en js archivos o ¿cuál es la alternativa aceptable. El popular soluciones que he encontrado son el uso de variables globales, los datos de los atributos y la que me gusta más – RazorJS biblioteca Juan Katsiotis.

http://djsolid.net/blog/razorjs—write-razor-inside-your-javascript-files

Tengo la esperanza de que se va a trabajar estable y hacer Resharper feliz.

Saludos!

Actualización:

Después de 3 años me recordó a esta pregunta y decidí actualizarlo de acuerdo a mi experiencia. De hecho, ahora prefiero no recomendar el uso de bibliotecas adicionales para que. Especialmente si usted no es el único miembro en el equipo de proyecto… es mucho mejor si están garantizados, en todas sus bibliotecas, que son apoyados por el creador y de la comunidad y puede ser fácilmente integrado en el IDE (si utiliza una sintaxis especial, por ejemplo). También a todos los chicos de su equipo debe ser consciente de cómo funciona. Así que ahora yo sugeriría hacer las siguientes cosas:

  1. Contener todos los JS en archivos separados. Aislar tanto como usted puede.
    Proporcionar la API externa para ello.
  2. Llamar a las funciones de la API desde su punto de vista.
  3. Pasar toda la maquinilla de Afeitar de las Url generadas, mensajes de texto, constantes como parámetro de recurso.

Por ejemplo:

archivo js:

$.api.someInitFunction = function(resources){ ... }

Vista:

<script>
    $.api.someInitFunction({
        urls: { myAction: '@Url.Action("MyAction", "MyController")' },
        messages: { error: '@errorMessage' },
        consts: { myConst: @myIntConst }
    });
</script>
  • Yo no podía decidir cuál fue la respuesta más útil para mí 🙂
  • Gracias y bienvenidos a Stackoverflow 🙂
  • Es agradable para empezar con una buena recepción, muchas gracias!
  • el enlace está roto.
  • Eche un vistazo en este; es agradable solución para poner scripts en vista parcial sin comprometer la eficacia
  • es esto todavía recomienda su manera de lidiar con él? (2 años después)
  • la verdad que sí, si el uso de las mismas tecnologías

InformationsquelleAutor Tomy | 2012-06-19

5 Comentarios

  1. 32

    Si Resharper advierte que no es una gran cosa ^_^

    Pero si yo fuera usted, no voy a poner el JavaScript en la vista parcial en todos los.

    Porque la vista parcial puede ser insertado en una página muchas veces, a continuación, obtendrá un problema con su JavaScripts.

    Y para su caso si usted no puede separar el código JavaScript para archivo JS, a continuación, sólo crear otro PartialView y poner estos scripts en él y sólo la hacen en su página principal.

    • Gracias, Wahid! Pero a veces Resharper códigos realmente mejor que yo :), De hecho, sé que no es una buena idea para poner js en vistas parciales. Pero como he dicho, en mi página de existir en una copia, a fin de anidación, por ejemplo, es sólo «impossibru». Siguiendo tu consejo acerca de la vista parcial con secuencias de comandos voy a hacer vistas principales bastante bueno. Pero es una lástima que RenderPartial no resuelve el Resharper problema. Puedo estar equivocado?
    • Si esta es una pequeña aplicación y usted no desea pasar más tiempo en él para seguir con su trabajo. Pero si usted está hablando acerca de la «Programación de hábito», entonces usted debe separar el código JavaScript de las Vistas.
    • Y para el @Html.ActionLink(...) hay muchas soluciones, pero no de ellos es poner el código JavaScript directamente en el PartialView. Usted puede tomar vistazo a esta respuesta stackoverflow.com/a/3789959/105445
    • Sí, es una buena experiencia. Muchas gracias.
  2. 7

    Si quieres escribir vistas parciales que están encapsulados «widgets» que sólo el trabajo una vez que se incluyen en una página, luego la incorporación de un bloque de secuencia de comandos dentro de la vista parcial es una manera limpia para envolver el marcado y el script de inicialización juntos en una visión parcial. Por ejemplo, yo podría tener una vista parcial denominado «_EventList» que yo uso a lo largo de mi sitio. Si la pongo en dos lugares en mi página principal, todo debería funcionar y prefiero no tener que escribir la lógica en mi página principal para inicializar el widget.

    Si usted nunca va a usar más de una vez en una página, su sencillo. Pero si usted puede, a continuación, incluir el script para que no se ejecute dos veces. Ver a continuación. Por el bien de Desbordamiento de la Pila de fragmentos que simular mediante la repetición de la vista parcial dos veces en el fragmento de código para representar incluyendo una vista parcial dos veces en una página maestra.

    Mi página principal aspecto:

    <div id="left-nav">
       @Html.Partial("_EventList")           
    </div>
    
    <div id="body">
    </div>
    
    <div id="right-nav">
       @Html.Partial("_EventList")
    </div>

    Ejemplo:

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Self-contained partial view containing widget -->
    <div id="widgetDiv" class="panel panel-default">
    <div class="panel-heading">Event Dates</div>
    <div class="panel panel-group">
    <ul class="widget">
    <!-- These will load dynamically -->
    </ul>
    </div>
    <script>
    $(document).ready(function() {
    //Run this once only in case widget is on page more than once
    if(typeof $widget == 'undefined') {
    $widget = $("ul.widget"); //could be more than one
    //mock data to simulate an ajax call
    var data = [
    {Description: "March", StartDate: "03/01/2015"},
    {Description: "April", StartDate: "04/01/2015"},
    {Description: "May", StartDate: "05/01/2015"}
    ];
    $.each($widget, function(w, widget) {
    //might be an $.ajax call
    $.each(data, function(i, row) {
    $(widget).append("<li><a href='/Widget/Search?startDate=" + row.StartDate + "'>" + row.Description + "</a></li>");
    });
    });
    }
    });
    </script>
    </div>
    <!-- End of widget /partial view -->
    <!-- Second copy of above for sake of example snippet -->
    <!-- No need to read further -->
    <!-- Self-contained partial view containing widget -->
    <div id="widgetDiv" class="panel panel-default">
    <div class="panel-heading">Event Dates</div>
    <div class="panel panel-group">
    <ul class="tinylist nav nav-sidebar widget">
    <!-- These will load dynamically -->
    </ul>
    </div>
    <script>
    $(document).ready(function() {
    //Run this once only in case widget is on page more than once
    if(typeof $widget == 'undefined') {
    $widget = $("ul.widget"); //could be more than one
    //mock data to simulate an ajax call
    var data = [
    {Description: "March", StartDate: "03/01/2015"},
    {Description: "April", StartDate: "04/01/2015"},
    {Description: "May", StartDate: "05/01/2015"}
    ];
    $.each($widget, function(w, widget) {
    //might be an $.ajax call
    $.each(data, function(i, row) {
    $(widget).append("<li><a href='/Widget/Search?startDate=" + row.StartDate + "'>" + row.Description + "</a></li>");
    });
    });
    }
    });
    </script>
    </div>
    <!-- End of widget /partial view -->

    • A pesar del hecho de que hay más upvoted respuestas, yo definitivamente recomiendo este abordaje en lugar de desdoblamiento highy cohesivo dependencias sólo por el bien de la agrupación de ellos por las extensiones. Así que sí, un gran ++ de mí.
    • Estoy totalmente de acuerdo: no dividir cohesivo HTML y JS. Sin duda… Pero tu ejemplo parcial de la vista no funciona para todos los consumidores de Visual Studios plantillas de ASP MVC: Dentro de _Layout.cshtml jQuery es representado después @RenderBody() así que usted puede utilizar. Su solución no es realmente mejor: La primera línea <script src=".../jquery.min.js"></script> incluirá jQuery dos veces o más a menudo (1x por vista parcial y 1x en que _Layout.cshtml)
    • el ejemplo está destinado a funcionar en el fragmento de código del editor con el fin de mostrar la técnica. De hecho, me advirtió de que, incluyendo las múltiples jquery incluye, en mi respuesta y sugerencia de mejoras, así que no estoy seguro de que si usted lee mi «descargo de responsabilidad». Mi verdadero diseño de páginas suelen tener jquery y otras secuencias de comandos en la sección de la cabeza. El trabajo adicional fuera del alcance y los requisitos de tiempo de mi respuesta en el tiempo. Usted es bienvenido para mejorar esta respuesta como el tiempo que todavía funciona dentro de Desbordamiento de Pila
  3. 3

    Estoy de acuerdo con Wahid que usted no debe poner JavaScript en las vistas en todos los parciales o de otra manera. He visto lo suficiente de código que hace esto para saber que sólo conduce a nada bueno.

    También me gustaría decir que usted debe ser capaz de transferir la lógica encapsulada en la sintaxis de Afeitar en el JavaScript, usted sólo tiene que pasar a su JavaScript de la información necesaria por parte de su lógica.

    Sólo estoy adivinando a partir de la experiencia con el siguiente comentario, pero debe diseñar el JavaScript de la misma manera que el diseño de la estructura de su C# o VB.NET código. De esa manera la lógica que utiliza maquinilla de Afeitar para debe ser parte de tu JavaScript.

    De esa manera que el JavaScript serán más fáciles de mantener y supongo que Resharper también debería ser más felices.

    • Gracias por tu respuesta! Pero el problema no es con la lógica. Yo uso la hoja de Afeitar para construir enlaces (Url.La acción, por ejemplo) y cosas por el estilo. Pasarlos como parámetros un aspecto bastante extraño, supongo.
    • Para enlaces puedes poner ellos en el href solo uso preventDefault. También html5 atributos de datos son útiles en estas situaciones. consultar cualquiera dojo o yui3 y ver cómo las bibliotecas están construidos.
    • Características útiles, gracias!
    • el único problema que tengo con su respuesta es que aún no he podido obtener una respuesta. El propósito de la creación de la @section llamadas es así que ver específicos prestados de salida pueden ser colocados en las áreas de una vista. Si tengo una empresa de nivel de aplicación y tiene cientos de secuencias de comandos, no quiero incluir a todos ellos en mi diseño, ya que la representación de la salida de mi html enorme. Permitiendo la inclusión de un @section en una vista y/o parcial de la vista es una necesidad en mi opinión en cuanto a rendimiento.
    • Yo recomendaría que usted concat y comprimir tu javascript en ese caso. El navegador carga una vez y la memoria caché. Esto no significa que usted tiene que escribir tu código javascript para que pueda manejar esto, sin embargo.
    • Gracias por la respuesta @eaglestorm. Te voy a dar que un tiro.

  4. 2

    Hago esto y es muy conveniente. Funciona bien para cargar dinámicamente parcial de fragmentos de javascript con la disponibilidad de ViewBag, HttpContext, etc.

    Que se traduce en algo que se siente como el uso de plantillas T4.

    Usted puede incluso conseguir la validación de javascript, intellisense, etc si usted agregar fantasma etiquetas de script como este.

    @using System.Configuration
    @if (false)
    {
    @:<script type="text/javascript">
    }    
    $scope.clickCartItem = function(cartItem) {
    console.log(cartItem);
    window.location.href =@Html.Raw("('" + ConfigurationManager.AppSettings["baseUrl"] + "/Checkout/' + cartItem.ItemId)");
    };
    dataAccess.getCart(
    function (response) {
    //...
    },
    function (response) {
    //...
    }
    );
    @if (false)
    {
    @:</script>
    }
  5. 0

    Para los futuros espectadores de esta pregunta, aquí es mi experiencia. Pensé que sería una buena idea para mantener los scripts que sólo fue utilizado por el parcial en el parcial para la organización.

    El problema que tuve fue durante la depuración, yo a veces tengo problemas para conseguir mis puntos de interrupción para golpear y no ser capaz de solucionar un problema, a menos que me mudé a la secuencia de comandos a la vista principal. Lo más probable debido a la impresión de que la función más de una vez. Tenía la esperanza de secciones resolver y organizar esto mejor, pero las secciones no son compatibles con vistas parciales (al menos no en MVC 4).

    Así que mi respuesta sería por el bien de mantenimiento y depuración, no hay secuencias de comandos no se deben colocar en el interior de vistas parciales.

Dejar respuesta

Please enter your comment!
Please enter your name here