Modal Popup mit partialview

Question

Ich versuche, in einem modalen Popup eine Teilansicht anzuzeigen ich die folgenden Skripte auf meiner Hauptansicht

@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> 

und auch diese Abteilung

</div> 

hinzugefügt habe

Der Link zum Aufrufen des Popups sieht so aus:

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

Wenn ich jedoch darauf klicke, werde ich auf eine neue Seite mit der Ansicht, die ich anzeigen möchte, umgeleitet, und es wird kein Popup erstellt.

Ich erhalte diese Störung, wenn ich mein Java-Script debuggen

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

Was ich hier fehlt?

Answer 1

Das Problem mit dem Skript sein Dateien

@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. Sie erscheinen zweimal werden, einschließlich JQuery und jQueryUI

entweder Sie müssen die Bündel verwenden ("~/bundles/jquery" & "~/bundles/jqueryui") oder Skript-Tags Benutze nicht beides.

2. Die Skripte sind in der falschen Reihenfolge

<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> 

Der Browser wird das Skript in der Reihenfolge, die Sie umfassen auszuführen. Sie haben zuerst die JQuery-Benutzeroberfläche und dann JQuery. Diese müssen umgekehrt sein. JQuery UI benötigt JQuery um zu funktionieren.