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>

和javascript应该打开带有局部视图的jQuery UI对话框

$(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选择器用于将绑定范围限制为第一个选择器的后代。但是你没有一个元素匹配＆＃39; .openDialog＆＃39;这也是匹配＆＃39; .openDialog＆＃39;的其他元素的后代。

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

请改为尝试：

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

请参阅Documentation。

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

1 个答案: