ASP.NET控件开发基础之为子控件添加样式("ASP.NET控件开发入门：如何为子控件添加样式")

原创

ithorizon 6个月前 (10-19) 阅读数 32 #后端开发

ASP.NET控件开发入门：怎样为子控件添加样式

在ASP.NET控件开发中，为子控件添加样式是一个常见的需求。通过为子控件添加样式，可以允许控件更加美观、易于维护，同时也能节约用户体验。本文将介绍在ASP.NET控件中为子控件添加样式的方法。

一、使用CSS类为子控件添加样式

在ASP.NET控件中，为子控件添加样式最简洁的方案是使用CSS类。首先，我们需要定义CSS样式，并将其应用到子控件上。以下是一个示例：

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

ASP.NET控件开发入门：怎样为子控件添加样式

在上面的代码中，我们定义了一个名为myStyle的CSS样式，并将其应用到了MyCustomControl的子控件Label上。现在，让我们看看怎样实现这个自定义控件。


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ASPNETControlDemo
{
    public class MyCustomControl : WebControl
    {
        private PlaceHolder itemsPlaceholder;
        protected override void CreateChildControls()
        {
            itemsPlaceholder = new PlaceHolder();
            Controls.Add(itemsPlaceholder);
        }
        protected override void RenderContents(HtmlTextWriter writer)
        {
            foreach (Control item in itemsPlaceholder.Controls)
            {
                writer.AddAttribute(HtmlTextWriterAttribute.Class, "myStyle");
                item.RenderControl(writer);
            }
        }
        public ControlCollection Items
        {
            get { return itemsPlaceholder.Controls; }
        }
    }
}

在上面的代码中，我们创建了一个名为MyCustomControl的自定义控件，它继承自WebControl。在CreateChildControls方法中，我们创建了一个PlaceHolder控件用于存放子控件。在RenderContents方法中，我们遍历子控件并为其添加CSS类。

二、使用内联样式为子控件添加样式

除了使用CSS类，我们还可以通过内联样式为子控件添加样式。以下是一个示例：


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ASPNETControlDemo
{
    public class MyCustomControl : WebControl
    {
        private PlaceHolder itemsPlaceholder;
        protected override void CreateChildControls()
        {
            itemsPlaceholder = new PlaceHolder();
            Controls.Add(itemsPlaceholder);
            // 创建子控件
            Label label1 = new Label { Text = "Label 1" };
            Label label2 = new Label { Text = "Label 2" };
            Label label3 = new Label { Text = "Label 3" };
            // 添加内联样式
            label1.Style.Add("color", "blue");
            label1.Style.Add("font-size", "14px");
            label1.Style.Add("font-weight", "bold");
            label2.Style.Add("color", "green");
            label2.Style.Add("font-size", "14px");
            label2.Style.Add("font-weight", "bold");
            label3.Style.Add("color", "red");
            label3.Style.Add("font-size", "14px");
            label3.Style.Add("font-weight", "bold");
            // 添加子控件到PlaceHolder
            itemsPlaceholder.Controls.Add(label1);
            itemsPlaceholder.Controls.Add(label2);
            itemsPlaceholder.Controls.Add(label3);
        }
        protected override void RenderContents(HtmlTextWriter writer)
        {
            foreach (Control item in itemsPlaceholder.Controls)
            {
                item.RenderControl(writer);
            }
        }
        public ControlCollection Items
        {
            get { return itemsPlaceholder.Controls; }
        }
    }
}

在上面的代码中，我们为每个子控件Label添加了内联样式。通过调用Style.Add方法，我们可以为控件添加多个样式属性。

三、使用属性为子控件添加样式

除了使用CSS类和内联样式，我们还可以通过自定义属性为子控件添加样式。以下是一个示例：


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ASPNETControlDemo
{
    public class MyCustomControl : WebControl
    {
        private PlaceHolder itemsPlaceholder;
        protected override void CreateChildControls()
        {
            itemsPlaceholder = new PlaceHolder();
            Controls.Add(itemsPlaceholder);
            // 创建子控件
            Label label1 = new Label { Text = "Label 1" };
            Label label2 = new Label { Text = "Label 2" };
            Label label3 = new Label { Text = "Label 3" };
            // 设置自定义属性
            label1.Attributes.Add("style", "color:blue; font-size:14px; font-weight:bold;");
            label2.Attributes.Add("style", "color:green; font-size:14px; font-weight:bold;");
            label3.Attributes.Add("style", "color:red; font-size:14px; font-weight:bold;");
            // 添加子控件到PlaceHolder
            itemsPlaceholder.Controls.Add(label1);
            itemsPlaceholder.Controls.Add(label2);
            itemsPlaceholder.Controls.Add(label3);
        }
        protected override void RenderContents(HtmlTextWriter writer)
        {
            foreach (Control item in itemsPlaceholder.Controls)
            {
                item.RenderControl(writer);
            }
        }
        public ControlCollection Items
        {
            get { return itemsPlaceholder.Controls; }
        }
    }
}