Asp.net控件开发学习笔记(二)-控件开发基础

简介:
接上篇……..


 

通过查看System.Web.UI.HtmlControls命名空间,我们可以发现,很多HTML对应的标签都可以通过添加runat=”server”属性转化为服务器控件,比如<table>会转化为HtmlTable对象,但像<input >标签可以通过type属性对应不同的服务器对象。当html内的标签没有和上图中的服务器控件匹配时,所有不匹配的html标签都会通过添加runat=”server”转化为HtmlGenericControl服务器控件。下面是对应的服务器控件类与HTML标签之间的对应关系:

 

HTML Tag

HTML Server Control

<form>

HtmlForm

<input type="text">

HtmlInputText

<input type="password">

HtmlInputText

<input type="radio">

HtmlInputRadioButton

<input type="checkbox">

HtmlInputCheckBox

<input type="submit">

HtmlInputButton

<input type="hidden">

HtmlInputHidden

<input type="button">

HtmlInputButton

<input type="image">

HtmlInputImage

<input type="file">

HtmlInputFile

<button>

HtmlButton

<select>

HtmlSelect

<textarea>

HtmlTextArea

<img>

HtmlImage

<a>

HtmlAnchor

<table>

HtmlTable

<tr>

HtmlTableRow

<td>

HtmlTableCell

其他标签

HtmlGenericControl

 

 

 

Demo:动态构建html表格

 

通过在前台设置表格的行(x)和列(y),动态的利用System.Web.UI.HtmlControls命名空间下的控件动态的进行设置表格的大小:

前台代码如下:

 <h3>HTML Controls</h3>

X

<input type="text" id="XTextBox" runat="server" /><br />

<br />

Y

<input type="text" id="YTextBox" runat="server" /><br />

<br />

<input type="submit" id="BuildTableButton" runat="server"

value="Build Table" onserverclick="BuildTableButton_ServerClick" /><br />

<br />

<span id="Span1" runat="server"></span>

</div>

后台代码如下:

protected void BuildTableButton_ServerClick(object sender, EventArgs e)

    {

        int xDim = Convert.ToInt32(XTextBox.Value);

        int yDim = Convert.ToInt32(YTextBox.Value);

        BuildTable(xDim, yDim);

    }

    private void BuildTable(int xDim, int yDim)

    {

        HtmlTable table;

        HtmlTableRow row;

        HtmlTableCell cell;

        HtmlGenericControl content;

        table = new HtmlTable();

        table.Border = 1;

        for (int y = 0; y < yDim; y++)

        {

            row = new HtmlTableRow();

            for (int x = 0; x < xDim; x++)

            {

                cell = new HtmlTableCell();

                cell.Style.Add("font", "18pt");

                cell.Style.Add("background-color", "blue");

                cell.Style.Add("color", "red");

                content = new HtmlGenericControl("SPAN");

                content.InnerHtml = "X:" + x.ToString() +

                "Y:" + y.ToString();

                cell.Controls.Add(content);

                row.Cells.Add(cell);

            }

            table.Rows.Add(row);

        }

        Span1.Controls.Add(table);

    }

这段代码通过构建HtmlTable对象,然后在其内部通过循环的方式加入tr和td.最后将结果放入<span>标签中显示。结果如下图:

    

 

注意下面几行代码:

                     cell = new HtmlTableCell();

                cell.Style.Add("font", "18pt");

                cell.Style.Add("background-color", "blue");

                cell.Style.Add("color", "red");

可以通过html的style属性的add方法添加CSS的键-值对应(有点HashTable的感觉),在render(输出)到客户端的过程中会自动应用其CSS样式(注意,因为全部是string作为键和值的参数,所以要小心你的拼写J)

 

 

System.Web.UI.WebControls命名空间

在这个命名空间下封装了标准的Web控件.命名空间图示如下:


      如图所示,在System.Web.UI.WebControls命名空间下的控件被分成4种类型

1. 简单控件
2. 列表控件(List)
3. 富应用控件(Rich)
4. 验证控件
 

1. 简单控件
简单控件有点像封装在System.Web.UI.HtmlControls命名空间里的控件,每一个控件对应一个HTML标签,TextBox除外.控件和Html标签的对应关系如下:
HTML Tag

