jQuery模态对话框使用动态内容

时间:2012-10-08 18:41:13

标签: asp.net jquery-ui treeview modal-dialog

好的,在这里打我的脑袋。似乎有很多关于此的讨论,但我想我需要更详细地分解它。我想创建一个带有树视图的模式对话框,允许一些用户交互(复选框),然后在用户单击对话框上的“确定”时在主页面上设置一个字段。不完全确定如何做到这一点。

我可以点击按钮打开对话框,没问题。

标记:

<input id="buttonBuildSelect" runat="server" value="Build Select" type="submit" onserverclick="buttonBuildSelect_ServerClick" />
<div id="dialog" title="Expression Builder">
    <p>
        <asp:CheckBox ID="checkBoxOverwrite" runat="server" Text="Overwrite Existing Statement" /></p>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Panel ID="Panel1" runat="server" Style="border: 1px solid black; overflow: auto;
                height: 200px;">
                <asp:Label ID="labelExpressionType" runat="server" Text=""></asp:Label>
                <asp:TreeView ID="popupTreeView" runat="server" CssClass="treeview" ShowLines="true"
                    NodeStyle-CssClass="nodeStyle">
                </asp:TreeView>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
    <br />        
</div>

脚本:

$(document).ready(function () {

    $(function () {
        $("input:submit").button();
        $("input:submit").click(function () {
            $("#dialog").dialog("open");
            return false;
        });
    });


    $(function () {
        $("#dialog").dialog(
            {
                autoOpen: false,
                modal: true,
                width: 400,
                height: 355,
                resizable: false,
                open: function () {
                    $(this).load("ExpressionBuilder.ascx");
                },
                options: { resizable: false },
                buttons: { "OK": function () {
                    return false
                },
                    Cancel: function () {
                        $(this).dialog("close")
                    }
                }
            }
        )
    });
});

但我无法弄清楚如何1)单击按钮2)从数据库加载树视图3)打开对话框

我一直在研究两种方法,但无法工作。

方法1:使用ajax。但是,我将什么格式返回到树视图以及如何从脚本绑定树视图。

方法2:将对话框的内容放在单独的用户控件中,然后设置对话框以加载用户控件

要采用哪种方法,然后需要一些帮助才能使该方法有效...

由于

修改

我正在构建一个查询构建器。用户从可用实体的下拉列表中选择实体。用户单击“构建选择语句”按钮。将出现一个对话框,其中所选实体的树视图作为父节点和实体中所有字段的子节点。用户检查他们想要包含在select语句中的每个字段,然后单击“确定”。对话框关闭,“选择语句”文本框中填充了格式化为实体数据源ESQL语句的已检查字段(它。[field1],它。[field2]等...)

上面发布的代码打开了对话框,但我们没有内容(因为我没有绑定任何数据。我可以硬编码数据,但我希望用户能够选择使用哪个实体,这意味着树视图的数据源必须是动态的。现在,我无法使任何一种方法工作。没有错误,但也没有对话框(按钮点击什么都不做)。

1 个答案:

答案 0 :(得分:-1)

解决方案:

在代码后面而不是在脚本中构建对话框。然后注册脚本。所以,我创建了一个方法:

''' <summary>
''' Open the jquery dialog
''' </summary>
''' <remarks></remarks>
Protected Sub OpenDialog()
    Dim sb As New StringBuilder()
    sb.Append("$(function() { ")
    sb.Append(" $('#dialog').dialog({")
    sb.Append("    modal: true,")
    sb.Append("    width: 400,")
    sb.Append("    height: 355,")
    sb.Append("    show: 'blind',")
    sb.Append("    hide: 'blind',")
    sb.Append("    resizable: false,")
    sb.Append("    buttons: { 'OK': function () {")
    sb.Append("        return false;")
    sb.Append("    },")
    sb.Append("        cancel: function () {")
    sb.Append("            $(this).dialog('close');")
    sb.Append("        },")
    sb.Append("    },")
    sb.Append(" });")
    sb.Append("});")
    Page.ClientScript.RegisterStartupScript(GetType(Page), "myscript", sb.ToString(), True)
End Sub