Question

我正在使用tag helper来创建使用jquery自动完成功能的输入字段。

 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：$未定义

所以我的自动完成脚本找不到jquery.js文件，但asp.net会自动添加它，当我检查页面时，我可以看到jquery.js文件，但不知怎的，我的脚本不能......任何人都可以为这个问题提出任何解决方案吗？

Answer 1

可能是您在标记助手上使用的脚本文件的路径是相对的。您应该使用更具体的路径，这样您就可以在任何视图上使用帮助器（参见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>

所以任何页面都会找到引用。＆＃34;〜/＆＃34;意味着这是网站的根源。

Answer 2

这可能是由autocomplete.js之前包含JQuery这一事实引发的。

默认的asp.net mvc razor布局（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关于在网页中包含脚本的位置。

要解决此问题，您可以：

将库脚本包含移动到页面顶部的head元素。
使用window.onload

asp.net mvc 6标记助手注入脚本

2 个答案: