ASP.NET HTML server
May 13, 2021 ASP.NET
Table of contents
HTML server
HTML server controls are primarily enhanced standard HTML controls that keep the service side running. HTML controls are not processed by the server, but are sent to the browser for display, such as page title labels, link labels, and input elements.
By adding the runat s "server" property and an id property, they can be specifically converted into a server control that can be applied to server-side processing.
For example, HTML input controls:
<input type="text" size="40">It can be converted to a server control by adding runat and id properties:
<input type="text" id="testtext" size="40" runat="server">Benefits of using HTML server controls
Although ASP.NET the server control can do every job performed by the HTML server control, HTML controls still have an advantage in the following situations:
- Use static expression to the layout purpose.
- Convert an HTML page to ASP.NET under .
The following table describes HTML server controls:
| The name of the control | HTML tags |
|---|---|
| HtmlHead | <head>element |
| HtmlInputButton | <input type=button|submit|reset> |
| HtmlInputCheckbox | <input type=checkbox> |
| HtmlInputFile | <input type = file> |
| HtmlInputHidden | <input type = hidden> |
| HtmlInputImage | <input type = image> |
| HtmlInputPassword | <input type = password> |
| HtmlInputRadioButton | <input type = radio> |
| HtmlInputReset | <input type = reset> |
| HtmlText | <input type = text|password> |
| HtmlImage | <img> element |
| HtmlLink | <link> element |
| HtmlAnchor | <a> element |
| HtmlButton | <button> element |
| HtmlButton | <button> element |
| HtmlForm | <form> element |
| HtmlTable | <table> element |
| HtmlTableCell | <td> and <th> |
| HtmlTableRow | <tr> element |
| HtmlTitle | <title> element |
| HtmlSelect | <select&t; element |
| HtmlGenericControl | All HTML controls that are not listed |
The following examples are laid out using basic HTML tables. It uses a box to get input from the user such as name, address, city, state, etc., and a button control that is clicked to get the user data displayed in the last row of the table.
The page should look like this in the design view:
The code for the content page indicates the application of the layout of HTML table elements.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="htmlserver._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>The background code for the button control is:
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;
}Observe the following statements:
- Standard HTML tags have been used for page layout.
- The last row of the HTML table is used for the data display. It requires server-side machining, so add ID properties and runat properties to it.