html服务器控件基本上是为了启用服务器端处理而增强的标准html控件。 html控件(如标题标签,定位标签和输入元素)不由服务器处理,而是发送给浏览器进行显示。
它们通过添加属性runat =“server”并添加一个id属性专门转换为服务器控件,以使它们可用于服务器端处理。
例如,考虑html输入控件:
<input type="text" size="40">
可以通过添加runat和id属性将其转换为服务器控件:
<input type="text" id="testtext" size="40" runat="server">
注意: 理解上面代码机制,有助使用
asp和html标签。
尽管asp.net服务器控件可以执行由html服务器控件完成的每项工作,但以下控件在以下情况下非常有用:
下表介绍了html服务器控件:
| 编号 | 控件名称 | html标签 | |
|---|---|---|---|
| 1 | htmlhead |
<head> |
|
| 2 | htmlinputbutton |
<input type=button/submit/reset> |
|
| 3 | htmlinputcheckbox |
<input type=checkbox> |
|
| 4 | htmlinputfile |
<input type = file> |
|
| 5 | htmlinputhidden |
<input type = hidden> |
|
| 6 | htmlinputimage |
<input type = image> |
|
| 7 | htmlinputpassword |
<input type = password> |
|
| 8 | htmlinputradiobutton |
<input type = radio> |
|
| 9 | htmlinputreset |
<input type = reset> |
|
| 10 | htmltext |
`<input type = text | password>` |
| 11 | htmlimage |
<img>元素 |
|
| 12 | htmllink |
<link>元素 |
|
| 13 | htmlanchor |
<a>元素 |
|
| 14 | htmlbutton |
<button>元素 |
|
| 15 | htmlform |
<form>元素 |
|
| 16 | htmltable |
<table>元素 |
|
| 17 | htmltablecell |
<td> 和 <th>元素 |
|
| 18 | htmltablerow |
<tr>元素 |
|
| 19 | htmltitle |
<title>元素 |
|
| 20 | htmlselect |
<select>元素 |
|
| 21 | htmlgenericcontrol |
所有没有列出的html控件 |
以下示例使用基本的html表格进行布局。 它使用了一些用于从用户获得输入的框,例如名称,地址,城市,省份等。它还具有按钮控制,点击该按钮以获取在表格的最后一行中显示的用户数据。
打开visual studio,创建一个空的网站项目:httpserver,参考以下图片 -
并向这个项目中添加一个web窗体,存储文件名称为:default.aspx 。页面在设计视图中看起来像这样:
内容页面的代码显示了使用html表格元素进行布局。参考以下代码 -
<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %>
<!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">
<div>
<table>
<tr>
<td>名字:</td>
<td>
<asp:textbox id="txtname" runat="server"></asp:textbox>
</td>
</tr>
<tr>
<td>地址:</td>
<td>
<asp:textbox id="txtstreet" runat="server"></asp:textbox>
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<asp:textbox id="txtcity" runat="server"></asp:textbox>
</td>
</tr>
<tr>
<td>省份:</td>
<td>
<asp:textbox id="txtstate" runat="server"></asp:textbox>
</td>
</tr>
<tr>
<td class="style1"></td>
<td id="displayrow" runat ="server" class="style2">
</td>
</tr>
<tr>
<td colspan="2">
<asp:button id="button1" runat="server" text="提交" onclick="button1_click" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
按钮控件后端的代码(default.aspx.cs):
using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.ui;
using system.web.ui.webcontrols;
public partial class _default : system.web.ui.page
{
protected void page_load(object sender, eventargs e)
{
}
protected void button1_click(object sender, eventargs e)
{
string str = "";
str += txtname.text + "<br />";
str += txtstreet.text + "<br />";
str += txtcity.text + "<br />";
str += txtstate.text + "<br />";
displayrow.innerhtml = str;
}
}
运行上面代码,得到以下结果 -
填入上述表单内容,然后提交 -
注意以下几点:
id属性和runat属性需要添加到标签中。