`

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[rnd.Next(images.Length)];
        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[rnd.Next(images.Length)];
        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" OnClick="btnSubmit_Click" />
        <hr />
        <asp:Literal ID="ltlResults" runat="server" />
    </div>
    </form>
</body>
</html>


2011-4-29 11:20 danny
分享到:
评论

相关推荐

    ASP.NET 控件的使用

    7.1 创建用户控件 201 7.1.1 在Web配置文件中注册用户控件 203 7.1.2 暴露用户控件的属性 204 7.1.3 暴露用户控件的事件 206 7.1.4 创建AddressForm控件 209 7.2 Ajax和用户控件 214 7.3 动态加载用户控件 215 7.3.1...

    AspNetPager7.1.dll 分页控件

    1. **多语言支持**:从提供的`zh-CHT`和`en`文件可以看出,此控件支持简体中文和英文,这意味着开发者可以轻松创建多语言网站,满足全球用户的需求。 2. **自定义样式和模板**:AspNetPager 7.1允许开发者自定义...

    labview7.1全屏截图到图片控件

    在LabVIEW 7.1中,用户可以利用其内置的功能进行全屏截图,并将截图结果显示在图片控件中。这在进行实验数据可视化、系统调试或者教学演示时非常有用。 全屏截图功能是LabVIEW的一项实用工具,它允许用户捕捉计算机...

    7.1 对话框与子窗口控件基础

    在实际应用中,开发者需要熟练掌握如何创建、布局、响应用户事件以及管理对话框和子控件,以构建高效且用户体验良好的界面。在07ChildWnd这个压缩包文件中,可能包含了相关的代码示例和教程,可以帮助你更深入地学习...

    DayPilotPro控件 7.1.2739

    版本7.1.2739是该控件的一个特定发行版,可能包含了各种改进和修复,旨在提升用户体验和性能。在这个版本中,"去除DEMO信息"的描述意味着它不再显示试用版本通常会有的水印或限制提示,更适合用于生产环境。 ...

    WTL合集(7.1和7.5).rar

    **WTL合集(7.1和7.5).rar** 是一个包含Windows Template Library (WTL) 版本7.1和7.5的压缩包,专门为Visual C++ 6.0用户提供支持。WTL是Microsoft开发的一个C++库,它允许开发者构建轻量级、高效的Windows应用...

    114页的WTL指南和WTL7.1

    5. **用户界面元素**:包括菜单、对话框、工具栏和状态栏的创建和使用。 6. **资源处理**:如何定义和使用位图、图标、字符串等资源。 7. **命令路由**:WTL的消息处理机制,如何实现命令路由和事件处理。 8. **非...

    TMS Component Pack 7.1.3.0

    TMS Component Pack 7.1.3.0是一款针对Delphi和C++Builder开发环境的组件库,它为开发者提供了丰富的控件和工具,旨在提高开发效率,增强应用程序的功能和用户体验。该组件包适用于各种版本的IDE,包括从Delphi 2007...

    TeeChart_7.1 图标 delphi7 可用 亲测 制作股票控件

    它具有直观的API和用户友好的界面,使得创建复杂的图表变得简单易行。 在股票分析领域,K线图(也称为日本蜡烛图)是必不可少的工具。TeeChart支持绘制K线图,能够展示开盘价、收盘价、最高价和最低价等关键信息。...

    VC++6.0入门_windows标准控件

    #### 7.1 Windows标准控件概述 ##### 7.1.1 Windows标准控件 Windows操作系统提供了多种标准控件,这些控件是用户界面设计的基础组件,使得开发人员能够轻松构建功能丰富且直观的应用程序。以下是一些常见的...

    ATL&WTL学习资料(含WTL7.1EXE)

    3. **WTL窗口和控件**:熟悉WTL提供的窗口和控件类,了解如何创建和操作它们。 4. **事件处理**:学习如何使用WTL的消息映射机制编写事件处理函数。 5. **实践项目**:通过实际编写小项目,如简单的对话框程序或带有...

    ie_tab_13.1.7.1_0.7z

    它的工作原理是在Chrome内核下嵌入一个ActiveX控件,该控件模拟了Internet Explorer的渲染引擎,使得用户无需切换浏览器即可访问那些需要IE才能正常运行的网页。 其次,"13.1.7.1"这个版本号表明这是该扩展的一个...

    VBS函数集合

    87. **MsgBox函数**:显示消息框,允许用户交互。 88. **Not运算符**:逻辑运算符,对表达式求反。 89. **Now函数**:返回当前日期和时间。 90. **Oct函数**:将数值转换为八进制字符串。 91. **On Error语句**...

    cheat-engine-7.1.zip

    6. **用户界面(UI)**:CE具有图形用户界面,源码中会有与Windows消息循环、控件交互相关的代码,涉及MFC或WinAPI库。 7. **反反调试**:为了防止被游戏检测到,CE可能会包含一些反反调试技术,例如检查调试器的...

    LODOP打印控件

    这款控件的强大之处在于它不仅支持单页打印,还能处理多页连续打印任务,使得网页上的内容可以按照用户的需求以定制化的样式输出到打印机上。 首先,"Lodop打印控件"的核心功能在于提供了一个友好的编程接口,让...

    庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part2

    9.1.1 用户控件的作用.. 388 9.1.2 了解system.web.ui.usercontrol基类 388 9.2 用户控件应用示例 389 9.2.1 简单用户控件 389 9.2.2 复杂数据绑定用户控件 394 9.3 用户控件缓存 419 9.3.1 asp.net缓存介绍 ...

    Android-AndroidonPreNougat7.1的App快捷键

    在Android系统中,快捷方式(App Shortcuts)是一种让用户快速访问应用特定功能的功能,它首次在Android Nougat 7.1版本中引入。在Nougat 7.1之前的版本,用户通常需要打开应用程序才能访问其功能,而App快捷方式...

Global site tag (gtag.js) - Google Analytics