MVC 5与@ Scripts.Render("〜/ bundles / jquery")和JQuery Dialog

时间:2014-08-26 11:12:03

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

我刚刚开始研究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文件中对include脚本部分进行评论而不对上面的行进行评论,但它没有起作用。该对话框仅显示我在上面评论时的行。

有人可以告诉我这里的问题或资源的任何链接,我可以获得有关此问题的更多信息吗?

1 个答案:

答案 0 :(得分:3)

不要在视图中包含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>
 }