Question

我正在尝试在本教程中实现弹出式联系我们对话框： http://www.matthidinger.com/archive/2011/02/22/Progressive-enhancement-tutorial-with-ASP-NET-MVC-3-and-jQuery.aspx

我有一个完全正常运行的解决方案的工作版本。

在尝试将此功能集成到我自己的解决方案中时，我遇到了一个问题。

我在我的脚本目录中创建了一个contactdialog.js文件：

    /// <reference path="jquery-1.6.2.min.js"/>
/// <reference path="jquery-ui-1.8.11.js"/>
$.ajaxSetup({ cache: false });

$(document).ready(function () {
    $(".openDialog").live("click", function (e) {
        e.preventDefault();

        $("</div>")
        .addClass("dialog")
        .attr("id", $(this)
        .attr("data-dialog-id"))
        .appendTo("body")
        .dialog({
            title: $(this).attr("data-dialog-title"),
            close: function () { $(this).remove() },
            modal: true
        })
        .load(this.href);
    });

    $(".close").live("click", function (e) {
        e.preventDefault();
        $(this).closest(".dialog").dialog("close");
    });
});

然后在我看来，我已经接近顶端了：

<script src="~/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script src="~/Scripts/contactdialog.js" type="text/javascript"></script>

进一步向下：

@Html.ActionLink("Contact Us", "ContactUs", "Home", null, new { @class = "openDialog", data_dialog_id = "emailDialog", data_dialog_title = "Contact Us"})

现在我的链接成功进入了javascript函数，似乎可以添加类OK。但是，当它到达.dialog函数时，它会抛出以下异常： “对象不支持属性或方法对话框”

这似乎表明jquery-UI尚未加载但是我无法弄清楚为什么？如果我在Chrome中加载页面并检查页面源，那么jquery-ui-1.8.11.js的链接就会很高兴打开。

Answer 1

一些提示：

jqueryUI是否被另一个局部视图加载（这就是为什么你看到它被加载到开发人员工具中），但是调用.dialog的JS是在不同的局部视图中呈现的？

尝试在主/布局视图中放置jqueryUI？

Answer 2

我已改为使用捆绑：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")        
@Scripts.Render("~/bundles/contact")

由于目前完全超出我的原因，这已经将其付诸实践，现在正在展示对话框！

找不到JQuery UI对话框

2 个答案: