0

我有几个链接，单击时会打开一个对话框。

我仍然需要将单独的参数传递给对话框，因为根据其单独的内容，我需要另一个标题、高度、重量、contentUrl 用于加载函数、回调函数来执行更新用户界面的单独函数。

我如何必须重写以下代码才能达到我的目标？

   <script type="text/javascript">

        $(document).ready(function () {

            // Does not cache the ajax requests to the controller e.g. IE7/9 is doing that...
            $.ajaxSetup({ cache: false });

            // the div holds the html content
            var $dialog = $('<div></div>')
            .dialog({
                autoOpen: false,
                title: 'generic title',
                height: generic height,
                width: generic width,
                modal: true,
                resizable: false,
                hide: "fade",
                show: "fade",
                close: function (event, ui) {
                    // Clears all input values of the form
                    $("form")[0].reset(); 
                },
                open: function (event, ui) {
                    $(this).load('@Url.Action("Delete")');
                },
                buttons: {
                    "Ok": function () {
                        var form = $('form', this);
                        $.ajax({
                            url: $(form).attr('action'),
                            type: 'POST',
                            data: form.serialize(),
                            cache: false,
                            success: function (result) {

                                if (result.success) {
                                    $dialog.dialog("close");
                                    // Update UI with individual function/callback passed as parameter
                                }
                                else {
                                    // Reload the dialog with the form to show model/validation errors 
                                    $dialog.html(result);
                                }
                            }
                        });
                    },
                    "Close": function () {
                        $(this).dialog("close");
                    }
                }
            });     

            $('#DeleteTemplate').click(function (e) {
                var contentUrl = $(this).attr('href');           

                $dialog.dialog('open');
                return false; 
            });

            $('#CreateTemplate').click(function (e) {
                var contentUrl = $(this).attr('href');             

                $dialog.dialog('open');
                return false; 
            });
        });

        function updateDataGrid() {
            // Pass this function to the dialog as individual function to be executed after the ajax call and result.success 
        }

        function updateTreeView() {
            // Pass this function to the dialog as individual function to be executed after the ajax call and result.success 
        }
    </script>
4

2 回答 2

2

Try wrapping your $dialog var in a function.

function getDialog(title, height, width) {
  return $('<div></div>').dialog({
    // paste all your other dialog code here while inserting the vars that you passed in
  });
}

Then just call this function to build your dialog before you show it in your other click handlers:

var $dialog = getDialog('my title', 480, 600);
$dialog.dialog('open');

Hope that helps!

于 2012-05-25T20:21:11.010 回答
0

我花了一些精力来重构我以前的代码：

我将 autoOpen 设置为 true，因此我不需要返回对话框。

可以传递回调，但不需要传递，而是传递 null。

我将此作为解决方案提供，因为我认为它非常好/可扩展。

 @Html.ActionLink("Create Template", "Create", "Template", new { id = "CreateTemplate", data_dialog_width = 250, data_dialog_height = 250 })
   @Html.ActionLink("Delete Template", "Delete", "Template", new { id = "DeleteTemplate", data_dialog_width = 250, data_dialog_height = 300 }) 



<script type="text/javascript">

    // Does not cache the ajax requests to the controller e.g. IE7/8/9 is doing that...
    $.ajaxSetup({ cache: false });

    $(document).ready(function () {
        $('#CreateTemplate').click(function (event) { loadDialog(this, event, null); });
        $('#DeleteTemplate').click(function (event) { loadDialog(this, event, updateTreeView); });
    });

    function loadDialog(link, event, updateCallback) {
        event.preventDefault();

        var $title = link.innerHTML;
        var $contenturl = $(link).attr('href');       
        var $dialog = $('<div></div>');
        var $height = $(link).attr('data-dialog-height');
        var $width = $(link).attr('data-dialog-width');        

        $dialog.load($contenturl).dialog({ title:$title, autoOpen:true, modal:true, show:'fade', hide:'fade', width:$width, height:$height });

        // Setup dialog
        $dialog.dialog("option", "buttons", {
            "Submit": function () { 
                    ajaxRequest( $(this), $('form', this),updateCallback );
                },
                "Cancel": function () {
                    $(this).dialog("close");                  
                }           
        });
    }
    // Execute an ajax form request sending data
    function ajaxRequest(dlg, form,updateCallback) {
        $.ajax({ url: $(form).attr('action'), type: 'POST', data: form.serialize(),
            success: function (response) {
                if (response.success) {
                    dlg.dialog("close");
                    // Update UI with individual function/callback passed as parameter
                    if (updateCallback != null)
                      updateCallback();

                }
                else {
                    // Reload the dialog with the form to show model/validation errors 
                    dlg.html(response);
                }
            } // no comma after last parameter                  
        });
    }

    function updateDataGrid() {
        alert('updateDataGrid');
    }

    function updateTreeView() {
        alert('updateTreeView');
    }
</script>
于 2012-05-25T22:01:57.353 回答