从外部js中的函数加载jqueryui模式对话框

Question

在 ASP.NET MVC 中，我试图通过调用驻留在外部 js 文件中的函数来显示 jqueryUI 模式对话框。这样做的原因是我想在某个地方编写一个 js 方法，然后用一些参数调用它，而不是在每个页面上复制粘贴它。

这是我的 CustomFunctions.js 文件：

function CustomFunctions() { };

CustomFunctions.prototype.loadModalDialog = function (dialogDivID, callerElementDivID, dialogSize, actionControllerName, container)
{
  var dialogElement = $('#' + dialogDivID);
  var callerElement = $('#' + callerElementDivID);
  dialogElement.dialog
  (
    {
        autoOpen: false,
        show: "slide",
        width: dialogSize,
        resizable: false,
        modal: true
    }
  );

callerElement.click(function() 
{
    dialogElement.load("@Url.Action(" + actionControllerName +")", function() 
    {
        $(container).dialog('open');
    });
    return false;
})

}

现在，在我的 List.cshtml 视图中，我编写了以下内容：

@Html.ActionLink(
        "click me", 
        "List", 
        new {string.Empty},
        new { onclick = "Javascript:showModal();" }
        );

@Scripts.Render("~/bundles/custom");
<script>
    function showModal()
    {
        var custom = new CustomFunctions();
        custom.loadModalDialog("my-dialog", "show-modal", 400, "List", this);
    }
</script>

问题是模式对话框没有弹出。在客户端调试时，它进入 loadModalDialog，它正确地找到了所有变量，它遍历了所有 js 代码，没有抛出错误（这让我感到困惑）但没有显示对话框。

我错过了什么吗？ 谢谢，

Answer 1

这在外部 js 文件中不起作用

"@Url.Action(" + actionControllerName +")"

这在与模板内联时有效，因为模板在发送到客户端之前已被 prased 和渲染。当它被放入外部 js 文件时，它是一个文字字符串。

custom.loadModalDialog("my-dialog", "show-modal", 400, "List", 这 /*可能不是你所期望的*/);

此时在代码中传递this 是传递文档或窗口对象。然后您尝试在容器上调用dialog('open')，这不是您期望的对话框对象。

还有在document.ready 事件之外调用jquery 的问题。除非在页面加载后调用 showModal()，否则 jquery 函数将不起作用。

任何最新的浏览器都有一个用于调试 js 的 javascript/控制台。