7.1创建用户控件

最新推荐文章于 2022-02-25 20:00:37 发布

娃娃鸭

最新推荐文章于 2022-02-25 20:00:37 发布

阅读量122

点赞数

分类专栏： ASP.NET 3.5 揭秘(卷1)学习笔记文章标签： ASP.net ASP C C++ C#

本文链接：https://blog.csdn.net/wavaya/article/details/83918969

版权

ASP.NET 3.5 揭秘(卷1)学习笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

创建用户控件

简单例子：
RandomImage.ascx
[code]
<%@ 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" />
[/code]

引用：
ShowRandomImage.aspx
[code]
<%@ 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>

[/code]

理解：
其实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、暴露用户控件的属性
[code]
<%@ 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" />
[/code]

ShowDeclarative.aspx
[code]
<%@ 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>
[/code]

3、暴露用户控件的事件
TabStrip.ascx
[code]
<%@ 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>
[/code]

ShowTabStrip.aspx
[code]
<%@ 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>
[/code]
2011-4-29 10:42 danny

4、创建AddressForm控件
AddressForm.ascx
[code]
<%@ 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>
[/code]

Checkout.aspx
[code]
<%@ 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>
[/code]

2011-4-29 11:20 danny

娃娃鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7.1创建用户控件

创建用户控件简单例子：RandomImage.ascx[code] protected void Page_Load(object sender, EventArgs e) { string imageToDisplay = GetRandomImage(); imgRandom.ImageUrl = Path...
复制链接

扫一扫