033. asp.netWeb用户控件之二将页面转换成web控件和使用Web控件显示热点新闻

访问Web用户控件的属性

ASP.NET提供的各种服务器控件都有其自身的属性和方法，程序开发人员可以灵活地使用服务器控件中的属性和方法开发程序。在用户控件中，程序开发人员也可以自行定义各种属性和方法，从而灵活地应用用户控件。

this.Label1.Text = this.WebUserControl1.str_userName.ToString();

访问Web用户控件中的服务器控件

程序开发人员可以在用户控件中添加各种控件，如Label控件、TextBox控件等，但当用户控件创建完成后，将其添加到网页时，在网页的后台代码中不能直接访问用户控件中的服务控件的属性。为了实现对用户控件中的服务器控件的访问，必须在用户控件中定义公有属性，并且利用get访问器与set访问器来读取、设置控件的属性。

将Web网页转换为用户控件:

用户控件与Web网页的设计几乎完全相同，因此，如果某个Web网页完成的功能可以在其他Web页中重复使用，可以直接将Web网页转化成用户控件，而无须再重新设计。

将Web网页转化成用户控件，需要进行以下操作：

（1）在.aspx（Web网页的扩展名）文件的HTML视图中，删除<html>、<head>、<body>以及<form>等标记。

（2）将@Page指令修改为@Control，并将Codebehind属性修改成以.ascx.cs为扩展名的文件。例如，原Web网页中的代码如下：

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

需要修改为：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Default.ascx.cs" Inherits=" WebUserControl " %>

（3）在后台代码中，将public class声明的页类删除，改为用户控件的名称，并且将System.Web. UI.Page改为System.Web.UI.UserControl。例如：

public partial class _Default : System.Web.UI.Page

需要修改为：

public partial class WebUserControl : System.Web.UI.UserControl

（4）最后，在解决方案资源管理器中，将文件的扩展名从.aspx修改为.ascx，其代码后置文件会随之改变，从.aspx.cs改变为.ascx.cs。

使用Web控件显示热点新闻:

web控件代码:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ShowHotspotNews.ascx.cs" Inherits="ShowHotspotNews" %>
<style type="text/css">
    .style1
    {
        width: 22%;
        height: 115px;
    }
    .style2
    {
        height: 38px;
    }
    .style3
    {

        width: 21px;
    }
    .style4
    {
        height: 2px;
    }
</style>
<script type="text/javascript">
function show(o)

{
    window.open("ShowInfo.aspx?id="+o);
}
</script>
<table cellpadding="0" cellspacing="0" class="style1"
    style="border: 1px solid #999999">
    <tr>
        <td class="style2" colspan="2"
            style="border-bottom: 1px solid #999999; text-align: center; border-left-color: #999999; border-left-width: 1px; border-right-color: #999999; border-right-width: 1px; border-top-color: #999999; border-top-width: 1px;">
           畅销产品</td>
    </tr>
    <tr>
        <td align="left" class="style3" rowspan="2" style="text-align: left"
            valign="top">
&nbsp;&nbsp;&nbsp;&nbsp;
        </td>
        <td align="left" class="style4" style="text-align: left" valign="top">
        </td>
    </tr>
    <tr>
        <td align="left" style="text-align: left" valign="top">
            <asp:Literal ID="Literal1" runat="server"></asp:Literal>
        </td>
    </tr>
</table>

Default.aspx页面代码:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register src="ShowHotspotNews.ascx" tagname="ShowHotspotNews" 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>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    <uc1:ShowHotspotNews ID="ShowHotspotNews1" runat="server" />
    </form>
</body>
</html>

ShowInfo.aspx代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowInfo.aspx.cs" Inherits="ShowInfo" %>

<!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>
    <style type="text/css">
        .style1
        {
            width: 32%;
            height: 154px;
        }
        .style2
        {
            width: 90px;
           text-align: right;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table align="center" cellpadding="0" cellspacing="0" class="style1">
            <tr>
                <td class="style2">
                    编号：</td>
                <td>
                    <asp:Label ID="lblid" runat="server" Text="Label"></asp:Label>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    标题：</td>
                <td>
                    <asp:Label ID="lbltitle" runat="server" Text="Label"></asp:Label>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    内容：</td>
                <td>
                    <asp:Label ID="lblcontent" runat="server" Text="Label"></asp:Label>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    日期：</td>
                <td>
                    <asp:Label ID="lbldate" runat="server" Text="Label"></asp:Label>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

ShowInfo.apsx.cs代码:

public partial class ShowInfo : System.Web.UI.Page
{
    SqlConnection conn = new SqlConnection("server=.;uid=sa;pwd=123.456;database=TYW;");
    protected void Page_Load(object sender, EventArgs e)
    {
        int id = int.Parse(Request.QueryString["id"].ToString());
        SqlDataAdapter sda = new SqlDataAdapter("select  * from category where cateID=" + id + "", conn);
        DataSet ds = new DataSet();
        sda.Fill(ds);
        lblid.Text = ds.Tables[0].Rows[0]["cateID"].ToString();
        lbltitle.Text = ds.Tables[0].Rows[0]["cateName"].ToString();
        lblcontent.Text = ds.Tables[0].Rows[0]["orderBy"].ToString();
        lbldate.Text = ds.Tables[0].Rows[0]["flag"].ToString();
    }
}

StyleSheet.css代码:

body {
}
a{
    color:#0072A8;
    font-family:新宋体;
    font-size:12px;
    text-decoration:none;
}
a:visited
{
    color:Gray;
    font-family:新宋体;
    font-size:12px;
    text-decoration:none;
}
a:link
{
    color:#0072A8;
    font-family:新宋体;
    font-size:12px;
    text-decoration:none;
}
a:active
{
    color:#0072A8;
    font-family:新宋体;
    font-size:12px;
    text-decoration:none;
}
a:hover
{
    color:Red;
    font-family:新宋体;
    font-size:12px;
    text-decoration:underline;
}

最终效果:

posted on 2016-12-16 15:57 印子阅读(249) 评论(0) 编辑收藏举报

刷新页面返回顶部

无止境

033. asp.netWeb用户控件之二将页面转换成web控件和使用Web控件显示热点新闻

导航