wavaya 发表于 2013-2-1 11:31:51

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]
查看完整版本: 7.1创建用户控件