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>

テンプレートを開くリンクについては、かなり異なるダイアログが必要です。

  • 他のボタン
  • 他のサイズ
  • 他のタイトル
  • 等...

開いているテンプレートリンクが同じダイアログdiv"#dialog"を使用して独自のダイアログを開くことができるようにするには、何を変更する必要がありますか？

4

1 に答える 1

0

過去に、単一のdivを複数の異なるダイアログに再利用しようとしましたが、新しいdivとui.dialogの新しいインスタンスを作成することを強くお勧めします。bodyタグの下部に追加のhtmlを追加しますが、これはjavascriptコードを明確に分離するという利点のために支払う小さな代償です。ダイアログdiv内に異なるHTMLが必要な場合は、 2つの完全に別個のdivを使用しない理由はまったくありません。そうすることで、時間と精神的苦痛を大幅に節約できます。

このアドバイスに注意を払わないことを選択した場合は、2つの構成オブジェクトを作成し、閉じるときにダイアログインスタンスを破棄することをお勧めします。このようなもの：

$(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;
    });
});

これは1つの解決策にすぎません。ダイアログを破壊せずにこれを行う他の方法があるかもしれませんが、これがはるかにクリーンになると私が言うとき、私を信じてください。この場合も、このdivの再利用ソリューションは、div内のHTMLがまったく変更されていないことを前提としています。

于 2012-05-18T19:04:48.767 に答える