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

最新推荐文章于 2021-07-29 18:42:00 发布

scimence

最新推荐文章于 2021-07-29 18:42:00 发布

阅读量1.9k

点赞数

分类专栏：网页自定义控件 (自定义属性，自定义事件) VisualStudio asp.net 文章标签： asp.net自定义控件 web自定义控件自定义属性自定义事件

本文链接：https://blog.csdn.net/scimence/article/details/89971941

版权

VisualStudio 同时被 3 个专栏收录

42 篇文章 0 订阅

订阅专栏

asp.net

6 篇文章 0 订阅

订阅专栏

网页自定义控件 (自定义属性，自定义事件)

1 篇文章 0 订阅

订阅专栏

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

示例页面： 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

scimence

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
asp.net 网页自定义控件 (自定义属性，自定义事件)

通过自定义控件实现软件列表展示:示例页面：http://www.scimence.club/pages/Soft.aspx共6个软件列表项，单个列表项：1、自定义属性：定义5个自定义属性ImageUrl、Tittle、Note、Size、Note、LinkUrl （展示列表项属性值）添加自定义属性示例：2、自定义事件定义1个：Click...
复制链接

扫一扫