0

在我的索引视图中，我有一个创建和打开模板链接：

@Html.ActionLink("Create Template", "JsonCreate", "Template", new { id = "CreateTemplate" })
@Html.ActionLink("Open Template", "JsonOpen", "Template", new { id = "OpenTemplate" })

<script type="text/javascript">

   $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 300,
            resizable: false,
            title: 'Create Template',
            hide: "fade",         
            show: "fade",
            modal: true,
            open: function(event, ui) {               
                $(this).load("@Url.Action("Create")");
            },
            buttons: {
             "Save": function () {                      
                        var form = $('form', this);
                        $(form).submit();
                     },
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        }); 

        $('#OpenTemplate').click(function ()
        {
            $('#dialog').dialog('open');
            return false;
        });

        $('#CreateTemplate').click(function ()
        {
            $('#dialog').dialog('open');
            return false;
        });
    });

</script>

对于打开模板链接，我想要一个完全不同的对话框：

  • 其他按钮
  • 其他尺寸
  • 其他头衔
  • ETC...

我需要改变什么，我的打开模板链接可以使用相同的对话框 div“#dialog”打开它自己的对话框？

4

1 回答 1

0

过去我曾尝试为多个不同的对话框重新使用单个 div，我强烈建议只创建一个新 div 和一个新的 ui.dialog 实例。它在 body 标记的底部添加了额外的 html，但这是为了清楚地分离 javascript 代码而付出的小代价。如果您需要在对话框 div 中使用不同的 HTML，那么绝对没有理由不使用两个完全独立的 div。这样做会为您节省大量时间和精神上的痛苦。

如果你选择不听这个建议，我建议创建两个配置对象并在关闭时销毁对话框实例。像这样的东西：

$(function () {
    var baseConfig = {
        autoOpen: false,
        resizable: false,
        hide: "fade",
        show: "fade",
        modal: true,
        close: function(event, ui) {
            $(this).dialog('destroy');
        },
        buttons: {
            "Save": function () {
                var form = $('form', this);
                $(form).submit();
            },
            "Close": function () {
                $(this).dialog("close");
            }
        }
    }
    var createConfig = {
        width: 300,
        title: 'Create Template',
        open: function(event, ui) {               
            $(this).load("@Url.Action("Create")");
        }
    }
    var openConfig = {
        width: 500,
        title: 'Open Template',
        open: function(event, ui) {               
            $(this).load("@Url.Action("Open")");
        }
    }

    $('#OpenTemplate').click(function ()
    {
        var config = $.extend(baseConfig, openConfig);
        $('#dialog').dialog(config);
        return false;
    });

    $('#CreateTemplate').click(function ()
    {
        var config = $.extend(baseConfig, createConfig);
        $('#dialog').dialog(createConfig);
        return false;
    });
});

这只是一种解决方案。可能有其他方法可以在不破坏对话框的情况下做到这一点，但相信我，当我说这会更干净时。同样，这个 div 重用解决方案假定 div 内的 HTML完全没有变化。

于 2012-05-18T19:04:48.767 回答