È corretto inserire JavaScript nelle viste parziali

Question

Sto lavorando all'app Web in cui la pagina principale contiene due parti: il blocco costante che è sempre visibile e il blocco di informazioni costituito da una delle 3 viste parziali. Ognuna delle viste parziali appare come risultato della richiesta AJAX e viene caricata una sola volta (dopo che le finestre di commutazione sono fornite da jquery). Funziona bene ma ho avuto un problema.

Il codice html delle viste parziali contiene funzioni js che vengono utilizzate anche nel blocco costante e nel blocco informazioni. Quando la pagina viene caricata, queste funzioni possono "vedersi" e funziona, ma il resharper non trova le dichiarazioni delle funzioni e mi avvisa di ciò. Non riesco a risolvere il problema trasferendoli in un file js esterno a causa della sintassi del rasoio che può essere trovata nel loro codice.

Cosa posso fare con questo?

Grazie.

Aggiornamento:

Infine ho deciso di risolvere il problema che separa il mio codice js da vista. Quindi la nuova domanda era come includere la sintassi del rasoio nei file js o qual è l'alternativa accettabile. Le soluzioni popolari che ho trovato utilizzano variabili globali, attributi dei dati e quello che mi piace di più: la libreria RazorJS di John Katsiotis.

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

spero che sta andando a lavoro stabile e rendere ReSharper felice.

Cheers!

Aggiornamento:

Dopo 3 anni ho ricordato questa domanda e ha deciso di aggiornarlo secondo la mia esperienza. In effetti ora preferirei non raccomandare l'uso di librerie aggiuntive per questo. Soprattutto se non sei l'unico membro del team di progetto ... È molto meglio se sei assicurato in tutte le tue librerie, sono supportate da creator e community e possono essere facilmente integrate nel tuo IDE (se usi la sintassi speciale ad esempio) . Anche tutti i ragazzi del tuo team dovrebbero essere consapevoli di come funziona. Quindi ora suggerirei di fare le seguenti cose:

1. Tenere tutto il JS in file separati. Isolare il più possibile. Fornire l'API esterna per questo.
2. Chiama le funzioni API dalle tue Visualizzazioni.
3. Passa tutti gli URL generati da Razor, i messaggi di testo, le costanti come parametro di risorsa.

Ad esempio:

js di file:

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

Vista:

<script> 
    $.api.someInitFunction({ 
     urls: { myAction: '@Url.Action("MyAction", "MyController")' }, 
     messages: { error: '@errorMessage' }, 
     consts: { myConst: @myIntConst } 
    }); 
</script> 

Answer 1

Se ReSharper si avverte che non è un grosso problema^_^

Ma se fossi in te non metterei JavaScript in la vista parziale su tutto.

Poiché la vista parziale potrebbe essere inserita in una pagina molte volte, si avranno problemi con i propri JavaScript.

E per il tuo caso, se non è possibile separare il file JavaScript in JS, solo crea un altro PartialView e inserisci questi script e rendilo semplicemente nella tua pagina principale.

Answer 2

Sono d'accordo con Wahid sul fatto che non si debba inserire JavaScript nelle viste parziali o meno. Ho visto abbastanza codice che fa questo per sapere che non porta a nulla di buono.

Direi anche che dovresti essere in grado di trasferire la logica incapsulata nella sintassi del rasoio in JavaScript, devi solo passare al tuo JavaScript le informazioni necessarie alla tua logica.

Sto solo indovinando per esperienza con questo prossimo commento, ma dovresti progettare il JavaScript nello stesso modo in cui avresti progettato la struttura del tuo codice C# o VB.NET. In questo modo la logica che stai usando Razor dovrebbe essere parte del tuo JavaScript.

In questo modo il tuo JavaScript sarà più facile da mantenere e presumo che anche Resharper sia più felice.

Answer 3

Lo faccio e lo trovo molto conveniente. Funziona bene per caricare in modo dinamico frammenti di javascript parziali con la disponibilità di ViewBag, HttpContext, ecc.

Ne risulta qualcosa che sembra utilizzare i modelli T4.

È possibile ottenere anche la convalida javascript, intellisense, ecc. Se si aggiungono tag script fantasma come questo.

@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> 
} 

Answer 4

Se si vuole scrivere una vista parziale che vengono incapsulati "widget" che solo il lavoro una volta che li includere in una pagina, poi incorporare un blocco di script all'interno della vista parziale è un modo pulito per avvolgere il markup e la script di inizializzazione insieme in una vista parziale. Ad esempio, potrei avere una vista parziale denominata "_EventList" che utilizzo nel mio sito. Se metto due posti nella mia pagina principale dovrebbe funzionare e preferisco non dover scrivere la logica nella mia pagina master per inizializzare il widget.

Se non lo utilizzerete più di una volta in una pagina, è semplice. Ma se puoi, allora avvolgi lo script in modo che non venga eseguito due volte. Vedi sotto. Per motivi di frammenti di overflow dello stack, lo simulo ripetendo due volte la vista parziale nello snippet di codice per rappresentare una vista parziale due volte in una pagina principale.

La mia pagina master potrebbe essere simile:

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

<div id="body"> 
</div> 

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

Esempio:

<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 -->