2016-07-18 14 views
0

Ich benutze Tag-Helfer, um Eingabefeld zu erstellen, das jquery Autocomplete-Funktion verwendet.asp.net mvc 6 Tag Helper injizierendes Skript

public override void Process(TagHelperContext context, TagHelperOutput output) 
    { 
     output.TagName = "div"; 
     output.TagMode = TagMode.StartTagAndEndTag; 
     output.Content.AppendHtml("<input id='QuickFilter' autocomplete='on' class='form-control' />"); 
     output.Content.AppendHtml("<script type='text/javascript' src ='../js/autocomplete.js'></script>"); 
    } 

autocomplete.js

$(document).ready(function() { 
$("#QuickFilter").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "/PhoneChange/Autocomplete", 
      type: "POST", 
      dataType: "json", 
      data: { Prefix: request.term }, 
      success: function (data) { 
       response($.map(data, function (item, i) { 
        return { 
         label: item["clientName"] + " " + item["clientSurname"] + " " + item["clientPhone"], 
         value: item 
        }; 
       })) 
      } 
     }) 
    }, 
    messages: { 
     noResults: "", 
     results: function() { } 
    }, 
    select: function (event, ui) { 
     event.preventDefault(); 
     $("#OldPhoneNumber").val(ui.item.value["clientPhone"]); 
     $("#AgreementId").val(ui.item.value["id"]); 
     $("#QuickFilter").val(ui.item.label); 
    } 
}); 
}); 

Das Problem ist, dass, wenn mein Tag Helfer ausgelöst wird und HTML wird in der Konsole Ich erhalte Fehler

ReferenceError: $ is not defined

Also mein Skript zur automatischen Vervollständigung erzeugbar Ich finde die Datei jquery.js nicht, aber asp.net hat sie automatisch hinzugefügt, und wenn ich die Seite überprüfe, kann ich die Datei jquery.js sehen, aber irgendwie kann mein Skript nicht ... Kann jemand eine Lösung für dieses Problem vorschlagen?

Antwort

0

Es könnte sein, dass der Pfad zu der Skriptdatei, die Sie auf Ihrem Tag-Helper verwenden, relativ ist. Sie sollten einen spezifischeren Pfad verwenden, damit Sie den Helfer in jeder Ansicht verwenden können (siehe http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/).

<script type='text/javascript' src ='../js/autocomplete.js'></script> 

sollte wie

<script type='text/javascript' src ='~/scripts/jquery/js/autocomplete.js'></script> 

Also jede Seite die Referenz findet. "~ /" bedeutet, dass dies die Wurzel der Website ist.

+0

bereit ist, wäre nützlich, um zu sehen, wenn Sie jQuery verweisen, nachdem der Helfer gemacht wird. –

0

Dies kann durch die Tatsache ausgelöst werden, dass vor JQuery enthalten ist.

Das Standardlayout asp.net mvc razor (Views/Shared/_Layout.cshtml) enthält JavaScript-Dateien am Ende des Dokuments wie im folgenden Pseudocode beschrieben.

<html> 
... content omitted ... 
<body> 
    @Content <!-- Actual content --> 
    <script src="Jquery"></script> 
    <script src="Site.js"></script> 
</body> 
</html> 

ist hier a brief discussion auf dem Skript in einer Webseite enthalten. diese

lösen können Sie:

  • Verschieben Sie die Bibliothek Skripte Inklusion zu dem Kopfelement am oberen Rand der Seite.
  • Schedule autocomplete.js aufgenommen werden, wenn das Dokument mit window.onload
Verwandte Themen