2016-06-20 48 views
8

Ho creato un modello di base ASP.NET e scritto uno script jquery. Quando guardo la pagina vedo che jquery è caricato nella pagina, ma lo script non viene eseguito. Ho esaminato la pagina dei documenti ASP.NET e il mio layout.cshtml ha lo stesso aspetto, quindi ci sono ulteriori passaggi da fare per far funzionare jquery? enter image description here Home pageCome utilizzare jquery in ASP. NET Core

@{ 
    ViewData["Title"] = "Home Page"; 
} 
<!-- Page Content--> 
<div class="container"> 
    <div class="row"> 
     <form method="post" enctype="multipart/form-data"> 
      <input type="file" id="files" name="files" multiple /> 
      <input type="button" id="upload" value="Upload Selected Files" /> 
     </form> 
    </div> 
</div> 
<script> 
    $(document).ready(function() { 
     alert("Test"); 
    }); 
</script> 

Soluzione

@section scripts 
{ 
    <script> 
     $(document).ready(function() { 
      alert("Test"); 
     }); 
    </script> 
} 
+0

Si ottiene eventuali errori nella console di debug? – Jamiec

+1

Stai caricando jQuery prima di '$ (document) .ready'? – apokryfos

+1

Dov'è il tuo riferimento per jQuery in relazione a quella pagina? È sopra o sotto quella sceneggiatura? –

risposta

4

I sospetti che il tuo jQuery è caricato dopo il resto del contenuto della pagina.

Ciò significa che non è possibile fare riferimento a oggetti jQuery poiché la libreria non è stata ancora inizializzata.

Sposta lo script di pagina dopo che jquery è stato caricato.

<script type="text/javascript" src="/Scripts/jquery-2.2.4.js"></script> 
<script> 
    $(document).ready(function() { 
     alert("Test"); 
    }); 
</script> 

Per l'efficienza vi consiglio di fare questo in uno dei due modi:


OPZIONE 1

utilizzare un file script maestro che carica dopo jQuery.

<script type="text/javascript" src="/Scripts/jquery-2.2.4.js"></script> 
<script type="text/javascript" src="/Scripts/Master.js"></script> 

OPZIONE 2

utilizzare un modello segnaposto che sarà sempre caricato dopo jquery ma può essere inizializzato su singole pagine.

pagina master

<script type="text/javascript" src="/Scripts/jquery-2.2.4.js"></script> 
<asp:ContentPlaceHolder ID="RootScripts" runat="Server"/> 

Contenuti Pagina

<asp:Content ID="PageScripts" ContentPlaceHolderID="RootScripts" runat="Server"> 
    <script> 
    $(document).ready(function() { 
     alert("Test"); 
    }); 
    </script> 
</asp:Content> 
+1

Sì, questo avrebbe potuto funzionare, ma ho usato le sezioni. @section scripts { } – John

+1

Posso scegliere una risposta su un duplicato? – John

+0

Sì, è ancora possibile contrassegnare qualsiasi domanda come risposta ad alcune domande anche se simili non sono sempre esatte. Segna la domanda che ha aiutato a risolvere il tuo problema. Il link alla domanda duplicata aiuterà semplicemente gli altri a risolvere i problemi simlar in futuro. – Obsidian

1

PER CHIARIMENTI


Se si fa riferimento jQuery nella tua pagina _Layout .. doppio controllo per garantire esimo a quel riferimento è al TOP della pagina _Layout perché se è in fondo, allora ogni altra pagina avete che utilizzare la _Layout e dispone di jQuery, che vi darà errori come:

$ è undefined

perché si sta tentando di utilizzare jQuery prima che sia mai stato definito!

Inoltre, se il vostro fa riferimento jQuery nella tua pagina _Layout quindi non è necessario fare riferimento ancora una volta nelle vostre pagine che utilizzano il vostro stile _Layout


Assicurarsi che si sta caricando il riferimento a jQuery prima di iniziare a utilizzare <scripts>.

tuo cshtml dovrebbe funzionare se si mette il riferimento di cui sopra lo script come così:

<script src="~/Scripts/jquery-1.10.2.js"></script> // or whatever version you are using 

// you do not need to use this reference if you are already referencing jQuery in your Layout page 

<script> 
    $(document).ready(function() { 
     alert("Test"); 
    }); 
</script> 
+1

Perché dovrei caricarlo due volte? – John

+0

non lo carichi due volte ... lo carica una volta ma lo carica prima che la pagina venga visualizzata sullo schermo ... sposta semplicemente il tuo riferimento jQuery sopra lo script –

+0

Il modello ASP.NET Core fa questo per te nel _Layout file .cshtml. Inoltre, utilizza il tag environment per selezionare una copia locale in Dev o in un CDN in Staging and Production. –

Problemi correlati