使用 AJAX 显示消息的信息框控件

• 下载源代码 - 32.9 KB

引言

我们的目标是提供一个 WinForms MessageBox 和 JavaScript alerts 的 AJAX 等价物，它同时适用于 HTTP 提交模式和 AJAX 回调消息的显示。该功能由一个信息框 ASP.NET 服务器控件来实现，该控件在页面内显示消息。我们的开发环境是 Windows 上的 ASP.NET 2.0 和 IIS，我们的信息框使用了 ASP.NET AJAX Extensions 1.0，您可以从这里下载并安装。

背景

本文引用了“Memba Velodoc XP Edition”的开源控件，您可以从这里下载（该页面提供了 Codeplex、Google code 和 Sourceforge.NET 的链接），并且这些控件在 GPL 许可下分发。这些控件包含一个我们在本文中使用到的信息框。您可以在这个链接上实时体验这些控件。

使用代码

在 Visual Studio 2005 中，创建一个新的 ASP.NET AJAX 启用的网站，并添加对包含 InfoBox 服务器控件的 Memba.WebControls.XP.dll 的引用。Memba.WebControls.XP.dll 是 Memba Velodoc XP Edition 的一部分。源代码可在上面引用的下载位置获得。

打开 Default.aspx 页面，并添加 InfoBox 服务器控件，可以通过将控件添加到工具箱后拖放控件来添加，或者只需在现有的 <form> 标签之间添加以下代码来添加

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server" />
<!-- InfoBox -->
<mbui:InfoBox ID="InfoBox" runat="server"
    Text="Hello World"
    Width="400px"
    CssClass="cssInfoBox"
    TextCssClass="cssInfoBoxText">
</mbui:InfoBox>
<!-- InfoBox --><br /><br />
<select id="cboType">
    <option>Error</option>
    <option selected="selected">Information</option>
    <option>Ok</option>
    <option>Warning</option>
</select>
<input id="txtMessage" type="text" value="Test message" />
<input id="btnAll" type="button" value="set all" />
<input id="btnTemp" type="button" value="set temp" />
<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="submit" />
</form>

您可能需要在页面顶部使用以下语句注册该控件

<%@ Register Assembly="Memba.WebControls.XP" 
    Namespace="Memba.WebControls" TagPrefix="mbui" %>

此外，添加一个 HTML 下拉列表 (cboType)、一个 HTML 文本框 (txtMessage)、两个 HTML 按钮 (btnAll 和 btnTemp) 以及一个 ASP.NET 提交按钮 (btnSubmit)。

InfoBox 控件是一个包含一行两列的表格，第一列包含图像，第二列嵌入一个用于文本的 span。请注意，InfoBox 控件的 text 属性可以使用本地化资源，并且该控件可以使用 ASP.NET 主题进行样式设置。在页面的 </head> 闭合标签上方添加以下样式

<style type="text/css">
<!--
table.cssInfoBox{
border:solid 1px SteelBlue;
background-color:LemonChiffon;
padding:5px;
}
span.cssInfoBoxText{
color:DarkRed;
}
//-->
</style>

您的 InfoBox 控件现在应该看起来像这样

显然，您可以通过服务器端代码设置图标和文本。双击 ASP.NET 提交按钮，并实现如下的 Click 事件处理程序

protected void btnSubmit_Click(object sender, EventArgs e)
{
    InfoBox.Type = Memba.WebControls.InfoBoxType.OK;
    InfoBox.Text = "Submission complete";
}

按 F5 运行页面，然后单击提交按钮。响应应显示“Submission complete”并带有绿色图标。

更有趣的是，图标和文本也可以使用 JavaScript 代码在客户端更改。在页面的 </body> 闭合标签之前添加以下脚本

<script type="text/javascript">
<!--
// Declare global variables for the various controls
var g_InfoBox;
var g_cboType;
var g_txtMessage;
var g_btnAll;
var g_btnTemp;
//pageLoad function of ASP.NET Ajax Extensions framework
function pageLoad()
{
    //get a reference to the InfoBox control
    g_InfoBox = $find("<%= InfoBox.ClientID %>");
    //Get references to html controls
    g_cboType = $get("cboType");
    g_txtMessage = $get("txtMessage");
    g_btnAll = $get("btnAll");
    g_btnTemp = $get("btnTemp");
    //Add event handlers for the click event of both html buttons
    if(g_btnAll)
        $addHandler(g_btnAll, "click", onBtnAll);
    if(g_btnTemp)
        $addHandler(g_btnTemp, "click", onBtnTemp); 
}
//pageUnload function of ASP.NET Ajax Extensions framework
function pageUnload()
{
    //Clear event handlers
    if(g_btnAll)
        $clearHandlers(g_btnAll);
    if(g_btnTemp)
        $clearHandlers(g_btnTemp); 
}
//click event handler for the btnAll button
function onBtnAll()
{
    //Set the infobox message permanently
    if(g_InfoBox && g_cboType && g_txtMessage)
    {
        var _t = g_cboType.options[g_cboType.selectedIndex].text;
        g_InfoBox.set_text(g_txtMessage.value);
        g_InfoBox.set_type(getType(_t));
        //The following does the same in one line
        //g_InfoBox.setAll(getType(_t), g_txtMessage.value);
    }
}
//click event handler for the btnTemp button
function onBtnTemp()
{
    //Set the infobox message for 500 millisec
    if(g_InfoBox && g_cboType && g_txtMessage)
    {
        var _t = g_cboType.options[g_cboType.selectedIndex].text;
        g_InfoBox.setTemp(getType(_t), g_txtMessage.value, 500);
    }
}
//helper
function getType(value)
{
    switch(value)
    {
        case "Error":
            return Memba.WebControls.InfoBoxType.Error;
        case "Ok":
            return Memba.WebControls.InfoBoxType.OK;
        case "Warning":
            return Memba.WebControls.InfoBoxType.Warning;
        default:
            return Memba.WebControls.InfoBoxType.Information;
    }
}
//-->
</script>

ASP.NET AJAX 扩展提供了两个重要的 JavaScript 事件处理程序

• pageLoad 由框架在页面 DOM 和脚本加载并初始化时调用。这是一个获取控件引用和添加事件处理程序的理想位置。
• pageUnload 由框架在页面卸载时调用。建议在此阶段清除处理程序。

该脚本实现了两个 HTML 按钮 (btnAll 和 btnTemp) 的 Click 事件的事件处理程序。在这两种情况下，Click 事件处理程序都会将下拉列表中选择的图标值和文本框中输入的文本值赋给 InfoBox。

按 F5 运行项目，然后单击各种按钮来体验 InfoBox。

关注点

这个信息框是基于 ASP.NET AJAX Extensions 的一个非常简单但有用的服务器控件。它演示了 ASP.NET 服务器控件的创建和使用。对于更高级的开发人员，信息框的源代码可在 Codeplex、Google code 和 Sourceforge.NET 上获得，并且有详细的注释。

历史

• 版本 1.0 - 日期 2007 年 12 月 18 日。