当前位置：首页 > news >正文

asp.net webform组件和常见的html组件的使用

news 来源：原创 2025/5/22 9:07:49

重写CheckBox
SimpleCheckBox.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public class SimpleCheckBox : CheckBox
    {
        protected override void Render(HtmlTextWriter writer)
        {
            // 添加基础属性
            writer.AddAttribute(HtmlTextWriterAttribute.Type, "checkbox");
            writer.AddAttribute(HtmlTextWriterAttribute.Id, this.ClientID);
            writer.AddAttribute(HtmlTextWriterAttribute.Name, this.UniqueID);

            // 处理选中状态
            if (this.Checked)
            {
                writer.AddAttribute(HtmlTextWriterAttribute.Checked, "checked");
            }

            // 添加标题（ToolTip 映射到 title）
            if (!string.IsNullOrEmpty(this.ToolTip))
            {
                writer.AddAttribute(HtmlTextWriterAttribute.Title, this.ToolTip);
            }

            // 添加 CSS 类
            if (!string.IsNullOrEmpty(this.CssClass))
            {
                writer.AddAttribute(HtmlTextWriterAttribute.Class, this.CssClass);
            }

            // 渲染 input 标签
            writer.RenderBeginTag(HtmlTextWriterTag.Input);
            writer.RenderEndTag();
        }
    }
}

重写RadioButton

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;

namespace WebApplication1
{
    public class SimpleRadioButton: System.Web.UI.HtmlControls.HtmlInputRadioButton
    {
        public string ToolTip
        {
            get { return Attributes["title"]; }
            set { Attributes["title"] = value; }
        }

        protected override void Render(HtmlTextWriter writer)
        {
            // 确保基础属性（name、value、checked）正确渲染
            writer.AddAttribute(HtmlTextWriterAttribute.Type, "radio");
            writer.AddAttribute(HtmlTextWriterAttribute.Name, this.Name);
            writer.AddAttribute(HtmlTextWriterAttribute.Value, this.Value);
            if (this.Checked)
            {
                writer.AddAttribute(HtmlTextWriterAttribute.Checked, "checked");
            }

            // 添加 ToolTip 到 title
            if (!string.IsNullOrEmpty(this.ToolTip))
            {
                writer.AddAttribute(HtmlTextWriterAttribute.Title, this.ToolTip);
            }

            // 渲染 input 标签
            writer.RenderBeginTag(HtmlTextWriterTag.Input);
            writer.RenderEndTag();
        }
    }
}

最终代码

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

<%@ Register TagPrefix="custom" Namespace="WebApplication1" Assembly="WebApplication1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <h1>checkbox</h1>
        <%--checkbox--%>
        <input type="checkbox" name="sex" value="0" title="男" checked="checked" />
        <input type="checkbox" name="sex" value="1" title="女" />
        <%--Text会渲染lable标签，ToolTip会渲染span标签--%>
        <asp:CheckBox runat="server" Text="男" Checked="true" />
        <asp:CheckBox runat="server" Text="女" ToolTip="女" />
        <%--为了提交表单之后还回显保存的数据，需要添加runat="server"--%>
        <input runat="server" type="checkbox" name="sex2" value="0" title="男" checked="checked" />
        <input runat="server" type="checkbox" name="sex2" value="1" title="女" />
        <%--自定义checkbox--%>
        <custom:SimpleCheckBox
            ID="sex_man"
            runat="server"
            Checked="true"
            ToolTip="男" />
        <custom:SimpleCheckBox
            ID="sex_woman"
            runat="server"
            ToolTip="女" />
        <h1>Radio</h1>
        <%--radio--%>
        <input type="radio" name="sex11" value="1" title="男" checked="checked" />
        <input type="radio" name="sex11" value="2" title="女" />
        <%--Text会渲染lable标签，ToolTip会渲染span标签--%>
        <asp:RadioButton runat="server" ID="sex_man_radio" Text="男" ToolTip="男" GroupName="sex12" Checked="true" />
        <asp:RadioButton runat="server" ID="sex_woman_radio" Text="女" ToolTip="女" GroupName="sex12" />
        <%--为了提交表单之后还回显保存的数据，需要添加runat="server"--%>
        <input runat="server" id="Radio1" type="radio" name="sex13" value="1" title="男" checked="true" />
        <input runat="server" id="Radio2" type="radio" name="sex13" value="2" title="女" />
        <%--自定义radio--%>
        <!---->
        <custom:SimpleRadioButton
            ID="SimpleRadioButton1"
            runat="server"
            Name="sex14"
            Value="1"
            ToolTip="男"
            Checked="true">
        </custom:SimpleRadioButton>
        <custom:SimpleRadioButton
            ID="SimpleRadioButton2"
            runat="server"
            Name="sex14"
            Value="2"
            ToolTip="女">
        </custom:SimpleRadioButton>
        <h1>Input</h1>
        <input type="text" value="" placeholder="请输入姓名" class="aaa" />
        <asp:TextBox runat="server" ID="inputBox1" CssClass="aaa" Text="" placeholder="请输入姓名" />
        <input type="text" runat="server" value="" placeholder="请输入姓名" class="aaa" />
        <h1>TextArea</h1>
        <textarea class="aaa" placeholder="请输入姓名"></textarea>
        <asp:TextBox TextMode="MultiLine" runat="server" ID="textarea1" CssClass="aaa" Text="" placeholder="请输入姓名" />
        <textarea runat="server" class="aaa" placeholder="请输入姓名"></textarea>
        <h1>Select</h1>
        <select name="select01">
            <option value="0">请选择</option>
            <option value="1">语文</option>
            <option value="2">英语</option>
            <option value="3">数学</option>
        </select>
        <asp:DropDownList runat="server" ID="select02">
            <asp:ListItem Value="0" Text="请选择"></asp:ListItem>
            <asp:ListItem Value="1" Text="语文"></asp:ListItem>
            <asp:ListItem Value="2" Text="英语"></asp:ListItem>
            <asp:ListItem Value="3" Text="数学"></asp:ListItem>
        </asp:DropDownList>

        <select name="select01" runat="server">
            <option value="0">请选择</option>
            <option value="1">语文</option>
            <option value="2">英语</option>
            <option value="3">数学</option>
        </select>
        <div>
            <asp:Button runat="server" Text="提交" ID="submit" OnClick="submit_Click" />
        </div>

    </form>
</body>
</html>