在上一篇博客中提到了提取代码的两种方法,在这篇文章中介绍的自制Web控件是将asp的界面及其后台的代码作为一个自定义控件直接复用,下面的的例子实现在界面中绑定数据库中新闻类的一个自制web控件。
添加用户自定义控件:
右击Web文件->添加->新建项->Web用户控件,如下图:
前台界面中会自动生成下面的一段代码(表示所用的语言是C#,绑定的后台编辑页是NewsCategory.ascx.cs,该窗体继承于Web.control):
<%@ ControlLanguage="C#" AutoEventWireup="true"CodeBehind="NewsCategory.ascx.cs"Inherits="Web.control.NewsCategory" %>
设计界面:
然后设计你的web界面,设计思路跟平时的设计asp界面一模一样:
<!--新闻分类-->
<div id="category" class="commonfrm" >
<h4>
新闻分类</h4>
<ul>
<li><a href="../Default.aspx">首 页</a></li>
<!---通过循环绑定数据库中新闻类别-->
<asp:Repeater ID="repCategory" runat="server">
<ItemTemplate>
<li><a href='List.aspx?caid=<%#Eval("id") %>'><%#Eval("name")%></a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
代码设计好后就可以看到设计的界面效果:
以上是自定义控件的前台界面部分。
编写UI层代码:
按F7编写UI层中调用BLL层查询所有新闻类别的方法:
using System;
usingSystem.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
usingSystem.Web.UI.WebControls;
using BLL;
namespaceWeb.control
{
public partial class NewsCategory :System.Web.UI.UserControl
{
protected void Page_Load(object sender,EventArgs e)
{
if (!Page.IsPostBack)
{
//第一次进入页面时
repCategory.DataSource = newCategoryManager().SelectAll();
repCategory.DataBind();
}
}
}
}
以上就是自定义Web用户控件的整个过程,因为采用的是分层的技术,所以UI层可以和BLL层分离,所以该控件可以进行复用。
自定义控件的使用:
添加一个新的web窗口,然后把刚才的NewsCategory.ascx用户自定义控件拖拽进来就行了。
相关链接: