Modal ASP.net用户控件

Question

我有一个web表单应用程序，其中开发了几个用户控件，并将其放置在客户构建订单的页面上。用户控制在他们所做的事情上相当广泛，导致了post-back等。

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

是否可以将用户控件放置在div/面板中，以模式显示并保持模式显示(即使是通过回发)，直到用户单击控件上的按钮将其关闭？

我基本上是在看模态选项，因为当用户处理用户控件所在的部分时，我需要禁用表单的其余部分。所以我想我正在寻找一种最佳实践方法，并朝着正确的方向进行一些微调。

谢谢！

添加：

我想用我写的代码来更新它，希望它能帮助其他人，如果有更好的方法来实现它，那么我也会洗耳恭听。

其基本原理是，我通过会话vars在用户控件和容器页面之间来回传递所有内容。我用它来告诉容器页面用户控件是否"完成"，直到标志设置为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模式弹出扩展程序

Answer 2

查看jQuery UI对话框。

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

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

在将它与asp.net集成时，最初会出现一些问题。但所有这些都在stackover流本身上得到了很好的记录。