asp.net 网页自定义控件 (自定义属性,自定义事件)

通过自定义控件实现软件列表展示: 

示例页面: http://www.scimence.club/pages/Soft.aspx

共6个软件列表项,单个列表项:

 

1、自定义属性

定义5个自定义属性 ImageUrl、Tittle、Note、Size、Note、LinkUrl (展示列表项属性值

添加自定义属性示例:

 

2、自定义事件

定义1个:Click  (执行按钮点击跳转

添加自定义事件示例:


3、完整源码

自定义控件SoftIteam.ascx:

自定义控件布局:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SoftIteam.ascx.cs" Inherits="control_SoftIteam" %>

<%--<head  runat="server">
    <link href="~/css/SoftIteamStyle.css" rel="stylesheet" type="text/css" />
</head>--%>

<style>
    .Iteam
    {
        position:relative;

        display:inline-block;
        width:556px;
        height:60px;
        padding:10px;
        margin-right:3px;
        color:#000000;
        border-bottom: 1px solid #ccc;
        top: 0px;
        left: 0px;
        border-left-style: none;
        border-left-color: inherit;
        border-left-width: 1px;
        border-right-style: none;
        border-right-color: inherit;
        border-right-width: 1px;
        border-top-style: none;
        border-top-color: inherit;
        border-top-width: 1px;
    }
    .Image
    {
        width:20px;
        height:20px;
        border:1px;
        color:#ff0000;
    }
    .PosTittle
    {
        position:absolute;
        top: 16px;
        left: 80px;
        width: 300px;
        right: 131px;
        height: 24px;
        vertical-align: middle;
    }
    .PosContent
    {
        position:absolute;
        top: 45px;
        left: 80px;
        width: 300px;
        right: 132px;
        height: 24px;
        vertical-align: middle;
    }
    .PosSize
    {
        position:absolute;
        top: 29px;
        left: 397px;
        width: 75px;
        right: 119px;
        text-align:center;
        height: 27px;
        vertical-align: middle;
    }
    .PosButton
    {
        position:absolute;
        top: 30px;
        left: 485px;
        width: 75px;
        right: 31px;
        text-align:center;
        height: 27px;
        vertical-align: middle;
    }
</style>

<div class="Iteam" >
    <asp:Image class=Image ID="Icon" runat="server" width="60px" Height="60px"  />
    <div class="PosTittle">
        <asp:Label ID="LabelTittle" runat="server" Text="标题" Font-Bold="True"></asp:Label>
    </div>
    <div class="PosContent">
        <asp:Label ID="LabelContent" runat="server" Text="说明信息说明信息说明信息说明信息" ForeColor="#888888"></asp:Label>
    </div>
    <div class="PosSize">
        <asp:Label ID="LabelSize" runat="server" Text="200KB"></asp:Label>
    </div>
    <div class="PosButton">
        <asp:Button ID="ButtonDetail" runat="server" OnClick="Button_Click" Text="详情" Height="24px" Width="52px" />
    </div>
</div>

自定义控件定义:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class control_SoftIteam : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //Icon.ImageUrl = "";
    }


    // --------------------------------------------
    // 添加自定义属性ImageUrl、Tittle、Note、Size、Note、LinkUrl

    string imageUrl = "";
    [Description("要显示的图像URL"), Category("自定义属性")]
    public string ImageUrl                  // 控件的自定义属性值
    {
        get
        {
            return imageUrl;
        }
        set
        {
            imageUrl = value;
            Icon.ImageUrl = value;
        }
    }

    string tittle = "标题";
    [Description("标题信息"), Category("自定义属性")]
    public string Tittle                  // 控件的自定义属性值
    {
        get
        {
            return tittle;
        }
        set
        {
            tittle = value;
            LabelTittle.Text = value;
        }
    }

    string content = "说明信息";
    [Description("说明信息"), Category("自定义属性")]
    public string Note                  // 控件的自定义属性值
    {
        get
        {
            return content;
        }
        set
        {
            content = value;
            LabelContent.Text = value;
            LabelContent.ToolTip = value;
        }
    }

    string size = "100 KB";
    [Description("文件大小信息"), Category("自定义属性")]
    public string Size                  // 控件的自定义属性值
    {
        get
        {
            return size;
        }
        set
        {
            size = value;
            LabelSize.Text = value;
        }
    }

    string linkUrl = "";
    [Description("链接Url"), Category("自定义属性")]
    public string LinkUrl                  // 控件的自定义属性值
    {
        get
        {
            return linkUrl;
        }
        set
        {
            linkUrl = value;
        }
    }

    // --------------------------------------------
    // 添加自定义事件 OnClick(object sender, EventArgs e) -> 命名为Click

    protected void Button_Click(object sender, EventArgs e) // 从Button的点击事件,触发自定义控件的点击逻辑
    {
        if (Click != null) Click(this, new EventArgs(), LinkUrl);
    }

    public delegate void Click_Handle(object sender, EventArgs e, string url);  // 自定义事件的参数类型
    [Description("点击当前控件的详情按钮时执行。"), Category("自定义事件")]
    public event Click_Handle Click;    // 定义当前控件的点击事件名称,在属性中为 On此处名称=“Button_Click”

    //[Description("点击当前控件的详情按钮时执行。"), Category("自定义事件")]
    //public event EventHandler Click;

}

在asp页面调用自定义控件展示软件列表信息:

Soft.aspx.cs

布局:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Soft.aspx.cs" Inherits="pages_Soft" %>

<%@ Register src="../control/Pannel.ascx" tagname="Panel" tagprefix="co" %>
<%@ Register Src="../control/SoftIteam.ascx" TagPrefix="co" TagName="SoftIteam" %>

<%--<head  runat="server">
    <link href="~/css/SoftIteamStyle.css" rel="stylesheet" type="text/css" />
</head>--%>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <co:SoftIteam runat="server" id="SoftIteam0" Tittle="easyIcon软件" Note="easyIcon是一款简单易用的Icon制作工具" Size="1.27 MB" ImageUrl="~/res/pic/0.png" LinkUrl="https://scimence.gitee.io/easyicon/note.html" OnClick="Button_Click" />
        <co:SoftIteam runat="server" id="SoftIteam1" Tittle="360浏览器" Note="安全、快速、可阅读打印pdf的浏览器" Size="48.9 MB" ImageUrl="~/res/pic/1.png" LinkUrl="https://browser.360.cn/ee/" OnClick="Button_Click" />
        <co:SoftIteam runat="server" id="SoftIteam2" Tittle="微信" Note="免费社交平台" Size="36.3 MB" ImageUrl="~/res/pic/2.png" LinkUrl="https://pc.weixin.qq.com" OnClick="Button_Click"/>
        <co:SoftIteam runat="server" id="SoftIteam3" Tittle="360压缩" Note="双核解压缩软件,永久免费、安全急速" Size="11.2 MB" ImageUrl="~/res/pic/3.png" LinkUrl="http://yasuo.360.cn" OnClick="Button_Click"/>
        <co:SoftIteam runat="server" id="SoftIteam4" Tittle="爱奇艺视屏" Note="一款专注视屏播放的客户端软件,你可以在线享受爱奇艺官网所有正版视屏" Size="39.7 MB" ImageUrl="~/res/pic/4.png" LinkUrl="https://scimence.gitee.io/easyicon/note.html" OnClick="Button_Click"/>
        <co:SoftIteam runat="server" id="SoftIteam5" Tittle="酷狗音乐" Note="很受欢迎的免费音乐下载、播放软件" Size="43.5 MB" ImageUrl="~/res/pic/5.png" LinkUrl="https://scimence.gitee.io/easyicon/note.html" OnClick="Button_Click"/>
    </form>
</body>
</html>

事件处理:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class pages_Soft : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    //protected void Button_Click(object sender, EventArgs e)
    protected void Button_Click(object sender, EventArgs e, string url)
    {
        Response.Redirect(url);
        //Response.Write("<script language='javascript'>window.open('" + url + "');</script>");
    }
}

完整源码下载

开源地址:https://gitee.com/scimence/Web_SoftWare

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页