09-用户控件基础
2024-02-20 本文已影响0人
D丝学编程
用户控件：自定义的可重用的控件(后缀为ascx)，包含html代码，asp.net代码,style等。（注：用户控件中没有
html,head,body标签）
用户控件本质上是页面上一块可重用的代码，可以一次制作，多处使用，通常由系统控件组合而成。
用户控件不仅包含界面，还可以包含对应的后端代码。
站点中如果存在多处相同的用户界面，应将这些相同内容提取并封装成用户控件。
用户控件和页面的异同点：
| 比较 | 用户控件 | 页面 |
|---|---|---|
| 后缀名 | .ascx | .aspx |
| 指令 | @Control | @Page |
| 继承 | System.Web.UI.UserControl | System.Web.UI.Page |
| 包含 | 可以包含控件和其他用户控件，也可以被其他用户控件和页面所包含 | 可以包含控件和所有用户控件，但不可以被其他页面所包含 |
| 直接访问 | 不可以直接访问，必须包含在页面中才能生效 | 可以直接访问 |
| 标签 | 不能包含<HTML>和<BODY>等HTML标签 | 可以包含所有的HTML标签 |
| 编译和运行 | 可以独立运行 |
用户控件的使用步骤：
【1】创建用户控件，并编写代码。
【2】在Page中引入用户控件
【2.1】使用Register指令注册用户控件
<%@ Register Src="用户控件路径" TagName="用户控件标签名" TagPrefix="前缀名" %>
【2.2】引用用户控件
<前缀名:用户控件标签名 ID="uclogin" runat="server" />
一、资料准备
数据库代码：
create table MyMilk --奶粉
(
MilkId int primary key identity(1,1),
MilkTitle nvarchar(100), --奶粉标题
MilkPic nvarchar(100), --奶粉图片
MilkPrice decimal(10,2), --奶粉价格
MilkWeight int --奶粉重量（克）
)
insert into MyMilk(MilkTitle,MilkPic,MilkPrice,MilkWeight)
values('美素力金装','1.jpg','229','900')
insert into MyMilk(MilkTitle,MilkPic,MilkPrice,MilkWeight)
values('惠氏启赋','2.jpg','210','900')
insert into MyMilk(MilkTitle,MilkPic,MilkPrice,MilkWeight)
values('爱他美婴儿配方','3.jpg','378','900')
insert into MyMilk(MilkTitle,MilkPic,MilkPrice,MilkWeight)
values('美赞臣A+','4.jpg','350','900')
insert into MyMilk(MilkTitle,MilkPic,MilkPrice,MilkWeight)
values('美赞臣婴儿配方','5.jpg','268','900')
insert into MyMilk(MilkTitle,MilkPic,MilkPrice,MilkWeight)
values('诺优能婴儿配方','6.jpg','278','900')
insert into MyMilk(MilkTitle,MilkPic,MilkPrice,MilkWeight)
values('飞鹤星飞帆','7.jpg','209','900')
insert into MyMilk(MilkTitle,MilkPic,MilkPrice,MilkWeight)
values('合生元超级呵护','8.jpg','315','900')
insert into MyMilk(MilkTitle,MilkPic,MilkPrice,MilkWeight)
values('合生元阿尔法星','9.jpg','339','900')
insert into MyMilk(MilkTitle,MilkPic,MilkPrice,MilkWeight)
values('美素婴幼儿','10.jpg','318','900')
insert into MyMilk(MilkTitle,MilkPic,MilkPrice,MilkWeight)
values('雅培亲体金装','11.jpg','210','900')
insert into MyMilk(MilkTitle,MilkPic,MilkPrice,MilkWeight)
values('开心羊金装','12.jpg','205','900')
二、用户控件基本使用
用户控件显示商品列表（MyMilkList.ascx）：
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyMilkList.ascx.cs" Inherits="UserControl_MyMilkList" %>
<style type="text/css">
div,ul,li{ margin:0px; padding:0px;}
.milk{ width:220px; float:left; line-height:30px; text-align:center; border:solid 1px gray; margin:10px; padding:10px;}
.milk a{ text-decoration:none;}
.milkImg{ width:220px; text-align:center; clear:both;}
.milkTitle{ width:220px; text-align:center; clear:both;}
.milkPrice{width:220px; text-align:center; clear:both;}
</style>
<asp:Repeater ID="rptMilkList" runat="server">
<HeaderTemplate><div></HeaderTemplate>
<ItemTemplate>
<div class="milk">
<div class="milkImg"><a href="#" target="_blank"><img src="img/<%#Eval("MilkPic") %>" alt="MilkPic" /></a></div>
<div class="milkTitle"><a href="#" target="_blank"><%#Eval("MilkTitle")%></a></div>
<div class="milkPrice">价格：<%#Eval("MilkPrice")%></div>
</div>
</ItemTemplate>
<FooterTemplate></div></FooterTemplate>
</asp:Repeater>
public partial class UserControl_MyMilkList : System.Web.UI.UserControl
{
DBHelper db = new DBHelper();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
BindData();
}
#region 绑定产品信息
private void BindData()
{
string sql = "select * from MyMilk";
db.PrepareSql(sql);
this.rptMilkList.DataSource = db.ExecQuery();
this.rptMilkList.DataBind();
}
#endregion
}
在页面中使用用户控件：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo01.aspx.cs" Inherits="Demo01" %>
<%@ Register src="UserControl/MyMilkList.ascx" tagname="MyMilkList" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>用户控件</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:MyMilkList ID="MyMilkList1" runat="server" />
</div>
</form>
</body>
</html>
三、给用户控件传递参数
用户控件显示价格范围内的商品列表（MyMilkSearch.ascx）：
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyMilkSearch.ascx.cs" Inherits="UserControl_MyMilkSearch" %>
<style type="text/css">
div,ul,li{ margin:0px; padding:0px;}
.milk{ width:220px; float:left; line-height:30px; text-align:center; border:solid 1px gray; margin:10px; padding:10px;}
.milk a{ text-decoration:none;}
.milkImg{ width:220px; text-align:center; clear:both;}
.milkTitle{ width:220px; text-align:center; clear:both;}
.milkPrice{width:220px; text-align:center; clear:both;}
</style>
<asp:Repeater ID="rptMilkList" runat="server">
<HeaderTemplate><div></HeaderTemplate>
<ItemTemplate>
<div class="milk">
<div class="milkImg"><a href="#" target="_blank"><img src="img/<%#Eval("MilkPic") %>" alt="MilkPic" /></a></div>
<div class="milkTitle"><a href="#" target="_blank"><%#Eval("MilkTitle")%></a></div>
<div class="milkPrice">价格：<%#Eval("MilkPrice")%></div>
</div>
</ItemTemplate>
<FooterTemplate></div></FooterTemplate>
</asp:Repeater>
public partial class UserControl_MyMilkSearch : System.Web.UI.UserControl
{
public double MinPrice { get; set; } //查询最低价格
public double MaxPrice { get; set; } //查询最高价格
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
BindData();
}
#region 绑定产品信息
private void BindData()
{
string sql = string.Format("select * from MyMilk where MilkPrice between {0} and {1}",MinPrice,MaxPrice);
this.rptMilkList.DataSource = (new DBHelper()).ExecQuery(sql);
this.rptMilkList.DataBind();
}
#endregion
}
在页面中使用用户控件：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo01_01.aspx.cs" Inherits="Demo01_01" %>
<%@ Register src="UserControl/MyMilkSearch.ascx" tagname="MyMilkSearch" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>给用户控件传递参数</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:MyMilkSearch ID="MyMilkSearch1" runat="server" MinPrice="200" MaxPrice="300" />
</div>
</form>
</body>
</html>
