ASP.NET HTML 服务器
HTML 服务器控件基本上是增强的标准 HTML 控件以启用服务器端处理。 HTML 控件(例如标题标记、锚标记和输入元素)不由服务器处理，而是发送到浏览器进行显示。
通过添加属性 runat="server" 并添加 id 属性以使它们可用于服务器端处理，它们被专门转换为服务器控件。
例如，考虑 HTML 输入控件：
<input type="text" size="40">
通过添加 runat 和 id 属性，可以将其转换为服务器控件：
<input type="text" id="testtext" size="40" runat="server">
使用 HTML 服务器控件的优点
尽管 ASP.NET 服务器控件可以执行 HTML 服务器控件完成的每项工作，但后面的控件在以下情况下很有用：
-
使用静态表格进行布局。
-
将 HTML 页面转换为在 ASP.NET 下运行
下表描述了 HTML 服务器控件：
|
控件名称
|
HTML tag
|
|
HtmlHead
|
元素
|
|
Html输入Button
|
<输入类型=按钮|提交|重置>
|
|
Html输入Checkbox
|
<输入类型=复选框>
|
|
html输入文件
|
<输入类型 = 文件>
|
|
Html输入Hidden
|
<输入类型=隐藏>
|
|
Html输入Image
|
<输入类型=图像>
|
|
Html输入密码
|
<输入类型=密码>
|
|
Html输入RadioButton
|
<输入类型 = 收音机>
|
|
Html输入Reset
|
<输入类型 = 重置>
|
|
HtmlText
|
<输入类型=文本|密码>
|
|
html图片
|
![]() 元素
|
|
HtmlLink
|
<链接> 元素
|
|
HtmlAnchor
|
元素
|
|
html按钮
|
<按钮> 元素
|
|
html按钮
|
<按钮> 元素
|
|
HtmlForm
|
|
|
html表
|
元素
|
HtmlTableCell
|
|
|
|
HtmlTableRow
|
| 元素
|
标题
|
元素
</td>
</tr>
<tr>
<td valign="top" style="word-break: break-all;">
html选择
</td>
<td valign="top" style="word-break: break-all;">
<选择&t;元素
</td>
</tr>
<tr>
<td valign="top" style="word-break: break-all;">
HtmlGenericControl
</td>
<td valign="top" style="word-break: break-all;">
未列出所有 HTML 控件
</td>
</tr>
</tbody>
</table>
<h2>
例子
</h2><hr>
<p>
下面的示例使用一个基本的 HTML 表格进行布局。它使用一些框来获取用户的输入，例如姓名、地址、城市、州等。它还有一个按钮控件，单击该按钮可以获取显示在表格最后一行的用户数据。
</p>
<p>
该页面在设计视图中应如下所示：
</p>
<img alt="ASP.NET Server Controls" src="/asp.net/images/asp.net_server_controls.jpg"/>
<p>
内容页面的代码显示了使用 HTML 表格元素进行布局。
</p>
<pre class="brush:shell;toolbar:false"><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="htmlserver._Default" %>
<!DOCTYPE html PUBLIC "-// W3C
<html xmlns="http:// www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.style1
{
width: 156px;
}
.style2
{
width: 332px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 54%;">
<tr>
<td class="style1">Name:</td>
<td class="style2">
<asp:TextBox ID="txtname" runat="server" style="width:230px">
</asp:TextBox>
</td>
</tr>
<tr>
<td class="style1">Street</td>
<td class="style2">
<asp:TextBox ID="txtstreet" runat="server" style="width:230px">
</asp:TextBox>
</td>
</tr>
<tr>
<td class="style1">City</td>
<td class="style2">
<asp:TextBox ID="txtcity" runat="server" style="width:230px">
</asp:TextBox>
</td>
</tr>
<tr>
<td class="style1">State</td>
<td class="style2">
<asp:TextBox ID="txtstate" runat="server" style="width:230px">
</asp:TextBox>
</td>
</tr>
<tr>
<td class="style1"> </td>
<td class="style2"></td>
</tr>
<tr>
<td class="style1"></td>
<td ID="displayrow" runat ="server" class="style2">
</td>
</tr>
</table>
</div>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Click" />
</form>
</body>
</html>
</pre>
<p>
按钮控件背后的代码：
</p>
<pre class="brush:shell;toolbar:false">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;
}
</pre>
<p>
请注意以下事项：
</p>
<ul class="list">
<li>
<p>
标准 HTML 标记已用于页面布局。
</p>
</li>
<li>
<p>
HTML 表格的最后一行用于数据显示。它需要服务器端处理，因此添加了一个 ID 属性和 runat 属性。
</p>
</li>
</ul>
<div class="pre-next-nav">
<div class="pre-nav"><a href="https://www.newbiego.com/asp.net/asp.net-tutorial-server-controls.html">< 上一篇（ASP.NET 服务器控件）</a></div>
<div class="next-nav"><a href="https://www.newbiego.com/asp.net/asp.net-tutorial-client-side.html">下一篇（ASP.NET 客户端） ></a></div>
<div style="clear: both;"></div>
</div>
</div>
</div>
<div style="clear: both;"></div>
<div class="footer">
<p>声明 :本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利，请在一个月内通知我们（support@newbiego.com），我们会及时删除。</p>
<p>Copyright©小牛教程 2015-2021 <a href="https://beian.miit.gov.cn" target="_blank">粤ICP备15003982号</a></p>
</div>
</div>
<script src="https://asset.newbiego.com/asset/js/syntax-highlighter.js?_ms=b2871607baad20df"></script>
<script>
SyntaxHighlighter.all();
</script>
</body>
</html> | |
