Question

我有一个网络表单应用程序，其中开发了几个用户控件并将其放置在客户正在构建订单的页面上。用户控件在他们的工作中非常广泛，导致回发等等。

我想以模态方式显示它们而不将它们放在单独的页面中（如果可能的话）。所以这就是我的问题。

是否可以将用户控件放在div /面板中，以模态方式显示它们并保持模态显示（甚至通过回发），直到用户单击控件上的按钮以解除它？

我基本上是在查看模式选项，因为我需要在用户处理用户控件所在的部分时禁用表单的其余部分。因此，我正在寻找一种我认为最佳实践的方法，并为此采取正确的方向。

谢谢！

附加：

我想用我编写的代码来更新这个代码，希望它可以帮助其他人，如果有更好的方法来实现它，那么我也是耳朵。

这方面的基础是我通过会话变量在我的用户控件和容器页面之间来回传递所有内容。我使用它来告诉容器页面用户控件是否“完成”，并且在标志设置为true之前，容器页面只是在每次回发时以模态方式重新显示用户控件。到目前为止似乎运作良好。

标记：

<%@ Register Src="../controls/mylabel.ascx" TagName="mylabel" TagPrefix="uc1" %>

<div style="width: 100%;">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:Button ID="ButtonAddToCart" runat="server" Text="Add to cart" OnClick="ButtonAddToCartClick" />
</div>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Panel ID="pnlOutput" Visible="False" runat="server" Width="500px">
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>

<div style="visibility: hidden;">
    <asp:Button ID="ButtonHidden" runat="server" Text="Button" />
</div>

<asp:Panel ID="pnlDownload" Visible="False" runat="server">
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
            <div style="width: 100%;">
                <uc1:mylabel ID="mylabel1" runat="server" />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>

代码背后：

protected void Page_PreRender(object sender, EventArgs e)
    {
        InitializeControls();
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        InitializeControls();
    }

    private void InitializeControls()
    {
        DisplayDownloadPanel(!SessionDownloadComplete);

        if (SessionDownloadItemNumber != string.Empty)
        {
            Label1.Text = SessionDownloadItemNumber != "CANCEL" ? "Item ordered from control was: [" + SessionDownloadItemNumber + "]" : "Order was canceled.";
            pnlOutput.Visible = true;
        }
    }

    protected void ButtonAddToCartClick(object sender, EventArgs e)
    {
        bool haveWeSomeText = string.IsNullOrEmpty(TextBox1.Text) == false;
        if (haveWeSomeText == true)
        {
            SessionDownloadComplete = false;
            DisplayDownloadPanel(true);
        }
    }

    private void DisplayDownloadPanel(bool show)
    {
        pnlDownload.Visible = show;

        if (show == true)
        {
            ModalPopupExtender1.Show();
        }
        else
        {
            ModalPopupExtender1.Hide();
        }
    }

    private string SessionDownloadItemNumber
    {
        get { return Session["DownloadItemNumber"] != null ? Session["DownloadItemNumber"].ToString() : string.Empty; }
    }

    private bool SessionDownloadComplete
    {
        get { return Session["DownloadComplete"] == null || Convert.ToBoolean(Session["DownloadComplete"]); }
        set { Session["DownloadComplete"] = value; }
    }

Answer 1

查看ASP.NET Ajax Toolkit Modal popup extender

Answer 2

看看jQuery UI dialog。

这是浏览器中跨浏览器模式对话框的一个很好的解决方案。

<script>
    $(function() {
        $( ".dialogClass" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Delete all items": function() {
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });
</script>

有一些初始hiccups与asp.net集成。但是所有这些都在堆栈流本身上有很好的记录。

Modal ASP.net用户控件

2 个答案: