无法从引用 _layout 的页面加载 MVC 5 jquery ajax 自动完成

Question

我有一个 MVC5 项目。在一个简单的页面中，我为公司搜索编写了 jquery 自动完成搜索它正在使用此来源的项目中的简单页面：

<link rel="stylesheet" href="~/Content/css/jquery-ui.css">
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
    <script type="text/javascript">
        var comid = 0;
        $(document).ready(function () {
            $("#inputlg").autocomplete({                
                source: function (request, response) {
                    $.ajax({
                        url: "/Companies/Search",
                        type: "POST",
                        dataType: "json",
                        data: { name: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {                                 
                                comid=item.CompanyId;
                                return { label: item.CompanyName, value: item.CompanyName };                                
                                var companyid = item.CompanyId;
                                return $(@Html.ActionLink(companyname, "Ratings2", "Companies", new { id = companyid }, null));*@                                
                            }))
                        }
                    })
                },
                messages: {
                    noResults: "", results: ""
                },
                select: function (event, ui)
                {                                        
                    window.location.href = "Ratings2/"+comid;
                }
            });
        })
    </script>

它正在工作。但是在以父布局为父的主页中得到 jquery TypeError: $(...).autocomplete is not a function 我有 bundleconfig.cs 这样的：

public static void RegisterBundles(BundleCollection bundles)
        {
            BundleTable.EnableOptimizations = false;
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"
                        ));

            bundles.Add(new ScriptBundle("~/bundles/jquery-ui").Include(
                        "~/Scripts/jquery-ui.js"));

            bundles.Add(new ScriptBundle("~/feature").Include(
                        "~/Scripts/feature/js/*.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js",
                      "~/Scripts/bootstrap-3.3.0.min.js",
                      "~/Scripts/jquery-1.11.1.min.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css",
                      "~/Content/style.css",
                      "~/Content/font-awesome.css",
                      "~/Content/Crauseltrustpilot.css",
                      "~/Content/login.css",
                      "~/Content/sliderbar.css",
                      "~/Content/rating.css",//,
                      //"~/Content/bootstrap-3.3.0.min.css"  
                      "~/Content/css/mdb.css",
                      "~/Content/css/mdb.min.css",
                      "~/Content/css/style.css",
                      "~/Content/css/style.min.css",
                      "~/Content/css/addons/datatables.css",
                      "~/Content/css/addons/datatables.min.css",
                      "~/Content/font.css"
                      ));

            bundles.Add(new StyleBundle("~/Content/boot").Include(                     
                      "~/Content/bootstrap-3.3.0.min.css"
                      ));
        }

我的主页代码是这样的：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jquery-ui")

    <!-- Bootstrap core JavaScript
    ================================================== -->        
    <!-- Placed at the end of the document so the pages load faster -->
    @*<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">*@
    <link rel="stylesheet" href="~/Content/css/jquery-ui.css">
    @*<script src="//code.jquery.com/jquery-1.10.2.js"></script>*@
    @*<script src="~/Scripts/jquery-1.10.2.js"></script>*@    
    @*<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>*@  
    @*<script src="~/Scripts/jquery-ui.js"></script>*@  
    @*<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>*@
    @*<script src="~/Scripts/jquery-1.11.1.min.js"></script>*@
    <script src="~/Scripts/bootstrap.js"></script>   
    <script type="text/javascript">
        var comid = 0;
        $(document).ready(function () {
            $("#inputlg").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/Companies/Search",
                        type: "POST",
                        dataType: "json",
                        data: { name: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                //return { label: item.CompanyName, value: item.CompanyName };
                                comid = item.CompanyId;
                                return { label: item.CompanyName, value: item.CompanyName };
                                //return { a: "https://localhost:44379/Companies/Ratings2/" + item.CompanyId, value: item.CompanyName };
                                //////////////////////
                                @*var companyname = item.CompanyName;
                                var companyid = item.CompanyId;
                                return $(@Html.ActionLink(companyname, "Ratings2", "Companies", new { id = companyid }, null));*@                                                                   
                            }))
        }
                    })
                },
        messages: {
            noResults: "", results: ""
        },
        select: function (event, ui) {
            window.location.href = "Ratings2/" + comid;
        }
            });
        })
    </script>

如果您查看主页，我已经测试了从 bunlde 引用的其他方法。

Answer 1

你有一个 ScriptBundle 用于 "jquery"，其中包括 jquery-{version}.js，然后另一个 ScriptBundle 用于 "bootstrap"，其中包括 jquery-1.11.1.min.js，所以如果bootstrap 包在 jquery-ui 包之后加载，它有效地消除了 jquery-ui（因为它依赖于之前加载的 jquery）。

从 "bootstrap" 包中删除 jquery 脚本

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/Scripts/bootstrap.js",
    "~/Scripts/respond.js",
    "~/Scripts/bootstrap-3.3.0.min.js"));

附带说明一下，在您的包中包含脚本的完整版本，而不是 min 版本。在调试模式下，将加载完整版本（使调试更容易），在生产模式下，它们将由框架自动缩小。

无法从引用 _layout 的页面加载 MVC 5 jquery ajax 自动完成

MVC5 jquery ajax autocomplete could not be loaded from page refrencing _layout

layout

bundle

jquery-ui-autocomplete

asp.net-mvc-5