技术资料 > .Net专区 > Asp.Net开发 : web组件的通信－－－浅谈事件

web组件的通信－－－浅谈事件

March 25,2004

大家目前开发asp.net程序经常会用到usercontrols即pagelet（.ascx文件）。有不少人现在把它当做asp里的include来使用。当然这也是很自然的，但一旦考虑到user controls和他所处的容器web form之间或其他user controls之间的通信，事情好像就比较复杂了。比如说，我有这样一个页面
                  User Control（Image Button）
User Control（Left Hyperlink Menu） User Control（Main Content） User Control（Advertisments）
                  User Control（Additional Links）
如果你想要在点击左面的Link时，让container动态的调用一个新的user control到Main Content的位置，这就要求我们给这两个web组件定位：
1.Parent Web Form：应该知晓页面中他所有load的user controls传递给他的的布局和导航消息
2.User Control：向Parent Web Form传递消息
拿上面的例子说，Parent Web Form怎样才知道你什么时候点击了Left Hyperlink Menu中的一个Link，或者Parent Web Form怎样才知道你点击了哪一个Link？很明显我们应该提供一个通信机制，而.NET Framework已经提供了这样一套机制－－Event。（当然上面的例子可以用Response.Redirect和Request.Params来解决，但这不是一个最优的解决方案，因为这种机制是紧密耦合的，而一个好的组件是应该有高度独立性的，我以前也说过事件是松散耦合的机制）
现在我们来先看一段代码
using System;
using System.Web.UI.WebControls;

namespace Michael.Communication.UserControls.Delegates
{
using EvengArgObjects;
// 声明delegate（注意delegate其实是个对象），在C#中一般是(object sender, EventArgs e)，sender是引发事件的对象的例示
//比如说在一个user control中有一个button引发了一个事件，那button就是sender，而不是user control
//delegate既可以在class之外声明也可以在class之内声明，一般在class之外声明
public delegate void HeaderEventHandler(object sender, MichaelImageEventArgs e);
}

namespace Michael.Communication.UserControls.Delegates.EventArgObjects
{
// 继承System.EventArgs，当单击图形按钮时提供信息
public class MichaelImageEventArgs : System.EventArgs
{
   private string imageTextClicked = null;

   public string imageText
   {
      get {return imageTextClicked;}
      set {imageTextClicked = value.Trim();}
   }
}
}
注：上面的代码实现了我们自己的Delegate和EventArgs

接下来我们写一个User Control，包含六个Image Button
//Header.ascx
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="Header.ascx.cs" Inherits="Michael.Communication.UserControls.Header"%>
<asp:Table Runat="server" CellSpacing="0" CellPadding="0" id="Table1">
<asp:TableRow Runat="server">
   <asp:TableCell Runat="Server">
      <asp:Table Border="0" CellSpacing="0" CellPadding="0">
   <asp:TableRow ID="row1" Runat="server">
   <asp:TableCell Runat="server" ColumnSpan="2" HorizontalAlign="Left">
      <asp:ImageButton ID="imgNewLogo" Runat="server" ImageUrl="images/newlogo.gif" OnClick="Image_Click" />
         </asp:TableCell>
   <asp:TableCell Runat="server" ColumnSpan="4" HorizontalAlign="Right">
      <asp:ImageButton ID="imgNewHead" Runat="server" ImageUrl="images/newhead.gif" OnClick="Image_Click" />
   </asp:TableCell>
   </asp:TableRow>
<asp:Table>
   <asp:TableRow ID="row2" Runat="server">
      <asp:TableCell Runat="server">
      <asp:ImageButton ID="imgBanner1" Runat="server" ImageUrl="images/banner1.gif" OnClick="Image_Click" />
   </asp:TableCell>
   <asp:TableCell Runat="server">
      <asp:ImageButton ID="imgBanner2" Runat="server" ImageUrl="images/banner2.gif" OnClick="Image_Click" />
   </asp:TableCell>
   <asp:TableCell Runat="server">
      <asp:ImageButton ID="imgBanner3" Runat="server" ImageUrl="images/banner3.gif" OnClick="Image_Click" />
   </asp:TableCell>
   <asp:TableCell Runat="server">
      <asp:ImageButton ID="imgBanner4" Runat="server" ImageUrl="images/banner4.gif" OnClick="Image_Click" />
   </asp:TableCell>
   </asp:TableRow>
      </asp:Table>
   </asp:TableCell>
</asp:TableRow>
</asp:Table>

//Header.ascx.cs
namespace Michael.Communication.UserControls
{
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Michael.Communication.UserControls.Delegates;
using Michael.Communication.UserControls.Delegates.EventArgObjects;

public abstract class Header : System.Web.UI.UserControl
{
   // 声明事件(触发事件相当于回调)
   public event HeaderEventHandler headerEventHandler;

