用戶控件：自定義的可重用的控件(后綴為ascx)，包含html代碼，asp.net代碼,style等写隶。（注：用戶控件中沒有
html,head,body標簽）
用戶控件本質(zhì)上是頁面上一塊可重用的代碼糙箍，可以一次制作，多處使用，通常由系統(tǒng)控件組合而成碴卧。
用戶控件不僅包含界面弱卡，還可以包含對應(yīng)的后端代碼。
站點中如果存在多處相同的用戶界面住册，應(yīng)將這些相同內(nèi)容提取并封裝成用戶控件婶博。
用戶控件和頁面的異同點：
| 比較 | 用戶控件 | 頁面 |
|---|---|---|
| 后綴名 | .ascx | .aspx |
| 指令 | @Control | @Page |
| 繼承 | System.Web.UI.UserControl | System.Web.UI.Page |
| 包含 | 可以包含控件和其他用戶控件，也可以被其他用戶控件和頁面所包含 | 可以包含控件和所有用戶控件荧飞，但不可以被其他頁面所包含 |
| 直接訪問 | 不可以直接訪問凡人，必須包含在頁面中才能生效 | 可以直接訪問 |
| 標簽 | 不能包含<HTML>和<BODY>等HTML標簽 | 可以包含所有的HTML標簽 |
| 編譯和運行 | 可以獨立運行 |
用戶控件的使用步驟：
【1】創(chuàng)建用戶控件，并編寫代碼叹阔。
【2】在Page中引入用戶控件
【2.1】使用Register指令注冊用戶控件
<%@ Register Src="用戶控件路徑" TagName="用戶控件標簽名" TagPrefix="前綴名" %>
【2.2】引用用戶控件
<前綴名:用戶控件標簽名 ID="uclogin" runat="server" />
一挠轴、資料準備
數(shù)據(jù)庫代碼：
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('諾優(yōu)能嬰兒配方','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 綁定產(chǎn)品信息
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>
三条获、給用戶控件傳遞參數(shù)
用戶控件顯示價格范圍內(nèi)的商品列表（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 綁定產(chǎn)品信息
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>給用戶控件傳遞參數(shù)</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:MyMilkSearch ID="MyMilkSearch1" runat="server" MinPrice="200" MaxPrice="300" />
</div>
</form>
</body>
</html>
