65.9K
CodeProject 正在变化。 阅读更多。
Home

一个简单的ASP.NET服务器控件：消息框和确认框

宁辽
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.54/5 (53投票s)

2004年9月3日

5分钟阅读

viewsIcon

1176229

downloadIcon

44261

一篇关于创建简单ASP.NET服务器控件的文章，该控件可作为消息框和确认框

引言

在基于Web的应用程序中，消息框、确认框等非常常用，用于提醒用户或询问用户是否执行某个重要操作。在Web窗体中，这些弹出框通常使用在客户端运行的JavaScript来实现，例如使用alert、confirm等函数。这种解决方案的一个缺点是，这些提示框的弹出时间在设计时是静态地指定在客户端的，因此它们无法像服务器端组件那样灵活地在服务器端使用，这非常不方便，特别是对于具有复杂业务逻辑但需要提供友好用户界面的复杂商业应用程序。

在Lee Gunn的文章“ASP.NET中的简单消息框功能”中，他只解决了消息框问题，而没有提及确认框的问题。在本文中，我们将介绍一个简单但非常实用的服务器控件，它可以执行消息框或确认框的功能。更重要的是，这个服务器控件的配置和使用也非常简单。

使用代码

要在代码中使用服务器控件，首先需要将服务器控件作为.NET Framework组件添加到Web应用程序中。详细步骤如下：右键单击工具箱中的“组件”选项卡，然后单击“添加/删除项”，会弹出一个窗口，在“.NET Framework组件”选项卡下，单击“浏览”，然后选择并添加您在计算机上保存的服务器控件可执行文件。文件名是msgBox.dll。然后，将服务器控件拖放到Web窗体上。（请注意：请将服务器控件放在Web窗体的最后位置，否则可能会出现一些意外的结果）。

以下是包含服务器控件的WebForm1.aspx代码。

<%@ Register TagPrefix="cc1" Namespace="BunnyBear" Assembly="msgBox" %>
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" 
  AutoEventWireup="false" Inherits="msgbox_app.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" 
  name="vs_targetSchema">

</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<asp:Button id="Button1" runat="server" Text="Submit"></asp:Button>
<asp:TextBox id="TextBox1" runat="server" Width="232px" Height="32px">
</asp:TextBox>
<cc1:msgBox id="MsgBox1" runat="server"></cc1:msgBox>
</form>
</body>
</HTML>

假设一个简单的场景：当您单击Button1时，如果TextBox1中没有文本输入，您将弹出一个消息框；但是，如果TextBox1中有输入，您将弹出一个确认框，询问用户是否继续。相应的Button-Click事件处理代码如下所示。

要弹出消息框，只需调用服务器控件的alert(string msg)方法即可。这非常简单，此处不再赘述。我们将主要介绍如何弹出确认框。方法confirm(string msg, string hiddenfield_name)的第二个参数是Web窗体中的一个隐藏字段元素的名称，服务器控件也属于该Web窗体。您无需显式创建隐藏字段组件，服务器控件会使用您提供的隐藏字段名称为您创建一个，但您需要提供一个唯一的隐藏字段名称，以区别于Web窗体中的其他组件。隐藏字段的初始值为“0”。当用户单击“确定”以确认操作时，服务器控件会将之前指定的隐藏字段值从“0”更改为“1”。

private void Button1_Click(object sender, System.EventArgs e)
{
  //for the page with only one form
  if(TextBox1.Text!=null && TextBox1.Text!="")
     MsgBox1.alert("Please input something in the text box.");
  else
     MsgBox1.confirm("Hello "+ TextBox1.Text + 
          "! do you want to continue?", "hid_f");
}

如果用户通过单击“确定”或“取消”按钮来响应确认框，Web页面将回发，因此您需要编写相应的代码来捕获和处理。这部分代码通常放在ASPX页面的代码隐藏的Page_Load()方法中。通过检查窗体中隐藏字段元素的值是否已更改为“1”（表示用户已确认），您可以放置相应的处理代码，如下所示。请不要忘记将隐藏字段的值重置回原始值“0”，否则下次调用确认框时可能会出现问题。

private void Page_Load(object sender, System.EventArgs e)
{

   if(IsPostBack)
   {
    //PLEASE COPY THE FOLLOWING CODE TO YOUR Page_Load() 
    //WHEN USING THE SERVER CONTROL in your page
    if(Request.Form["hid_f"]=="1")   //if user clicks "OK" to confirm 
    {
        Request.Form["hid_f"].Replace("1","0");
          //Reset the hidden field back to original value "0"

        //Put the continuing processing code 
        MsgBox1.alert("hello " + TextBox1.Text); 

    } 
    //END OF CODE TO BE COPIED
   }
}

就是这样。非常简单，不是吗？以上所有C#代码都包含在WebForm1.aspx.cs中，即WebForm1.aspx的代码隐藏。

