vez - insertar javascript en html
¿Está bien poner JavaScript en vistas parciales? (4)
Estoy trabajando en la aplicación web, donde la página principal contiene dos partes: el bloque constante que siempre está visible y el bloque de información compuesto por una de las 3 vistas parciales. Cada una de las vistas parciales aparece como resultado de la solicitud AJAX y se carga una sola vez (después de que jquery proporcione las ventanas de cambio). Funciona bien pero me he enfrentado a un problema.
El código html de vistas parciales contiene funciones js que también se usan en el bloque constante y en el bloque de información. Cuando la página está cargada, estas funciones pueden "verse" entre ellas y funciona, pero el reafilador no puede encontrar declaraciones de funciones y advertirme sobre esto. No puedo resolver el problema transfiriéndolos a un archivo js externo debido a la sintaxis de la afeitadora que se puede encontrar en su código.
¿Qué puedo hacer con esto?
Gracias.
Actualizar:
Finalmente, he decidido resolver el problema que separa mi código js de las vistas. Entonces, la nueva pregunta fue cómo incluir la sintaxis de la afeitadora en archivos js o cuál es la alternativa aceptable. Las soluciones populares que he encontrado están usando variables globales, atributos de datos y el que más me gusta: la biblioteca RazorJS de John Katsiotis.
http://djsolid.net/blog/razorjs---write-razor-inside-your-javascript-files
Espero que funcione estable y haga feliz a Resharper.
¡Aclamaciones!
Actualizar:
Después de 3 años, recordé esta pregunta y decidí actualizarla de acuerdo con mi experiencia. De hecho, ahora prefiero no recomendar el uso de bibliotecas adicionales para eso. Especialmente si usted no es el único miembro del equipo del proyecto ... Es mucho mejor si está asegurado en todas sus bibliotecas, es compatible con el creador y la comunidad y puede integrarse fácilmente en su IDE (si utiliza una sintaxis especial, por ejemplo) . Además, todos los chicos de tu equipo deberían saber cómo funciona. Así que ahora sugeriría hacer las siguientes cosas:
- Mantenga todo el JS en archivos separados. Aísla todo lo que puedas. Proporcione la API externa para ello.
- Llame a las funciones API desde sus Vistas.
- Pase todos los URL generados por Razor, mensajes de texto, constantes como parámetro de recursos.
Por ejemplo:
archivo js:
$.api.someInitFunction = function(resources){ ... }
Ver:
<script>
$.api.someInitFunction({
urls: { myAction: ''@Url.Action("MyAction", "MyController")'' },
messages: { error: ''@errorMessage'' },
consts: { myConst: @myIntConst }
});
</script>
Estoy de acuerdo con Wahid en que no debes poner JavaScript en las vistas en forma parcial o de otra manera. He visto suficiente código que hace esto para saber que solo conduce a nada bueno.
También diría que debería poder transferir la lógica encapsulada en la sintaxis de Razor al JavaScript, solo tiene que pasarle a su JavaScript la información que necesita su lógica.
Estoy adivinando por experiencia con este próximo comentario, pero debes diseñar el JavaScript de la misma manera que diseñarías la estructura de tu código C # o VB.NET. De esa manera, la lógica para la que está usando Razor debe ser parte de su JavaScript.
De esa forma, su JavaScript será más fácil de mantener y supongo que Resharper también debería ser más feliz.
Lo hago y lo encuentro muy conveniente. Funciona bien cargar dinámicamente fragmentos de JavaScript parciales con la disponibilidad de ViewBag, HttpContext, etc.
Resulta en algo que se siente como usar plantillas T4.
Incluso puede obtener validación de JavaScript, intellisense, etc. si agrega etiquetas de script phantom como esta.
@using System.Configuration
@if (false)
{
@:<script type="text/javascript">
}
$scope.clickCartItem = function(cartItem) {
console.log(cartItem);
window.location.href [email protected]("(''" + ConfigurationManager.AppSettings["baseUrl"] + "/Checkout/'' + cartItem.ItemId)");
};
dataAccess.getCart(
function (response) {
//...
},
function (response) {
//...
}
);
@if (false)
{
@:</script>
}
Si Resharper te advierte que no es un gran problema ^ _ ^
Pero si fuera usted, no pondría JavaScript en la vista parcial en absoluto .
Debido a que la vista parcial se puede insertar en una página muchas veces, entonces tendrá problemas con sus JavaScripts.
Y para su caso, si no puede separar el JavaScript del archivo JS, simplemente cree otro PartialView y coloque estos scripts en él y simplemente renderízalo en tu página principal.
Si desea escribir vistas parciales que son "widgets" encapsulados que simplemente funcionan una vez que los incluye en una página, insertar un bloque de script dentro de la vista parcial es una manera limpia de ajustar el marcado y el script de inicialización en una vista parcial . Por ejemplo, podría tener una vista parcial llamada "_EventList" que utilizo en mi sitio. Si coloco en dos lugares en mi página maestra, debería funcionar y prefiero no tener que escribir lógica en mi página maestra para inicializar el widget.
Si nunca lo usarás más de una vez en una página, es simple. Pero si es posible, envuelva la secuencia de comandos para que no se ejecute dos veces. Vea abajo. Por el bien de los fragmentos de lo simulo repitiendo la vista parcial dos veces en el fragmento de código para representar una vista parcial dos veces en una página maestra.
Mi página maestra podría verse así:
<div id="left-nav">
@Html.Partial("_EventList")
</div>
<div id="body">
</div>
<div id="right-nav">
@Html.Partial("_EventList")
</div>
Ejemplo:
<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 -->