带有 @Scripts.Render("~/bundles/jquery") 和 JQuery 对话框的 MVC 5答案

【问题标题】：MVC 5 with @Scripts.Render("~/bundles/jquery") and JQuery Dialog带有 @Scripts.Render("~/bundles/jquery") 和 JQuery 对话框的 MVC 5
【发布时间】：2014-08-26 11:12:02
【问题描述】：

我刚刚开始研究 MVC。今天，我尝试编写一个测试应用程序，以便在单击按钮时显示一个 Jquery 对话框。我在 Visual Studio 2013 中创建了一个 Web 项目并选择了 MVC 模板。在 Index.cshtml 我有以下代码。我从 jqueryui.com 下载了所有与 ui 相关的 js 文件

@{
ViewBag.Title = "Home Page";
}
<link href="~/Scripts/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<div id="dialog" title="Basic dialog">
<p> This is a basic dialog.</p>
</div>
<button type="button" id="open">Click Me.</button>
<script type="text/javascript">
    $(document).ready(function () {
    $("#open").click(function () {
        $("#dialog").dialog();
    });
});
</script>

当我尝试运行上面的代码时，它根本不起作用。但是当我在 _Layout.cshtml 中评论以下行时，它起作用了。

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

我尝试在 Index.cshtml 文件中注释包含脚本部分而不在上面的行注释，但它没有工作。该对话框仅在我在上一行发表评论时显示。

谁能告诉我这里的问题是什么，或者我可以在哪里获得有关此问题的更多信息的资源链接？

【问题讨论】：

查看项目中包含的App_Start\BundleConfig.cs 文件，您正在使用的所有脚本可能已经加载到该文件中。在 index.cshtml 中而不是在 BundleConfig 中添加 js/css 时，您可能会产生冲突

标签： jquery asp.net-mvc jquery-ui

【解决方案1】：

不要在视图中包含js/css 文件，只需制作它的包（我认为 js/css 文件在 bundleconfig 中，并且您也明确地将它们包含在视图中，这就是它们 js 文件冲突的原因）只是渲染使用 @Scripts.Render("~/bundles/jquery") 在布局页面上捆绑，然后在您的视图中使用以下代码：-

在 .cshtml 中使用 @section scripts{ } 为：-

 @section scripts{
   <script type="text/javascript">
    $(document).ready(function () {
      $("#open").click(function () {
       $("#dialog").dialog();
     });
   });
   </script>
 }

【讨论】：