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

80酷酷网    80kuku.com

  webweb组件的通信---浅谈事件
大家目前开发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" Border
                 BorderWidth="1px" BorderColor="Black" HorizontalAlign="Center" />
            </asp:TableRow>
        <asp:TableCell ID="cellTest2" Runat="server"
                 Text="你选择的图片所对应的文字是:(第二次事件被触发)"
                 Font-Name="Verdana" Font-Size="11pt" BackColor="Gainsboro" Border
                 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;
      }

   }  
}  

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: