在新页面上打开部分视图而不是 jQuery UI 对话框

Question

我的剃刀视图中有一个 ActionLink

@Html.ActionLink(item.sifra_pozicije, "UnosuProjekat", "Projekti", new { pos = item.sifra_pozicije.ToString() }, new {  @class = "openDialog" })

生成 HTML 代码<a href="/Projekti/UnosuProjekat?pos=VSG010001" class="openDialog">VSG010001</a>

以及应该打开带有部分视图的 jQuery UI 对话框的 javascript

$(document).ready(function () {

    $.ajaxSetup({ cache: false });

    $(".openDialog").on("click", ".openDialog", function (e) {
        e.preventDefault();
        var url = $(this).attr('href');

        $("#dialog-edit").dialog({
            title: 'Add Student',
            autoOpen: false,
            resizable: false,
            height: 355,
            width: 400,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                alert("test");
                //$(this).load("/Projekti/UnosuProjekat");
            },
            close: function (event, ui) {
                $(this).dialog('close');
            }
        });

        $("#dialog-edit").dialog('open');
        return false;
    });
});

我的控制器中还有return PartialView("_prj", pv.projekat);。

我正在 _Layout 页面中加载以下脚本：

<script src="/Scripts/jquery-2.1.0.js"></script>
<script src="/Scripts/jquery-ui-1.10.4.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery.validate.globalize.min.js"></script>
<script src="/Scripts/globalize/globalize.js"></script>
<script src="/Scripts/globalize/cultures/globalize.culture.sr-Latn.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>

但不是 jquery 对话框，而是我的部分视图在全页浏览器窗口中打开。

有人可以帮助我如何实际做到这一点吗？

Answer 1

您的on 绑定不正确：

$(".openDialog").on("click", ".openDialog", function(e) {... }

第二个.openDialog 选择器旨在将绑定范围限制为第一个选择器的后代。但是你没有一个匹配“.openDialog”的元素，它也是另一个匹配“.openDialog”的元素的后代。

因此您的 click 事件未绑定到您的 <a> 并且引发默认事件 - 加载另一个页面。

试试这个：

$(".openDialog").on("click", function(e) {... }

见Documentation。