通过自定义控件实现软件列表展示:
示例页面: 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>");
}
}