代码复用之二——自制Web控件

最新推荐文章于 2021-06-15 14:19:02 发布

最新推荐文章于 2021-06-15 14:19:02 发布 · 135 阅读

文章标签：

#ui #c# #数据库

本文介绍了一种自制Web控件的方法，将ASP界面及其后台代码作为自定义控件复用。通过实例展示了如何创建和使用自定义Web用户控件，包括界面设计、UI层代码编写及控件复用。

在上一篇博客中提到了提取代码的两种方法，在这篇文章中介绍的自制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用户自定义控件拖拽进来就行了。