带有局部视图的模式弹出窗口

Question

我正在尝试在模式弹出窗口中显示部分视图，我已经在主视图上添加了以下脚本

 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript" src="../../Scripts/jquery-ui-1.8.20.js"> </script>
 <script type="text/javascript" src="../../Scripts/jquery-2.0.3.min.js"></script>
 <script type="text/javascript">
  $(function () {
  $('.details_display').on('click', function () {
      $(".budgetdetail").dialog({
          autoOpen: true,
          position: { my: "center", at: "top+350", of: window },
          width: 1000,
          resizable: false,
          title: 'Detail',
          modal: true,
          open: function () {
              $(this).load('@Url.Action("DisplayBudgetDetail", "Budget")');
          }
      });

  });
  });
 </script>

还有这个部门

​

</div>

调用弹出窗口的链接如下所示：

  @Html.ActionLink("Detail", "DBudgetDetail", new { id = item.idBudget }, new { @class = "details_display" }) 

然而，当我点击它时，我被重定向到一个新页面，其中包含我试图显示的视图，并且没有创建任何弹出窗口。

当我调试java脚本时，我得到这个错误。

TypeError: $(...).dialog is not a function
$(".budgetdetail").dialog({

我在这里错过了什么？

Answer 1

问题出在脚本文件上

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript" src="../../Scripts/jquery-ui-1.8.20.js"> </script>
<script type="text/javascript" src="../../Scripts/jquery-2.0.3.min.js"></script>

1.您似乎包含了两次JQuery和JQueryUI

您需要使用捆绑包("~/bundles/jquery" & "~/bundles/jqueryui")或脚本标记。不要同时使用这两种方法。

2.脚本的顺序错误

<script type="text/javascript" src="../../Scripts/jquery-ui-1.8.20.js"> </script>
<script type="text/javascript" src="../../Scripts/jquery-2.0.3.min.js"></script>

浏览器将按照包含脚本的顺序执行脚本。首先包含JQuery UI，然后包含JQuery。这些都需要相反的方式。JQuery UI需要JQuery才能工作。