การควบคุมเซิร์ฟเวอร์ HTML ส่วนใหญ่ได้รับการปรับปรุงการควบคุม HTML มาตรฐานเพื่อให้แน่ใจว่าการทำงานของเซิร์ฟเวอร์ เซิร์ฟเวอร์ไม่ได้ประมวลผลการควบคุม HTML แต่ถูกส่งไปยังเบราว์เซอร์เพื่อแสดง เช่น แท็กชื่อหน้า แท็กลิงก์ และองค์ประกอบอินพุต
โดยการเพิ่มแอตทริบิวต์ runat = "server" และแอตทริบิวต์ id พวกเขาสามารถแปลงเป็นตัวควบคุมเซิร์ฟเวอร์โดยเฉพาะเพื่อใช้ในการประมวลผลฝั่งเซิร์ฟเวอร์
ตัวอย่างเช่น การควบคุมอินพุต HTML:
<input type="text" size="40">มันสามารถแปลงเป็นการควบคุมเซิร์ฟเวอร์ได้โดยการเพิ่มแอตทริบิวต์ runat และ id:
<input type="text" id="testtext" size="40" runat="server">แม้ว่าตัวควบคุมเซิร์ฟเวอร์ ASP.NET สามารถทำทุกอย่างที่ตัวควบคุมเซิร์ฟเวอร์ HTML ทำ ตัวควบคุม HTML ยังคงมีข้อดีในสถานการณ์ต่อไปนี้:
ใช้นิพจน์คงที่เพื่อวัตถุประสงค์ในการจัดวาง
แปลงหน้า HTML ให้ทำงานภายใต้ ASP.NET
ตารางต่อไปนี้อธิบายการควบคุมเซิร์ฟเวอร์ HTML:
| ชื่อการควบคุม | แท็ก HTML |
|---|---|
| HtmlHead | <หัว>องค์ประกอบ |
| HtmlInputButton | <ประเภทอินพุต=ปุ่ม|ส่ง|รีเซ็ต> |
| ช่องทำเครื่องหมายอินพุต Html | <ประเภทอินพุต=ช่องทำเครื่องหมาย> |
| HtmlInputFile | <ประเภทอินพุต = ไฟล์> |
| HtmlInputHidden | <ประเภทอินพุต = ซ่อนเร้น> |
| HtmlInputImage | <ประเภทอินพุต = รูปภาพ> |
| HtmlInputPassword | <ประเภทอินพุต = รหัสผ่าน> |
| HtmlInputRadioButton | <ประเภทอินพุต = วิทยุ> |
| HtmlInputรีเซ็ต | <ประเภทอินพุต = รีเซ็ต> |
| HtmlText | <ประเภทการป้อนข้อมูล = ข้อความ|รหัสผ่าน> |
| HtmlImage | <img> องค์ประกอบ |
| HtmlLink | <ลิงค์>องค์ประกอบ |
| HtmlAnchor | <a>องค์ประกอบ |
| HtmlButton | <ปุ่ม> องค์ประกอบ |
| HtmlButton | <ปุ่ม> องค์ประกอบ |
| HtmlForm | <รูปแบบ> องค์ประกอบ |
| HtmlTable | <ตาราง> องค์ประกอบ |
| HtmlTableCell | <td> และ <th> |
| HtmlTableRow | <tr>องค์ประกอบ |
| HtmlTitle | <ชื่อ> องค์ประกอบ |
| Htmlเลือก | <เลือก&t; |
| HtmlGenericControl | การควบคุม HTML ทั้งหมดไม่อยู่ในรายการ |
ตัวอย่างต่อไปนี้ใช้ตาราง HTML พื้นฐานสำหรับการจัดวาง โดยจะใช้กล่องสำหรับรับอินพุตจากผู้ใช้ เช่น ชื่อ ที่อยู่ เมือง รัฐ ฯลฯ และปุ่มควบคุมที่เมื่อคลิกแล้วข้อมูลผู้ใช้จะแสดงในแถวสุดท้ายของตาราง
หน้าควรมีลักษณะเช่นนี้ในมุมมองออกแบบ:
รหัสสำหรับหน้าเนื้อหาแสดงการใช้องค์ประกอบตาราง HTML สำหรับการจัดวาง
<%@ 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> <tr> <td>Name:</td> <td> <asp:TextBox ID="txtname" runat="server" > </asp:TextBox> </td> </tr> <tr> <td>Street</td> <td> <asp:TextBox ID="txtstreet" runat="server" > </asp:TextBox> </td> </tr> <tr> <td>City</td> <td> <asp:TextBox ID="txtcity" runat="server" > </asp:TextBox> </td> </tr> <tr> <td>State</td> <td> <asp:TextBox ID="txtstate" runat="server"> </asp:TextBox> </td> </tr> <tr> <td> </td> <td></td> </tr> <tr> <td></td> <td ID="displayrow" runat ="server"> </td> </tr> </table> </div> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Click" /> </form> </body></html>รหัสที่อยู่ด้านหลังปุ่มควบคุมคือ:
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;}สังเกตข้อความต่อไปนี้:
แท็ก HTML มาตรฐานถูกนำมาใช้สำหรับการจัดวางหน้า
แถวสุดท้ายของตาราง HTML ใช้สำหรับการแสดงข้อมูล จำเป็นต้องมีการประมวลผลฝั่งเซิร์ฟเวอร์ ดังนั้นให้เพิ่มแอตทริบิวต์ ID และแอตทริบิวต์ runat เข้าไป