2016-06-14 4 views
1

Ich möchte diese Art von Funktionalität in meinem Projekt.JavaScript-Datei wird nicht in aspx geladen? ASP.NET C#

Hier ist the JS Bin link.

Es gibt 3 Dateien stylesheet.css, javascript.js und eine HTML-Datei.

Ich versuche in Visual Studio 2010 ASP.NET C#, aber es funktioniert nicht: Die Javascript-Datei ist nicht geladen.

ASPX Code:

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
     <title></title> 
     <link rel="stylesheet" href="StyleSheet.css" type="text/css" /> 
     <script type="text/javascript" src="JScript.js"></script> 
    </head> 
    <body> 
     <form id="form1" runat="server"> 
      <div id="editor" contenteditable="true"></div> 
     </form> 
    </body> 
</html> 

stylesheet.css:

body { 
} 

#editor { 
    width: 400px; 
    height: 100px; 
    padding: 10px; 
    background-color: #444; 
    color: white; 
    font-size: 14px; 
    font-family: monospace; 
    display:block; 
} 

.statement { 
    color: orange; 
} 

JScript.js:

$("#editor").on("keydown keyup", function (e) { 
if (e.keyCode == 32) { 
    var text = $(this).text().replace(/[\s]+/g, " ").trim(); 
    var word = text.split(" "); 
    var newHTML = ""; 

    $.each(word, function (index, value) { 
     switch (value.toUpperCase()) { 
      case "SELECT": 
      case "FROM": 
      case "WHERE": 
      case "LIKE": 
      case "BETWEEN": 
      case "NOT LIKE": 
      case "FALSE": 
      case "NULL": 
      case "FROM": 
      case "TRUE": 
      case "NOT IN": 
       newHTML += "<span class='statement'>" + value + "&nbsp;</span>"; 
       break; 
      default: 
       newHTML += "<span class='other'>" + value + "&nbsp;</span>"; 
     } 
    }); 
    $(this).html(newHTML); 

    //// Set cursor postion to end of text 
    var child = $(this).children(); 
    var range = document.createRange(); 
    var sel = window.getSelection(); 
    range.setStart(child[child.length - 1], 1); 
    range.collapse(true); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
    $(this)[0].focus(); 
} 
}); 

JScript.js Datei funktioniert nicht. Keyword Farbe ändert sich nicht, aber ich stellte den Link zur Verfügung, es funktioniert gut.

Wie kann ich dieses Problem beheben?

+0

Haben Sie Konsole überprüft? Auch Ihre Skriptdatei verwendet '$', was bedeutet, dass diese Datei 'jQuery' oder Teilmengen benötigt. Laden Sie sie – Rajesh

+0

Was meinst du mit der Datei wird nicht geladen? Ungültige Anforderung? Falsche URL (404)? Fehler in der Konsole? Ich kann nicht sehen, dass Sie "jQuery" laden, bevor Sie es verwenden ... – melancia

+0

@Rajesh Wie kann ich in der Konsole einchecken? – Ashley

Antwort

1

Wie ich in den Kommentaren vorgeschlagen, würden Sie von einigen Tutorials profitieren, wie man nicht nur Arbeit mit jQuery, sondern auch mit HTML, CSS und Javascript. Ihnen fehlen einige grundlegende Kenntnisse, um mit dem Stack arbeiten zu können. ich Ihre Frage zu beantworten nur, um Ihnen einen Vorsprung:

<head> 
    <link rel="stylesheet" href="StyleSheet.css" type="text/css" /> 
    <!-- Loading the jQuery library before everything else. 
     Getting it from Google CDN, but you can have it locally. --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <!-- Loading your own Javascript file. --> 
    <script type="text/javascript" src="JScript.js"></script> 
</head> 

Ihr Javascript Code sollte innerhalb eines document ready Ereignishandler gewickelt werden:

$(function() { 
    // Your code goes here. 
}); 

Von dem, was ich aus dem Code zu verstehen, Sie‘ re versuchen, markieren Sie einige Wörter bei der Eingabe SQL Skript in der Box. Es funktioniert ganz gut: Demo

Weitere Informationen:

jQuery Learning Center

Google Hosted Libraries

+0

Dank a'lot für die Antwort @ MelancialUK.Ich folge Ihren Anweisungen, aber immer noch nicht funktioniert. Es ist kein Fehler in der 'Konsole' aber immer noch nicht funktioniert.Farbe nicht ändern – Ashley

+0

Sorry zu sagen, aber ich kann nicht verstehen, diese Anweisung 'Your Javascript-Code sollte in einen document-ready-Event-Handler eingepackt werden: ' – Ashley

+0

Lesen Sie das' jQuery Learning Center'. Ich kann hier nicht einfach eine Antwort schreiben, die 'jQuery' Stück für Stück erklärt. Es ist nicht der Zweck dieses Forums, fürchte ich. – melancia