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

2022-06-25 07:36:04

访问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[].Rows[]["cateID"].ToString();

        lbltitle.Text = ds.Tables[].Rows[]["cateName"].ToString();

        lblcontent.Text = ds.Tables[].Rows[]["orderBy"].ToString();

        lbldate.Text = ds.Tables[].Rows[]["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;

}

最终效果:

码农公寓

相关文章