风影ASP.NET基础教学 7用户控件编程

下面我们使用“网站友情链接”的主要功能就是管理网站的各种友情链接地址,使这些友情链接能够显示在网站各个需要的地方,一般显示在网站的底部。为了实现链接显示,首先需要在项目中创建一个HyperLinkControl.ascx,并在该控件里添加一个HyperLink控件来显示链接。我们把HyperLink放在Panel里。

前端代码

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HyperLinkControl.ascx.cs" Inherits="ASPNETTeach4.HyperLinkControl" %>
<asp:Panel ID="Panel1" runat="server" GroupingText="本站友情链接" EnableTheming="true" Width="400">
    <asp:HyperLink ID="HyperLink1" runat="server" OnLoad="HyperLink1_Load">HyperLink</asp:HyperLink>
</asp:Panel>

后置代码

        protected void HyperLink1_Load(object sender, EventArgs e)
        {
            HyperLink1.Text = "百度";
            HyperLink1.NavigateUrl = "http://www.baidu.com";
        }

我们在HyperLink控件的使用了加载事件,用来初始化数据。编写一个测试Page.运行一下效果。

image

这样编写已经达到了初步的效果,但是我们断点的时候会发现每次请求都会先执行页面的Page_load,然后执行用户控件的Page_Load事件,并且他们是相互独立的。最后才会执行内部的Load事件,因此我们可以把这些初始化操作放入用户控件的Page_Load即可。

去掉HyperLink1_Load。把代码放入用户控件的Page_Load中。

并且只应该在第一次请求的时候进行初始化操作。因此我们的代码变更为:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {//判断是否是首次请求
        HyperLink1.Text = "百度";
        HyperLink1.NavigateUrl = "http://www.baidu.com";
    }
}

添加属性

我们又发现了一个问题,这样写,我们在应用页面里没办法直接控制这些元素,如我们创建的Panel和HyperLink。我们可以通过创建属性的方式给用户控件提供被外界方便使用的“通道”。

    public partial class HyperLinkControl : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack) {//判断是否是首次请求
                HyperLink1.Text = "百度";
                HyperLink1.NavigateUrl = "http://www.baidu.com";
            }
        }
        private string url;
 
        public string Url
        {
            get { return url; }
            set { url = value; }
        }
 
        private string text;
 
        public string Text
        {
            get { return text; }
            set { text = value; }
        }
 
      
    }
}

我们有发现虽然外界可以访问这两个属性了,这两个属性只是起到保存数据的作用,友情链接根本没有发生变化。

这时,我们有两个解决方案,第一种是更改属性的set访问器,用赋值的时候来直接对相应控件进行设置。

另一种就是在用户控件的Page_Load事件里来进行设置即可。因为页面的Page_Load要优先执行,也可以通过ASPNET标记属性来进行设置。

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {//判断是否是首次请求
        HyperLink1.Text = Text;
        HyperLink1.NavigateUrl = Url;
    }
}

调用页面代码

 <uc1:HyperLinkControl runat="server" Text="新浪" Url="http://www.sina.com.cn"   ID="HyperLinkControl" />

结果:

image

 

貌似我们完成了一个简单的用户控件,但是还有一些缺陷,就是不能同时设置多个友情链接信息,不能够设置图片链接信息等。

下面我们来用自定义对象的方式对其进行扩展。

 

首先我们需要创建一个自定义类HyperLinkItem,该类是为网页和用户控件通信而特别设计的。它定义每个链接所需的信息。

public class HyperLinkItem
{
    public string Text { get; set; }
    public string Url { get; set; }
 
    public HyperLinkItem() { 
    }
    public HyperLinkItem(string text, string url) {
        Text = text;
        Url = url;
    }
}

定义好Item类之后,就需要定义用户控件页面了,在这里为了能够批量显示链接信息,这里将以前的HyperLink更换为Literal。

定义好这些后接下来就要考虑如何显示了。

 

在用户控件里编写一个集合属性用来保存多条的链接信息。

        protected void Page_Load(object sender, EventArgs e)
        {
            
        }
 
        private List<HyperLinkItem> hyperLinkItems;
 
        public List<HyperLinkItem> HyperLinkItems
        {
            get { return hyperLinkItems; }
            set { 
                hyperLinkItems = value;
                foreach (var item in hyperLinkItems)
                {
                    this.Literal1.Text += string.Format("<a href='{0}' style='margin-right:5px'>{1}</a>",item.Url,item.Text);
                }
                
            }
        }

 

我们在集合赋值数据的时候通过遍历的方式把要输出的字符串放入Literal1中。

然后就可以直接使用了。

 

我们在引用的Page页里来初始化数据并显示。

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        List<HyperLinkItem> list = new List<HyperLinkItem>() { 
            new HyperLinkItem{ Url="http://www.baidu.com", Text="百度"},
            new HyperLinkItem{ Url="http://www.163.com", Text="网易"},
            new HyperLinkItem{ Url="http://www.google.com", Text="谷歌"},
            new HyperLinkItem{ Url="http://www.taobao.com", Text="淘宝"},
            new HyperLinkItem{ Url="http://www.cnblogs.com", Text="<img src='http://static.cnblogs.com/images/adminlogo.gif' border='0px' />"}
        };
        HyperLinkControl.HyperLinkItems = list;
    }
}

最终效果:

image

下篇,我们来看看如何加入自定义事件

posted on 2012-08-26 20:28  任生风影  阅读(1362)  评论(3编辑  收藏  举报

导航