我们还需要提到的是，在上述场景中，我们假设WebForm1.aspx仅包含一个Web窗体。实际上，在ASP.NET中，每个ASPX页面仅支持一个Web窗体服务器控件，因此在大多数情况下，上述解决方案就足够了。但是，也有极少数情况，例如在某些ASPX页面中，有一个Web窗体服务器控件以及其他传统的HTML窗体，即页面包含多个Web窗体。使用msgBox服务器控件也可以轻松解决此问题。您需要做的是将msgBox作为服务器控件Web窗体的一个元素，并且该Web窗体应该是Web页面中的第一个窗体。其余过程保持不变。演示项目中的WebForm2.aspx展示了这种情况。
普通的HTML窗体元素不是服务器控件，因此它无法回发到ASPX页面的代码隐藏，因此您需要将处理代码放在其他地方，在下面的示例中，这些处理代码显示在同一个WebForm2.aspx页面中。

<%@ Register TagPrefix="cc1" Namespace="BunnyBear" Assembly="msgBox" %>
<%@ Page language="c#" Codebehind="WebForm2.aspx.cs" 
  AutoEventWireup="false" Inherits="msgbox_app.WebForm2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm2</title>
<% 
if(Request.Form["btn"]!=null)
{

//for the page with more than one forms
if(Request.Form["text1"]=="")
{
//Response.Write("Hi");
  MsgBox1.alert(
"Button2 clicked. Please input something in the second text box.");
}
else
{
MsgBox1.confirm("Button2 clicked. Hello "+ 
  Request.Form["text1"].ToString() + "! do you want to continue?", "hid_f2");
}
}

if(Request.Form["hid_f2"]=="1") //if button2 is clicked and user confirmed
{
 //Your processing code here
 MsgBox1.alert("Button2 Clicked and user confirmed. Hello " 
  + Request.Form["text1"]);
 Request.Form["hid_f2"].Replace("1","0");
} 
%>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta 
content=http://schemas.microsoft.com/intellisense/ie5 
name="vs_targetSchema">
</HEAD>
<body MS_POSITIONING="GridLayout">
<DIV style="LEFT: 56px; WIDTH: 512px; 
POSITION: absolute; TOP: 136px; HEIGHT: 128px"
ms_positioning="FlowLayout">
<FORM id="Form1" method="post" runat="server">
<asp:button id="Button1" runat="server" Text="Button1">
</asp:button><asp:textbox id="TextBox1" runat="server" 
Width="232px" Height="40px">
</asp:textbox><cc1:msgbox id="MsgBox1" runat="server"></cc1:msgbox></FORM>
<FORM id="Form2" method="post">
<INPUT id="btn" type="submit" value="Button2" name="btn" runat="server"> 
<INPUT id="text1" style="WIDTH: 224px; 
HEIGHT: 31px" type="text" size="32" name="text1"
runat="server">
</FORM>
</DIV>
</body>
</HTML>

关于msgBox服务器控件

msgBox服务器控件的基本机制实际上非常简单，以后可能需要改进，但它带来的便利性也是巨大的。服务器控件内部的关键在于，它在服务器控件渲染阶段将相应的JavaScript代码输出到HTML，并利用JavaScript更改其创建的隐藏字段的值，以便隐藏字段可以作为代表用户行为（用户对确认框的回答）的标记。请注意，隐藏字段控件是一个纯HTML元素，不是服务器控件。只有这样，它才能在JavaScript代码中访问，并且在窗体回发时，它的值也会被发送到服务器。以下是msgBox服务器控件的源代码，如果您了解一些ASP.NET服务器控件生命周期，很容易理解。

源代码

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.Text;

namespace BunnyBear
{
/// <summary>
/// Summary description for WebCustomControl1.
/// </summary>
[DefaultProperty("Text"),
ToolboxData("<{0}:msgBox runat=server></{0}:msgBox>")]
public class msgBox : System.Web.UI.WebControls.WebControl
{
//private string msg;
private string content;

[Bindable(true),
Category("Appearance"),
DefaultValue("")]

public void alert(string msg)
{
string sMsg = msg.Replace( "\n", "\\n" );
sMsg = msg.Replace( "\"", "'" );

StringBuilder sb = new StringBuilder();

sb.Append( @"<script language='javascript'>" );

sb.Append( @"alert( """ + sMsg + @""" );" );

sb.Append( @"</script>" ); 

content=sb.ToString();
}

//confirmation box
public void confirm(string msg,string hiddenfield_name)
{
string sMsg = msg.Replace( "\n", "\\n" );
sMsg = msg.Replace( "\"", "'" );

StringBuilder sb = new StringBuilder();

sb.Append( @"<INPUT type=hidden value='0' name='" + 
  hiddenfield_name + "'>");

sb.Append( @"<script language='javascript'>" );

sb.Append( @" if(confirm( """ + sMsg + @""" ))" );
sb.Append( @" { ");
sb.Append( "document.forms[0]." + hiddenfield_name + ".value='1';" 
  + "document.forms[0].submit(); }" );
sb.Append( @" else { ");
sb.Append("document.forms[0]." + hiddenfield_name + ".value='0'; }" );

sb.Append( @"</script>" );

content=sb.ToString();
}

/// <summary>
/// Render this control to the output parameter specified.
/// </summary>
/// <param name="output"> The HTML writer to write out to </param>
protected override void Render(HtmlTextWriter output)
{
  output.Write(this.content);
}
}
}
© . All rights reserved.