动态 AJAX 模态弹出窗口

• 下载演示项目 - 21.61 KB

引言

Asynchronous JavaScript and XML (AJAX) -- AJAX 一词的创造者 Jesse James Garrett -- 为 Web 应用程序提供了丰富的用户界面体验。我不会告诉你 AJAX 的优缺点，但这里可以帮助你了解 AJAX 的背景。

在这里，我演示了 Modal Popup 控件的用法，它是 AJAX Toolkit 3.5.40412.0 附带的 AJAX 控件之一。我之所以有动力写这篇文章，是因为我遇到了一个情况，通过选择一个动态填充的列表，希望以模态对话框的形式显示关于选定内容的更多详细信息。挑战在于我正在开发一个 Web 应用程序，而我只有两天时间来完成这个任务。多亏了 AJAX Modal Popup，我做到了。否则，我不可能在两天内完成，因为会有太多的研究和大量的 JavaScript。我认为这篇文章会对那些处于相同情况的人有所帮助。

背景

场景是真实世界的场景：当用户从下拉列表中选择一个法院时，他需要查看有关该法院的更多信息，而无需重定向到新页面。此外，在他关闭对话框之前，他不应该能够编辑表单上的背景项目。

Using the Code

在尝试此演示之前，请执行以下先决条件

1. 通过选择“添加新项…”来添加 Microsoft SQL 2005 数据库
2. 使用服务器资源管理器，添加一个名为 **Court** 的新表
3. 添加以下表定义
   

   Column Name            Data Type
   -----------            ---------
   CourtID (primary key)  int
   CourtName              varchar(100)
   Judge                  varchar(50)
   Info                   varchar(255)

4. 在演示项目中找到存储过程 SP.txt 并执行它。这是可选的，因为你可以使用任何方法来获取填充的数据。

[System.Web.Script.Services.ScriptService]
public class CourtService : System.Web.Services.WebService 
{
}

创建一个获取数据的 Web 方法。它应该返回一个 string 并带有一个 string 参数；这是强制性的。string 参数是按需获取数据使用的动态键。在我们的例子中，它是下拉列表的选定项。

[WebMethod]
public string GetCourt(string contextKey)
{
    //TODO. Method body
}

如果此方法返回一个 string，我们如何获取所有我们想要显示的数据？这很简单，但也很棘手。在弹出控件上，我们通常使用 Label 控件来显示数据。由于此方法返回一个 string，因此将你的数据格式化为一行 string。正如在演示项目中，我想将列名加粗，因此我可以用 <b></b> HTML 标签将列名括起来。使用 System.Text.StringBuilder 类来格式化你的 string。

完整的代码如下

[WebMethod]
public string GetCourt(string contextKey)
{
    if (contextKey == "")
        return "";

    m_courtData = m_court.GetACourtByID(int.Parse(contextKey));
    
    DataSet1.CourtRow _courtRow = m_courtData.Rows[0] as DataSet1.CourtRow;
    System.Text.StringBuilder _sb = new System.Text.StringBuilder();

    _sb.Append("<b>Court Code: </b>").Append(_courtRow.CourtID);
    _sb.Append("<br/>");
    _sb.Append("<b>Judge Name: </b>").Append(_courtRow.Judge);
    _sb.Append("<br/>");
    _sb.Append("<b>Court More Info:</b><br/>");
    _sb.Append(_courtRow.Info);

    return _sb.ToString();
}

请注意 Default.aspx 页面中的以下标记代码。表 1 分别描述了这些属性。

<cc1:ModalPopupExtender ID="mpeCourt" runat="server" 
    OkControlID="btnDlgOK"
    PopupControlID="pnlPopup" 
    TargetControlID="btnDummy" 
    DynamicServicePath="CourtService.asmx" 
    DynamicServiceMethod="GetCourt" 
    DynamicControlID="lblInfo"
    BackgroundCssClass="modal" 
    DropShadow="true">
</cc1:ModalPopupExtender>

表 1：属性说明

btnDummy.Style.Add("display", "none");

.modal
{
    background-color: Gray;
    filter:alpha(opacity=40);
    opacity:0.7;
}

正如你所见，我们使用按钮实例作为 ModalPopupExtender 的 TargetControlID。由于此按钮不在页面上显示，因此你必须编写代码来显示模态弹出窗口。对于我们的场景，我们希望在用户实际从下拉列表中选择一个项目时显示对话框。以下代码演示了这一点

protected void drpCourt_SelectedIndexChanged(object sender, EventArgs e)
{
    if (drpCourt.SelectedIndex != 0)
    {
        mpeCourt.DynamicContextKey = drpCourt.SelectedValue;
        // Display the dialog
        mpeCourt.Show();
    }
}   

请注意，DynamicCotextKey 设置为下拉列表的 SelectedValue，该值将传递给 Web 方法的参数 contextKey。由于下拉列表会导致回发，因此 PopupControlID 的 Panel 控件将在 Modal Popup 定位到浏览器中心之前显示在其所在的位置。为避免此问题，请在 Page_Load 事件中进行设置，如下所示

pnlPopup.Style.Add("display", "none");

历史

• 2010 年 8 月 2 日 -- 已将演示项目更新到 VS 2008 和 AjaxControlToolkit (3.5.40412.0)
• 2007 年 8 月 22 日 -- 发布了原始版本