时间戳

首页 > 解决方案 > 无法从页面引用 _layout 加载 MVC5 jquery ajax 自动完成

layout - 无法从页面引用 _layout 加载 MVC5 jquery ajax 自动完成

问题描述

我有一个 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 的方法。

标签： layoutasp.net-mvc-5bundlejquery-ui-autocomplete

解决方案

你有一个ScriptBundlefor "jquery"which containsjquery-{version}.js和另一个ScriptBundlefor "bootstrap"which includes jquery-1.11.1.min.js，所以如果在 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版本。在调试模式下，将加载完整版本（使其更易于调试），在生产中，它们将由框架自动缩小。

推荐阅读