如何使这个jqueryajax表单接受单个值作为通用对话框工作

我有几个链接，点击后会打开一个对话框

我仍然需要将各个参数传递给对话框，因为根据对话框的各个内容，我需要另一个标题、高度、重量、加载函数的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>

$（文档）.ready（函数（）{
//不缓存对控制器的ajax请求，例如IE7/9正在这样做。。。
$.ajaxSetup（{cache:false}）；
//div保存html内容
变量$dialog=$（''）
.对话({
自动打开：错误，
标题：“通用标题”，
高度：一般高度，
宽度：通用宽度，
莫代尔：是的，
可调整大小：false，
隐藏：“褪色”，
显示：“褪色”，
关闭：功能（事件、用户界面）{
//清除窗体的所有输入值
$（“表单”）[0]。重置（）；
},
打开：功能（事件、用户界面）{
$（this.load（'@Url.Action（“Delete”））；
},
按钮：{
“Ok”：函数（）{
变量形式=$（'form'，this）；
$.ajax({
url:$（form.attr（'action'），
键入：“POST”，
数据：form.serialize（），
cache:false，
成功：功能（结果）{
如果（结果、成功）{
$dialog.dialog（“关闭”）；
//使用作为参数传递的单个函数/回调更新UI
}
否则{
//使用表单重新加载对话框以显示模型/验证错误
$dialog.html（结果）；
}
}
});
},
“关闭”：函数（）{
$（此）.dialog（“关闭”）；
}
}
});     
$（“#删除模板”）。单击（函数（e）{
var contentUrl=$（this.attr（'href'）；
$dialog.dialog（'open'）；
返回false；
});
$（'#CreateTemplate'）。单击（函数（e）{
var contentUrl=$（this.attr（'href'）；
$dialog.dialog（'open'）；
返回false；
});
});
函数updateDataGrid（）{
//将此函数作为单个函数传递给对话框，在ajax调用和result.success之后执行
}
函数updateTreeView（）{
//将此函数作为单个函数传递给对话框，在ajax调用和result.success之后执行
}

尝试将$dialog变量包装到函数中

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

---

希望有帮助

重构我以前的代码花费了我一些努力：

我将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>

@Html.ActionLink（“创建模板”，“创建”，“模板”，新建{id=“CreateTemplate”，数据对话框宽度=250，数据对话框高度=250}）
@ActionLink（“删除模板”，“删除”，“模板”，新建{id=“DeleteTemplate”，数据对话框宽度=250，数据对话框高度=300}）
//不缓存对控制器的ajax请求，例如IE7/8/9正在这样做。。。
$.ajaxSetup（{cache:false}）；
$（文档）.ready（函数（）{
$（'#CreateTemplate'）。单击（函数（事件）{loadDialog（this，event，null）；}）；
$（'DeleteTemplate'）。单击（函数（事件）{loadDialog（this，event，updateTreeView）；}）；
});
函数加载对话框（链接、事件、updateCallback）{
event.preventDefault（）；
var$title=link.innerHTML；
var$contenturl=$（link.attr（'href'）；
变量$dialog=$（''）；
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}）；
//设置对话框
$dialog.dialog（“选项”、“按钮”{
“提交”：函数（）{
ajaxRequest（$（this），$（'form'，this），updateCallback）；
},
“取消”：函数（）{
$（此）.dialog（“关闭”）；
}           
});
}
//执行发送数据的ajax表单请求
函数ajaxRequest（dlg、表单、updateCallback）{
$.ajax（{url:$（form）.attr（'action'），类型：'POST'，数据：form.serialize（），
成功：功能（响应）{
if（response.success）{
dlg.对话框（“关闭”）；
//使用作为参数传递的单个函数/回调更新UI
if（updateCallback！=null）
updateCallback（）；
}
否则{
//使用表单重新加载对话框以显示模型/验证错误
html(回应);；
}
}//最后一个参数后没有逗号
});
}
函数updateDataGrid（）{
警报（“更新的标记”）；
}
函数updateTreeView（）{
警报（“updateTreeView”）；
}

传递f

 @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>