Simple Web Control

<input type="text">

TextBox with TextMode=Single

<input type="password">

TextBox with TextMode=Password

<textarea>

TextBox with TextMode=MultiLine

<input type="checkbox">

CheckBox

<input type="radio">

RadioButton

<input type="submit">

Button

<input type="image">

ImageButton

<button>

Button

<select>

DropDownList

<select size=3>

SelectList with Rows=3

<textarea>

HtmlTextArea

<img>

Image

<a>

HyperLink, LinkButton

<table>

Table

<tr>

TableRow

<td>

TableCell

<table>

Panel

<span>

Label

 

2列表控件

  列表控件在简单控件的基础上,增加了数据源。从CheckBoxList控件到RadioButtonList控件,在到强大的GridView控件,提供了重复生成不同HTML代码的能力.

 

3富应用控件

富应用控件是那些将需要大量HTML拼接起来的东西转化为简单的一个控件,最有代表性的就是Calender控件,可以通过简单的应用就可以创造出非常复杂的效果.
 

4验证控件

验证控件通过提供客户端以javascript为基础的验证方式来减少与服务器的交互,从而达到减少网络流量..

 

 

 

System.Web.UI.WebControls?System.Web.UI.HtmlControls?

    这两个命名空间内有很多控件貌似是重叠的.尤其是HTML控件和asp.net的简单控件都是以控件名称和html标签进行匹配.但Asp.net控件更加丰富,所以在不是非必要的情况下,最好使用WebControl命名空间内的控件并作为基类。


本文转自CareySon博客园博客,原文链接:http://www.cnblogs.com/CareySon/archive/2009/09/30/1577068.html,如需转载请自行联系原作者

相关文章
|
3月前
|
开发框架 JavaScript 前端开发
震撼!破解 ASP.NET 服务器控件 Button 执行顺序之谜,颠覆你的开发认知!
【8月更文挑战第16天】在ASP.NET开发中,通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如,在用户点击按钮前需前端验证或提示,确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证;若验证通过,则继续触发后台事件。此外,结合jQuery也能达到相同效果,利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
46 8
|
1月前
|
开发者 Windows
.NET 开源扁平化、美观的 C/S 控件库
【10月更文挑战第23天】介绍了三款适用于 .NET 平台的开源扁平化、美观的 C/S 控件库:MaterialSkin 采用 Google Material Design 风格,适合现代感界面;Krypton Toolkit 提供丰富控件,界面易于定制;Fluent Ribbon Control Suite 模仿 Office 界面,适合复杂功能应用。每款控件库均附有示例代码及 GitHub 链接。
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
本文讨论了在基于.NET 6和.NET Framework的WinForms项目中添加图表控件的不同方法。由于.NET 6的WinForms项目默认不包含Chart控件,可以通过NuGet包管理器安装如ScottPlot等图表插件。而对于基于.NET Framework的WinForms项目,Chart控件是默认存在的,也可以通过NuGet安装额外的图表插件,例如LiveCharts。文中提供了通过NuGet添加图表控件的步骤和截图说明。
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
|
1月前
|
C# Android开发 iOS开发
一组.NET MAUI绘制的开源控件 - AlohaKit
一组.NET MAUI绘制的开源控件 - AlohaKit
|
2月前
|
开发框架 JavaScript 前端开发
|
4月前
|
开发框架 搜索推荐 前端开发
【.NET全栈】ASP.NET开发Web应用——Web部件技术
【.NET全栈】ASP.NET开发Web应用——Web部件技术
|
5月前
|
开发框架 前端开发 .NET
LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码
集成于VS 2019,EXT.NET前端和ASP.NET后端,搭配MSSQL 2018数据库。系统覆盖样品管理、数据分析、报表和项目管理等实验室全流程。应用广泛,包括生产质检(如石化、制药)、环保监测、试验研究等领域。随着技术发展,现代LIMS还融合了临床、电子实验室笔记本和SaaS等功能,以满足复杂多样的实验室管理需求。
83 3
LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码
|
6月前
|
SQL 开发框架 前端开发
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
83 0
|
2月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
41 7
|
2月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
59 0

相关实验场景

更多