   public void Image_Click(object sender, ImageClickEventArgs e)
   {
      if(headerEventHandler != null)
      {
         ImageButton ib = (ImageButton)sender;
         // 创建EvenArgs对象的实例
         MichaelImageEventArgs michaelImageEventArgs = new MichaelImageEventArgs();
         michaelImageEventArgs.ImageTextClicked = GetImageButtonText(ib.ID, e);

         foreach(headerEventHandler h in headerEventHandler.GetInvocationList())
         {
            try
            {
               // 事件触发
               h(ib, michaelImageEventArgs);
            }
            catch (Exception er)
            {
               // 处理意外
            }
         }
      }
      return;
   }

//用ImageButton的ImageClickEventArgs返回X,Y确定点击到图片的那一部分
private string GetImageButtonText(string ID, ImageClickEventArgs e)
{
      string returnValue = null;

      if(ID == "imgNewLogo")
         returnValue =  "IBM";

      if(ID == "imgNewHead")
      {
         if((e.Y > 0) && (e.Y < 35))
            returnValue =  "163.com";
         else
            returnValue = "Microsoft";
      }

      if(ID == "imgBanner1")
         returnValue = "8488";

      if(ID == "imgBanner2" || ID == "imgBanner3")
      {
         if((e.Y > 0) && (e.Y < 21))
            returnValue = "chinabyte";
         if((e.Y > 20) && (e.Y < 36))
            returnValue = "www";
         if(e.Y > 35)
         returnValue = (ID == "imgBanner2" ? "sina.com.cn" : "5460.net");
         if(e.X > 160)
      returnValue = (ID == "imgBanner2" ? "my name is michael" : "what is your name");
      }

      if(ID == "imgBanner4")
      {
         if((e.Y > 0) && (e.Y < 36))
            returnValue = "@163.com";
         if(e.Y > 35)
            returnValue = "www.163.com";
      }
      return returnValue;
   }
}
}

主页面
//Default.aspx
<%@ Page language="c#" Codebehind="default.aspx.cs" AutoEventWireup="false" Inherits="Michael.Communication.Default" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD><TITLE>事件例子</TITLE></HEAD>
   <BODY>
      <FORM runat="server">
         <asp:Table ID="tblLayout" Runat="server" CellSpacing="0" CellPadding="0">
      <asp:TableRow ID="row1" Runat="server">
         <asp:TableCell ID="cell11" Runat="server"></asp:TableCell>
      </asp:TableRow>
      <asp:TableRow ID="row2" Runat="server">
         <asp:TableCell ID="cellTest1" Runat="server"
               Text="你选择的图片所对应的文字是：（第一次事件被触发）"
               Font-Name="Verdana" Font-Size="11pt" BackColor="Gainsboro" BorderStyle="Solid"
               BorderWidth="1px" BorderColor="Black" HorizontalAlign="Center" />
         </asp:TableRow>
      <asp:TableCell ID="cellTest2" Runat="server"
               Text="你选择的图片所对应的文字是：（第二次事件被触发）"
               Font-Name="Verdana" Font-Size="11pt" BackColor="Gainsboro" BorderStyle="Solid"
               BorderWidth="1px" BorderColor="Black" HorizontalAlign="Center" />
      </asp:TableRow>
</asp:Table>
</FORM>
  </BODY>
</HTML>

//default.aspx.cs
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Michael.Communication.UserControls;
using Michael.Communication.UserControls.Delegates;
using Michael.Communication.UserControls.Delegates.EventArgObjects;

namespace Michael.Communication
{
public class Default : System.Web.UI.Page
{
   protected System.Web.UI.WebControls.TableCell cell11;
   protected System.Web.UI.WebControls.TableCell cellTest1;
   protected System.Web.UI.WebControls.TableCell cellTest2;

   public Default()
   {
      Page.Init += new System.EventHandler(Page_Init);
   }

   private void Page_Init(object sender, EventArgs e)
   {
      InitializeComponent();
   }

   private void InitializeComponent()
   {
      this.Load += new System.EventHandler(this.Page_Load);
   }

   private void Page_Load(object sender, System.EventArgs e)
   {
      cell11.Controls.Add(LoadHeader());
   }

   //触发事件
   public void SetText1(object sender, MichaelImageEventArgs e)
   {
      cellTest1.Text = "你选择的图片所对应的文字是： <B>{" + e.ImageText + "}</B>";
   }

   //触发事件
   public void SetText2(object sender, MichaelImageEventArgs e)
   {
      cellTest2.Text = "你选择的图片所对应的文字是： <B>{" + e.ImageText + "}</B>";
   }

   private Header LoadHeader()
   {
      Header header = (Header)Page.LoadControl("Header.ascx");
//事件关联
      header.HeaderEventHandler += new HeaderEventHandler(this.SetText1);
      header.HeaderEventHandler += new HeaderEventHandler(this.SetText2);
      return header;
   }

}
}