7.1创建用户控件
创建用户控件简单例子:
RandomImage.ascx
<%@ Control Language="C#" ClassName="RandomImage" %><%@ Import Namespace="System.IO" %><script runat="server"> protected void Page_Load(object sender, EventArgs e) { string imageToDisplay = GetRandomImage(); imgRandom.ImageUrl = Path.Combine("~/Images", imageToDisplay); lblRandom.Text = imageToDisplay; } private string GetRandomImage() { Random rnd = new Random(); string[] images = Directory.GetFiles(MapPath("~/Images"), "*.jpg"); string imageToDisplay = images; return Path.GetFileName(imageToDisplay); }</script><asp:Image ID="imgRandom" Width="300px" runat="server" /><br /><asp:Label ID="lblRandom" runat="server" />
引用:
ShowRandomImage.aspx
<%@ Page Language="C#" %><%@ Register TagPrefix="user" TagName="RandomImage" Src="~/RandomImage.ascx" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Show RandomImage</title></head><body> <form id="form1" runat="server"> <div> <user:RandomImage ID="RandomImage1" runat="server" /> </div> </form></body></html>
理解:
其实Ascx文件有点像是xml文件,一定要先注册:
<%@ Register TagPrefix="user" TagName="RandomImage" Src="~/RandomImage.ascx" %>
注册有前缀,等。更多的有点像是tld文件。
参照Java。
用户控件和Asp.net页面之间最大的不同是:
用户控件可以在Asp.net页面中声明。在创建用户控件时,也相当于创建了一个定制控件。
在页面中使用用户控件之前,必须先进行注册。
1、在Web配置文件中注册用户控件
<configuration>
<system.web>
<pages>
<controls>
<add tagPrefix="user" tagName="RandomImage" Src="~/RandomImage.ascx" />
</controls>
</pages>
</system.web>
</configuration>
在Web配置文件中注册用户控件时有一个重要的限制:
用户控件不能和使用用户控件的页面位于同一个文件夹中。所以应该将所有的用户控件都保存在同一个文件夹中如UserControls。
2、暴露用户控件的属性
<%@ Control Language="C#" ClassName="PropertyRandomImage" %><%@ Import Namespace="System.IO" %><script runat="server"> private string _imageFolderPath = "~/Images"; public string ImageFolderPath { get { return _imageFolderPath; } set { _imageFolderPath = value; } } protected void Page_Load(object sender, EventArgs e) { string imageToDisplay = GetRandomImage(); imgRandom.ImageUrl = Path.Combine(_imageFolderPath, imageToDisplay); lblRandom.Text = imageToDisplay; } private string GetRandomImage() { Random rnd = new Random(); string[] images = Directory.GetFiles(MapPath(_imageFolderPath), "*.jpg"); string imageToDisplay = images; return Path.GetFileName(imageToDisplay); }</script><asp:Image ID="imgRandom" Width="300px" runat="server" /><br /><asp:Label ID="lblRandom" runat="server" />
ShowDeclarative.aspx
<%@ Page Language="C#" %><%@ Register TagPrefix="user" TagName="PropertyRandomImage" Src="~/PropertyRandomImage.ascx" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Show RandomImage</title></head><body> <form id="form1" runat="server"> <div> <user:PropertyRandomImage ID="RandomImage1" ImageFolderPath="~/Images2" runat="server" /> </div> </form></body></html>
3、暴露用户控件的事件
TabStrip.ascx
<%@ Control Language="C#" ClassName="TabStrip" %><%@ Import Namespace="System.Collections.Generic" %><script runat="server"> public event EventHandler TabClick; public int SelectedIndex { get { return dlstTabStrip.SelectedIndex; } } protected void dlstTabStrip_SelectedIndexChanged(object sender, EventArgs e) { if (TabClick != null) { TabClick(this, EventArgs.Empty); } } protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { List<string> tabs = new List<string>(); tabs.Add("Products"); tabs.Add("Services"); tabs.Add("About"); dlstTabStrip.DataSource = tabs; dlstTabStrip.DataBind(); dlstTabStrip.SelectedIndex = 0; } }</script><asp:DataList ID="dlstTabStrip" runat="server" RepeatDirection="Horizontal" CssClass="tabs" ItemStyle-CssClass="tab" SelectedItemStyle-CssClass="selectedTab" OnSelectedIndexChanged="dlstTabStrip_SelectedIndexChanged"> <ItemTemplate> <asp:LinkButton ID="lnkTab" Text='<%# Container.DataItem %>' CommandName="Select" runat="server" /> </ItemTemplate></asp:DataList>
ShowTabStrip.aspx
<%@ Page Language="C#" %><%@ Register TagPrefix="user" TagName="TabStrip" Src="~/TabStrip.ascx" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void TabStrip1_TabClick(object sender, EventArgs e) { MultiView1.ActiveViewIndex = TabStrip1.SelectedIndex; }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <style type="text/css"> html { background-color: Silver; font: 14px Georgia,Serif; } .tabs a { color: Blue; text-decoration: none; font: 14px Arial,Sans-Serif; } .tab { background-color: #eeeeee; padding: 5px; border: Solid 1px black; border-bottom: none; } .selectedTab { background-color: White; padding: 5px; border: Solid 1px black; border-bottom: none; } .views { background-color: White; width: 400px; border: Solid 1px black; padding: 10px; } </style> <title></title></head><body> <form id="form1" runat="server"> <div> <user:TabStrip ID="TabStrip1" runat="server" OnTabClick="TabStrip1_TabClick" /> <div class="views"> <br /> <asp:MultiView ID="MultiView1" ActiveViewIndex="0" runat="server"> <asp:View ID="Products" runat="server"> <h1> Products</h1> We sell a variety of useful products... </asp:View> <asp:View ID="Services" runat="server"> <h1> Services</h1> We offer a number of services... </asp:View> <asp:View ID="About" runat="server"> <h1> About</h1> We were the first company to offer products and services... </asp:View> </asp:MultiView> </div> </div> </form></body></html>
2011-4-29 10:42 danny
4、创建AddressForm控件
AddressForm.ascx
<%@ Control Language="C#" ClassName="AddressForm" %><script runat="server"> public string Title { get { return ltlTitle.Text; } set { ltlTitle.Text = value; } } public string Street { get { return txtStreet.Text; } set { txtStreet.Text = value; } } public string City { get { return txtCity.Text; } set { txtCity.Text = value; } } public string State { get { return txtState.Text; } set { txtState.Text = value; } } public string PostalCode { get { return txtPostCode.Text; } set { txtPostCode.Text = value; } }</script><fieldset> <legend> <asp:Literal ID="ltlTitle" Text="Address Form" runat="server" /> </legend> <div class="addressLabel"> <asp:Label ID="lblStreet" Text="Street" AssociatedControlID="txtStreet" runat="server" /> </div> <div class="addressField"> <asp:TextBox ID="txtStreet" runat="server" /> <asp:RequiredFieldValidator ID="reqStreet" Text="(required)" ControlToValidate="txtStreet" runat="server" /> </div> <br class="clear" /> <div class="addressLabel"> <asp:Label ID="lblCity" Text="City:" AssociatedControlID="txtCity" runat="server" /> </div> <div class="addressField"> <asp:TextBox ID="txtCity" runat="server" /> <asp:RequiredFieldValidator ID="reqCity" Text="(required)" ControlToValidate="txtCity" runat="server" /> </div> <br class="clear" /> <div class="addressLabel"> <asp:Label ID="lblState" Text="State" AssociatedControlID="txtState" runat="server" /> </div> <div class="addressField"> <asp:TextBox ID="txtState" runat="server" /> <asp:RequiredFieldValidator ID="reqState" Text="(required)" ControlToValidate="txtState" runat="server" /> </div> <br class="clear" /> <div class="addressLabel"> <asp:Label ID="lblPostCode" Text="PostalCode:" AssociatedControlID="txtPostCode" runat="server" /> </div> <div class="addressField"> <asp:TextBox ID="txtPostCode" runat="server" /> <asp:RequiredFieldValidator ID="reqPostCode" Text="(required)" ControlToValidate="txtPostCode" runat="server" /> </div> <br class="clear" /></fieldset>
Checkout.aspx
<%@ Page Language="C#" %><%@ Register TagPrefix="user" TagName="AddressForm" Src="~/AddressForm.ascx" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void btnSubmit_Click(object sender, EventArgs e) { ltlResults.Text = "<br/> Billing Street:" + AddressForm1.Street; ltlResults.Text += "<br/> Billing City:" + AddressForm1.City; ltlResults.Text += "<br/> Billing State:" + AddressForm1.State; ltlResults.Text += "<br/> Billing Postal Code:" + AddressForm1.PostalCode; ltlResults.Text += "<br/><br/>"; ltlResults.Text += "<br/> Shopping Street:" + AddressForm2.Street; ltlResults.Text += "<br/> Shopping City:" + AddressForm2.City; ltlResults.Text += "<br/> Shopping State:" + AddressForm2.State; ltlResults.Text += "<br/> Shopping Postal Code:" + AddressForm2.PostalCode; }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <style type="text/css"> html { background-color: Silver; font: 14px Georgia,Serif; } .content { background-color: White; width: 600px; margin: auto; padding: 20px; } .addressLabel { float: left; width: 100px; padding: 5px; text-align: right; } .addressField { float: left; padding: 5px; } .clear { clear: both; } </style> <title>Check out</title></head><body> <form id="form1" runat="server"> <div class="content"> <user:AddressForm ID="AddressForm1" Title="Billing Address" runat="server" /> <br /> <user:AddressForm ID="AddressForm2" Title="Shopping Address" runat="server" /> <br /> <asp:Button ID="btnSubmit" Text="Submit Form" runat="server"/> <hr /> <asp:Literal ID="ltlResults" runat="server" /> </div> </form></body></html>
2011-4-29 11:20 danny
页:
[1]