ASP.NET C# 消息框
4.46/5 (19投票s)
本文解释了如何创建一个消息框类以在Web应用程序中使用。
引言
在我最近的两篇题为“创建自定义消息框”的文章中，我描述了如何创建一个可用于桌面应用程序的简单消息框。在本文中，我将解释如何在C#中创建一个消息框类以在Web应用程序中使用。
背景
任何Web开发人员都会告诉您，如果您想向Web应用程序的用户显示消息框，则需要使用JavaScript的alert()或confirm()函数。这些函数非常适合显示简单消息并获取响应。但它们在许多方面都存在不足，例如无法添加不同的图标或按钮，并且在视觉上它们看起来并不美观。
解决方案
如果您想要一个外观精美并且可以添加自己的按钮和图标的消息框，那么您唯一的解决方案就是自己动手。但不要惊慌，这真的并不难。通过结合使用JavaScript和CSS，您可以创建一个用户可以响应的消息框。
解决方案说明
页面遮罩
您需要做的第一件事是使页面内容无法访问。我的意思是，一旦显示了消息框，用户将无法点击页面上的任何导航链接，除非您确认了消息框。这就是页面遮罩的作用。页面遮罩就是一个具有固定位置的div元素。它的作用是将一个div元素放置在您的页面内容之上。如果您设置了div的背景颜色，那么您的页面内容将不再可见。
在页面上放置具有固定位置的div并假设您已经为div设置了背景颜色后，由于页面被放置在div后面，您的页面内容将不再可见。
与其让页面在显示消息框时变白或变成任何颜色，不如让背景半透明，这样您至少可以看到页面内容。如果您不太确定我的意思，请看上面的屏幕截图。请注意，背景是半透明的，页面内容仍然可见。这给人一种页面被遮罩的印象。因此得名页面遮罩。下面的列表1.1是一个示例CSS代码，它演示了如何使div具有半透明的固定位置。请注意，页面的背景设置为黑色，透明度设置为50，即不透明度。如果您测试下面的代码，您不会感觉到div是部分透明的。它只会显示为灰色。但请耐心等待，当您最终打开和关闭页面遮罩时，您将获得完整的效果。
.page_dimmer
{
position:fixed;
height:100%;
width:100%;
top:0px;
left:0px;
background-color:#000000;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
z-index:50;
}
消息框
创建页面遮罩后，就可以创建实际的消息框了。消息框将包括标题、消息和确定按钮。内部消息框结构需要放置在一个div中。所以您可以根据自己的喜好设计消息框的布局。一旦您设计并编写了内部消息框的结构代码，例如标题、消息和确定按钮将显示的位置，您就需要将代码放在一个div中。这个div需要居中并且固定在屏幕上。它需要是固定的，这样如果您的页面有滚动条并且用户向下滚动，消息框应该仍然显示在相同的位置，而页面遮罩div后面的其他页面内容应该向上或向下滚动。
为了将div居中定位，我使用了CSS的top、left和right属性以及百分比，这实际上并没有真正居中div，它只是给人一种div水平居中的错觉。下面列表1.2列出了消息框CSS的代码。
.msg_box_container
{
position:fixed;
background-color:#888888;
border:1px solid #999999;
z-index:50;
left:20%;
right:20%;
top:20%;
}
整合
此时，我应该提到，消息框div不应该嵌套在页面遮罩div内。原因是页面遮罩是半透明的，任何放置在页面遮罩div内的内容也会显示为透明。下面的列表1.3显示了消息框的完整CSS和HTML。
<style>
.page_dimmer
{
position:fixed;
height:100%;
width:100%;
top:0px;
left:0px;
background-color:#000000;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
z-index:50;
}
.msg_box_container
{
position:fixed;
background-color:#888888;
border:1px solid #999999;
z-index:50;
left:20%;
right:20%;
top:20%;"
}
</style>
<div class="page_dimmer" id="pagedimmer"> </div>
<div class="msg_box_container" id="msgbox">
<table width="100%">
<tr>
<td colspan="2">[TITLE]</td>
</tr>
<tr>
<td>[ICON]</td>
<td>[MESSAGE]</td>
</tr>
<tr>
<td colspan="2"><input type="Button" value="OK"></td>
</tr>
</table>
</div>
保存上面的代码，并在消息框div下方放置一些内容。
代码
现在是时候看看确定按钮背后的脚本了，它将用于关闭消息框并移除页面遮罩。在我展示JavaScript代码之前，请再次查看列表1.3中的代码。请注意，页面遮罩和消息框div都有一个ID属性。这非常重要，因为我们将使用JavaScript DOM来获取div的引用，以便我们可以打开和关闭页面遮罩和消息框div的可见性。下面的列表1.4展示了如何使用DOM的getElementById()方法获取页面遮罩和消息框div（对象）的引用。
document.getElementById('page_dimmer')
document.getElementById('msgbox')
上面的代码相当简单，实际上并没有做什么。下面的列表1.5中的代码显示了如何将每个div的可见性设置为隐藏。
document.getElementById('pagedimmer').style.visibility = 'hidden'
document.getElementById('msgbox').style.visibility = 'hidden'
现在我们有了将两个div设置为隐藏的代码，是时候将所有代码放在一起了，即CSS、HTML和JavaScript。下面的列表1.6是消息框的完整代码。您可以保存它并测试确定按钮。
<style>
.page_dimmer
{
position:fixed;
height:100%;
width:100%;
top:0px;
left:0px;
background-color:#000000;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
z-index:50;
}
.msg_box_container
{
position:fixed;
background-color:#888888;
border:1px solid #999999;
z-index:50;
left:20%;
right:20%;
top:20%;"
}
</style>
<div class="page_dimmer" id="pagedimmer"> </div>
<div class="msg_box_container" id="msgbox">
<table width="100%">
<tr>
<td colspan="2">[TITLE]</td>
</tr>
<tr>
<td>[ICON]</td>
<td>[MESSAGE]</td>
</tr>
<tr>
<td colspan="2"><input type="Button" value="OK"
onClick="document.getElementById('pagedimmer').style.visibility = 'hidden';
document.getElementById('msgbox').style.visibility = 'hidden'"></td>
</tr>
</table>
</div>
注意到输入标签中的OnClick事件了吗？
ASP.NET C# 自定义消息框
现在是时候开发一个可重用的消息框类了。既然我们知道如何设置消息框，我们就可以轻松地开始开发一个自定义C#类，以避免每次想使用它时都要编写代码的麻烦。此时，很多人可能已经想到了如何自己开发这个类。但与其匆忙编写代码，不如留下来多看一点。
我用来开发消息框类的方法非常简单。该类包含六个public方法，其中一个返回string。它们如下：
public void SetTitle(string msg_title)
public void SetIcon(string msg_icon)
public void SetMessage(string msg_message)
public void SetOKButton(string msg_button_class)
public void AddButton(string msg_button)
public string ReturnObject()
SetTitle()方法简单地设置消息框的标题。SetIcon()方法设置消息框使用的图标。它接受一个string作为参数，即用作图标的图像文件的路径。SetMessage()方法设置消息框的消息正文。SedivtOKButton()实际上不应该是一个方法，而应该是消息框的一部分，因为每个消息框都需要一个按钮来关闭它。但是，为了在附带的示例中显示确定按钮，您需要调用此方法。您可以删除它，并直接编写确定按钮的代码。此方法接受一个参数，即应用于按钮样式的CSS类。接下来是AddButton()方法。此方法负责向消息框添加其他按钮，点击这些按钮将导航到其他页面。
在调用AddButton()方法之前，您需要先创建一个MessageBoxButton类的实例。此类简单地返回HTML按钮代码。您设置按钮的onClick事件，该事件基本上是通过使用MessageBoxButton类的SetLocation()方法导航到另一个页面。然后，您使用ReturnObject()方法返回HTML代码，并将其设置为AddButton()方法的参数。您可以创建任意数量的MessageBoxButton类实例来不断向消息框添加按钮。您只需继续使用AddButton()方法，该方法将每个按钮的所有HTML代码存储在一个ArrayList中。最后，MessageBox类的ReturnObject()方法返回消息框的HTML代码，包括页面遮罩。所有CSS都是内联的。
模板化
最后，我决定不将消息框代码的结构硬编码到MessageBox类中，而是创建一个模板文件，该文件包含页面遮罩和消息框的HTML代码以及内联CSS。模板文件包含用于插入标题、图标、消息正文和按钮的标记。使用模板的这种方法允许您设计自己的消息框布局，使其具有您想要的外观。您所要做的就是确保模板中有这些标记。
MessageBox类的构造函数接受一个参数，即消息框模板的文件路径。下面的列表1.7显示了模板文件的内容。
<div style="position:fixed;height:100%;width:100%;top:0px;left:0px;
background-color:#000000;filter:alpha(opacity=55);
-moz-opacity:.55;opacity:.55;z-index:50;"
id="pagedimmer"> </div>
<div style="position:fixed;background-color:#888888;
border:1px solid #999999; z-index:50; left:20%;
right:20%; top:20%;" id="msgbox">
<div style="margin:5px;">
<table width="100%" style="background-color:#FFFFFF; border:1px solid #999999;">
<tr>
<td colspan="2" style="font-family:tahoma; font-size:11px; font-weight:bold;
padding-left:5px; background-image: url(msg_title_1.jpg);
color:#FFFFFF; height:22px;">[TITLE]</td>
</tr>
<tr>
<td style="width:100px; text-align:center;">[ICON]</td>
<td style="font-family:tahoma; font-size:11px;padding-left:5px;">[MESSAGE]</td>
</tr>
<tr>
<td colspan="2" style="border-top:1px solid #CCCCCC; padding-top:5px;
text-align:right;">[BUTTONS]</td>
</tr>
</table>
</div>
</div>
标记以粗体突出显示。同时请注意，页面遮罩和消息框div的CSS都包含在style标签中。
最后，下面的列表1.8和列表1.9是MessageBox和MessageBoxButton类的代码。
using System;
using System.Collections;
using System.Text;
using System.IO;
using System.Web;
using System.Web.UI;
public class MessageBox
{
private string strLine;
private StringBuilder msgbox;
private StreamReader readtemplte;
private string msgbox_title = "";
private string msgbox_icon = "";
private string msgbox_message = "";
private string msgbox_ok_button = "";
private string msgbox_buttons = "";
private ArrayList msgbox_button;
public MessageBox(string tpl_path)
{
readtemplte = new StreamReader(tpl_path);
msgbox = new StringBuilder();
msgbox_button = new ArrayList();
while ((strLine = readtemplte.ReadLine()) != null)
{
msgbox.Append(strLine);
}
}
public void SetTitle(string msg_title)
{
this.msgbox_title = msg_title;
}
public void SetIcon(string msg_icon)
{
this.msgbox_icon = "<img src=\"" + msg_icon + "\">";
}
public void SetMessage(string msg_message)
{
this.msgbox_message = msg_message;
}
public void SetOKButton(string msg_button_class)
{
this.msgbox_ok_button = "<input type=\"button\" value=\"OK\" class=\""
+ msg_button_class +
"\" onClick=\"document.getElementById('pagedimmer').style.visibility = 'hidden';"
+ "document.getElementById('msgbox').style.visibility = 'hidden';\">";
}
public void AddButton(string msg_button)
{
msgbox_button.Add(msg_button);
}
public string ReturnObject()
{
int i=0;
while (i < msgbox_button.Count)
{
msgbox_buttons += msgbox_button[i] + " ";
i++;
}
msgbox.Replace("[TITLE]", this.msgbox_title);
msgbox.Replace("[ICON]", this.msgbox_icon);
msgbox.Replace("[MESSAGE]", this.msgbox_message);
msgbox.Replace("[BUTTONS]", msgbox_buttons + this.msgbox_ok_button);
return msgbox.ToString();
}
}
using System;
using System.Text;
using System.Web;
using System.Web.UI;
public class MessageBoxButton
{
private string msg_button = "";
public MessageBoxButton(string btnValue)
{
msg_button = "<input type=\"button\" value=\"" + btnValue + "\"";
}
public void SetClass(string btnClass)
{
msg_button += " class=\"" + btnClass + "\"";
}
public void SetLocation(string btnLocation)
{
msg_button += " onClick=\"window.location='" + btnLocation + "'\"";
}
public string ReturnObject()
{
return msg_button += ">";
}
}
更新：我终于更新了MessageBox类，并添加了一些新功能，例如模板文件的自定义变量。您可以在此处下载最新代码。