ASP.NET AJAX 弹出一个页面作为模式窗口答案

【问题标题】：ASP.NET AJAX popup a page as a modal windowASP.NET AJAX 弹出一个页面作为模式窗口
【发布时间】：2010-08-11 14:01:13
【问题描述】：

我想使用 .aspx 页面的模式弹出窗口将数据添加到数据库。

所以我有一个网格，其中包含一些关于员工的 SQL 表数据。我希望在此页面的某处有一个按钮或链接，以使用户能够将记录添加到数据库，然后刷新网格以显示新数据。

我有一个 addEmployee.aspx，我想在模态窗口中弹出它（并像我在某些网站上看到的那样将底层页面变暗），让用户输入数据并保存到 addEmployee.aspx 中的数据库。此页面包含用于此工作的所有 sql 和验证逻辑。添加完成后，我想提醒用户它去了（最好在关闭弹出窗口并在主页上显示一条消息后，我还想刷新数据库中的数据网格信息，以便它反映新的已添加记录。

有人可以指点我一个方向来获得这种类型的功能，而无需编写数周的代码来获得它。

如果你有更好的解决方案，我会全力以赴！！！

谢谢

【问题讨论】：

标签： c# asp.net jquery asp.net-ajax

【解决方案1】：

如果您可以将 addEmployee.aspx 功能封装到用户控件中，那么您可以将此用户控件 (addEmployee.ascx) 添加到带有网格的页面（例如 viewEmployee.aspx）

然后使用模式弹出扩展器（如果您使用 ajax 控件工具包），您可以显示这个 addEmployee.ascx 控件，其中用户有一个保存按钮，其中包含用于添加员工的相应逻辑。

此外，如果您正在使用更新面板（同样是在 ajax 控件工具包的情况下），您可以执行 listofEmployeeUpdatePanel.Update() 来刷新网格中的项目列表。

这就是我目前在当前应用程序中实现一个非常相似的用例的方式。

这种方法的一个缺点是：addEmployee.ascx 用户控件是原始页面的一部分，无论是否使用它都会增加大小。

【讨论】：

【解决方案2】：

在您的情况下，您可以使用 jquery facebox 插件来显示模式弹出窗口，或者您也可以参考原型 javascript，它非常灵活且易于使用。

对于脸书， facebox 允许将 iframe 显示为模态弹出窗口。所以你可以把你的链接放在 iframe 中。替代“facebox”是“fancybox”，它有很好的 gui。效果很好，因为我以前用过。

希望这会对你有所帮助。

【讨论】：

将我的 8 个网格中的每一个都包含在更新面板中是否允许我在模式完成时刷新特定网格？因此，当您在风险选项卡上并单击特定行的风险网格中的编辑时，您将弹出用户控件以编辑该风险数据...完成后，您将删除记录或更新记录并弹出关闭。这应该刷新风险网格数据。更新面板能做到这一点吗？它将如何被触发来执行此操作？其余的也会更新吗，因为我不想更新所有 8 个，因为只需要更新一个？
使用 updatePanels，您可以使用 UpdateMode = Conditional 和 ChildrenAsTriggers = false（取决于您如何构建 UI 及其相应更新面板）属性的适当组合，以确保 updatePanel 不会全部更新。实际上，您可以通过为您要更新的 updatePanel 调用 updatePanelInstance.Update() 来明确确保只有您要更新的 updatePanel 实际上已更新
在哪里可以查看这些东西的一些示例代码？也不会所有面板都必须与页面一起加载并制作一个巨大的沉重页面吗？我的目标是让外部页面进入模式窗口，这样我就可以分离出每个项目编辑 UI 和逻辑。

【解决方案3】：

您可以在模态框中放置一个指向 addEmployee.aspx 的 IFrame。然后，在主页面添加一个隐藏按钮，如：

<div style="visibility: hidden; display: none;">
    <asp:Button ID="btnHidden" runat="server" />
</div>

在隐藏的按钮上添加一个 Cick，它应该包含更新网格的代码：

protected void btnHidden_Click(object sender, EventArgs e)
{
  //Hidden button was clicked.  Update grid.
}

然后，在 addEmployee.aspx 中的“添加”点击事件上，添加代码告诉主页提交和更新网格：

  private void SubmitParentPage()
    {
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "submitHiddenButton", "window.parent.submitHiddenButton();", true);
    }

这是在主页上调用的 javascript 函数：

function submitHiddenButton() {
    var btn = $get('<%= btnHidden.ClientID %>');
    btn.click();
}

【讨论】：