如何让JQuery-UI与ASP.NET MVC6一起使用？

-1

我刚刚开始使用MVC6（RC），已经为MVC6 RC创建了一个基于标准模板的项目，并拼命尝试使JQuery-UI正常工作。我已经超过了从jQuery UI的页面下面的例子在我的意见之一：如何让JQuery-UI与ASP.NET MVC6一起使用？

<script> 
    $(function() { 
     var availableTags = [ 
      "ActionScript", 
      "AppleScript", 
      "Asp", 
      "BASIC", 
      "C", 
      "C++", 
      "Clojure", 
      "COBOL", 
      "ColdFusion", 
      "Erlang", 
      "Fortran", 
      "Groovy", 
      "Haskell", 
      "Java", 
      "JavaScript", 
      "Lisp", 
      "Perl", 
      "PHP", 
      "Python", 
      "Ruby", 
      "Scala", 
      "Scheme"]; 

     $("#tags").autocomplete({ 
      source: availableTags 
     }); 
    }); 
</script> 
<div class="ui-widget"> 
    <label for="tags">Tags:</label> 
    <input id="tags"> 
</div>

的标签（与“文本框”）显示，但自动完成不工作（如果我输入一些文字，没有任何反应）。 JQuery（base）按默认值安装（在标准模板中）。首先，我添加了JQuery-UI NuGet包（看起来是错的）。然后我还在Bower中添加了JQuery-UI包（我认为应该是新的方式）。

我也尝试添加引用：

<!-- jQuery UI CSS Reference --> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css">

在我看来

（什么都没有解决的问题）。

什么是添加jQuery的UI在MVC 6（RC）项目，并把例如一起工作的正确方法是什么？ 更新为混凝土：
问题不在于上面的示例代码（它没有错），问题只是引用JQuery正确（在我的情况下为MVC6 RC）。
所以你可以在第一个答案中看到一般的解决方案，在我自己的答案中 - 特定于我的情况。

来源

2015-11-26 FredyWenger

您是否在控制台中发现任何错误？此代码应该很好.https：//dotnetfiddle.net/As1qUN – Shyju

不，我看不到错误。我想我必须做更多的关于jQuery UI集成..？ – FredyWenger

我复制了你的queston中的脚本，并在小提琴中使用。它工作得很好 – Shyju

它现在。在MVC6 RC，脚本必须添加在_Layout。CSHTML，但根据环境部分：

<environment names="Development"> 
     <script src="~/lib/jquery/dist/jquery.js"></script> 
     <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> 
     <script src="~/js/site.js" asp-append-version="true"></script> 
     @* Added for JQueryUI (Debug) *@ 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
     <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
     @* Added for GoogleMaps (debug)*@ 
     <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    </environment> 
    <environment names="Staging,Production"> 
     <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js" 
       asp-fallback-src="~/lib/jquery/dist/jquery.min.js" 
       asp-fallback-test="window.jQuery"> 
     </script> 
     <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js" 
       asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js" 
       asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"> 
     </script> 
     <script src="~/js/site.min.js" asp-append-version="true"></script> 
     @* Added for JQueryUI (Staging/Hosting (including Self-hosting) *@ 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
     <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
     @* Added for GoogleMaps (Staging/Hosting (including Self-hosting)*@ 
     <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    </environment>

所以我贴出的例子代码的工作，因为我已经改变了。注意：您还必须在环境名称=“Staging，Production”下添加引用，否则它无法在VS之外使用。

来源

2015-11-27 16:10:04 FredyWenger

此代码应该适用于您提供的信息。看到工作fiddle。

请务必仔细检查所有你已经加载了jQuery，jQuery UI的和所需要的relvant CSS这些东西

1）。 jQuery应该在加载jQuery UI之前加载，因为它依赖于jQuery。

启用自动完成的脚本应该在加载上述2个库之后。

2）检查您的浏览器控制台中的其他脚本错误。如果你有一些脚本错误，你的其他剩余的JS代码不会被执行:)

3）如果您使用的是布局，你正试图从使用这种布局的页面启用自动完成插件，确保把你的脚本@section scripts块内，使其执行我们载入我们的图书馆后（，也是我们将/应指定在布局文件中的脚本执行顺序。参见下面的例子）

布局(_Layout.cshtml）

<body> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> @RenderSection("scripts", required: false) </body>

您的特定页面（例如：index.cshtml）

@section scripts { <script type="text/javascript"> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Scheme" ]; $("#tags").autocomplete({ source: availableTags }); }); </script> }

来源

2015-11-26 17:53:03 Shyju

如果我在@Layout.cshtml中添加@RenderSection（“脚本”，必需：false），我会收到： InvalidOperationException：在/ Views/Shared/_Layout中的RenderSectionAsync调用。 cshtml'无效。 “脚本”部分已经被渲染。对不起，你究竟是什么意思，“启用自动完成的脚本应该在加载上述2个库之后”（我发布的脚本或..什么）？感谢您的耐心... – FredyWenger

@FredyWenger如果它已经存在，您不应该再次添加'@ RenderSection'。 – Shyju

如何让JQuery-UI与ASP.NET MVC6一起使用？

回答

相关问题