asp.net mvc 6 标签助手注入脚本答案

【问题标题】：asp.net mvc 6 tag helper injecting scriptasp.net mvc 6 标签助手注入脚本
【发布时间】：2016-11-20 19:39:45
【问题描述】：

我正在使用标签助手创建使用 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>");
     }

自动完成.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 文件，但不知何故我的脚本不能...任何人都可以提出任何建议解决这个问题？

【问题讨论】：

标签： jquery asp.net asp.net-mvc tag-helpers

【解决方案1】：

这可能是因为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 安排在文档准备好时包含 autocomplete.js

【讨论】：

【解决方案2】：

您在标签助手上使用的脚本文件的路径可能是相对的。您应该使用更具体的路径，以便可以在任何视图上使用帮助程序（请参阅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>

所以任何页面都可以找到引用。 “~/”表示网站的根目录。

【讨论】：

在渲染助手后查看您是否正在引用 jQuery 会很有用。