jquery - 从代码隐藏执行与类关联的 jQuery 对话框

Question

我看过的所有地方都显示了如何使用 #name 格式从代码隐藏执行 jQuery 对话框的示例，但我无法找到有关如何在创建对话框时执行 jQuery 对话框的指导一个类。

我的场景如下:带有 gridview 的 vb.net Web 应用程序来呈现数据。当用户单击一行中的按钮时，我想打开一个 jQuery 对话框，显示当前行数据，而不是直接在 gridview 中编辑该行。

在代码隐藏中，我填充了与应与 jQuery 对话框关联的 DIV 关联的文本框。到目前为止一切都很好。

我的问题是，表单实际上有几个用于显示数据的 GridView ，其中几个需要在对话框中编辑数据。因此，我没有为每个需要编辑的 gridview 创建一个 jQuery 对话框，而是只创建了 1 个与类关联的 jQuery 对话框。

jQuery 如下:

function FadingDialogAttachmentOpen(vDivId, vWidth) {
    $('#' + vDivId).dialog("open");
    if (vWidth == null) { vWidth = 300 };
    $('#' + vDivId).dialog("option", "width", vWidth);
    return false;
};

function FadingDialogAttachmentClose(vDivId) {
    $('#' + vDivId).dialog("close");
};

$(document).ready(function () {
    $('.FadingDialog').dialog({
        dialogClass: 'dialog_xms',
        modal: true,
        autoOpen: false,
        close: false,
        dragabble: true,
        resizable: false,
        show: 'fade',
        hide: 'fade',
        width: 300,

        open: function (type, data) {
            $(this).parent().appendTo('form');
        },

        buttons: {
            Cancelar: function () {
                f_tcalCancel();
                var a = this;
                $(this).dialog('close');
            },
            Ok: function () {
                var a = this;
                var btnId = $(this).attr('data-idButton');
                $(this).dialog("close");

                $('#MainContent_' + btnId).click();
            }
        }

    });
});

表单代码后面，我使用以下内容: Page.ClientScript.RegisterStartupScript(Me.GetType(), "Popup", "FadingDialogAttachmentOpen('dialogEditPayments',500);", True)

我的问题是“打开”在创建对话框之前触发。如果我将 jQuery 中的代码更改为 #name 格式，该对话框就会显示。

任何想法将不胜感激。

问候，阿里尔

Answer 1

我终于明白了这一点。实际上实现起来非常简单。我想我会分享它，以防其他人面临同样的问题。最终解决方案如下:

1. 用于初始化/显示/隐藏对话框的 JavaScript 函数与上面所示完全相同
2. 添加2个按钮；每个按钮都会弹出一个对话框

3. 用于创建用作对话框内容的 DIV 的 HTML 如下:

   <div id="ThisIsATest1" class="FadingDialog" title="Dialog Box Example 1">
       This is a test
   </div>
   <div id="ThisIsATest2" class="FadingDialog" title="Dialog Box Example 2" 
       data-idButton="btnDialog">
       This is another test
   </div>
   

4. 在每个按钮的代码隐藏中，使用以下句子:

   Page.ClientScript.RegisterStartupScript(Me.GetType(), "弹出窗口", "$(function(){$('.FadingDialog').dialog();FadingDialogAttachmentOpen('"& pDivId & "',"& pWidth.ToString& ");});", True)

5. 将pDivId替换为要显示的相应DIV的ID；将 pWith.ToString 替换为您希望对话框的宽度

6. 或者，您可以将相同的句子放入模块中，然后调用为您放置客户端脚本指令的子程序(这样您就不必为每个对话框执行此操作)，如下所示:

   Public Sub fxDialogBox(pDivId As String, pWidth As Integer)
       Dim vPage As Page = HttpContext.Current.Handler
       vPage.ClientScript.RegisterStartupScript(Me.GetType(), "Popup", "$(function()
       {$('.FadingDialog').dialog();FadingDialogAttachmentOpen('" & pDivId & "'," &
       pWidth.ToString & ");});", True)
   End Sub
   

7. 在每个按钮后面的代码中，您将调用如下函数:fx.fxDialogBox("ThisIsATest2", 700)

享受