2016-07-18 3 views
0

Я использую помощник тега, чтобы создать поле ввода, которое использует функцию автозаполнения jquery.asp.net mvc 6 tag helper inting script

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); 
    } 
}); 
}); 

Проблема заключается в том, что, когда мой помощник тега срабатывают и HTML генерируется в консоли я получаю ошибку

ReferenceError: $ is not defined

Так что мой автозаполнения сценарий может 't найти файл jquery.js, но asp.net автоматически добавил его, и когда я проверяю страницу, я могу видеть файл jquery.js, но каким-то образом мой скрипт не может ... Может ли кто-нибудь предложить какое-либо решение этой проблемы?

ответ

0

Может быть, путь к файлу скрипта, который вы используете в вашем помощнике тега, относительно. Вы должны использовать более конкретный путь, чтобы вы могли использовать помощник в любом представлении (см. http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/).

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

должен быть как

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

Таким образом, любая страница находит ссылку. «~ /» означает, что это корень веб-сайта.

+0

Было бы полезно, чтобы увидеть, если вы ссылаетесь JQuery после того, как помощник оказаны. –

0

Это может быть вызвано тем фактом, что autocomplete.js включен до JQuery.

По умолчанию макет брандмауэра asp.net mvc (Views/Shared/_Layout.cshtml) содержит файлы JavaScript, расположенные ближе к концу документа, как описано в следующем псевдокоде.

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

Вот a brief discussion о том, где включить скрипт на веб-странице.

Чтобы решить эту проблему вы можете:

  • Подведите включение библиотеки сценариев головного элемента в верхней части страницы.
  • Расписание autocomplete.js быть включен, когда документ будет готов с помощью window.onload

 Смежные вопросы

  • Нет связанных вопросов^_^