ASP.NET 基礎控件入門 (一)：Button、TextBox、Web 伺服器控件特性與客戶端事件

TextBox 控件

轉譯為 ``、`` 或 `<input type="password">`。</p> <table> <thead> <tr><th>屬性</th><th>說明</th></tr> </thead> <tbody> <tr><td>TextMode</td><td>`SingleLine` (預設) / `MultiLine` / `Password`</td></tr> <tr><td>MaxLength</td><td>最大字元數 (SingleLine/Password 有效)</td></tr> <tr><td>Columns / Rows</td><td>寬度/高度 (MultiLine 為 Rows)</td></tr> <tr><td>ReadOnly</td><td>唯讀 (仍回傳值)</td></tr> <tr><td>AutoPostBack</td><td>文字變更失焦時自動回傳 (配合 OnTextChanged)</td></tr> <tr><td>Text</td><td>取得/設定值</td></tr> </tbody> </table> <h2>Web 伺服器控件特殊客戶端事件</h2> <p>ASP.NET 控件支援 `OnClientClick`、`onchange`、`onfocus`、`onblur`、`onkeydown` 等原生 HTML 事件屬性，直接寫在標記中即可轉譯：</p> <pre><code><asp:TextBox ID="txtSearch" runat="server" onfocus="this.select();" onkeydown="if(event.keyCode==13) { __doPostBack('btnSearch',''); return false; }" /> </code></pre> <h2>完整範例：簡易登入表單</h2> <pre><code><%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %> <!DOCTYPE html> <html><head><title>登入</title></head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="lblUser" runat="server" Text="帳號：" AssociatedControlID="txtUser" /> <asp:TextBox ID="txtUser" runat="server" MaxLength="20" /> <asp:RequiredFieldValidator ControlToValidate="txtUser" ErrorMessage="*" /> <br /> <asp:Label ID="lblPwd" runat="server" Text="密碼：" AssociatedControlID="txtPwd" /> <asp:TextBox ID="txtPwd" runat="server" TextMode="Password" MaxLength="20" /> <asp:RequiredFieldValidator ControlToValidate="txtPwd" ErrorMessage="*" /> <br /> <asp:Button ID="btnLogin" runat="server" Text="登入" OnClick="btnLogin_Click" OnClientClick="return confirm('確定送出？');" ValidationGroup="Login" /> <asp:ValidationSummary ValidationGroup="Login" HeaderText="錯誤：" /> </div> </form> </body></html> </code></pre> <h2>轉譯後 HTML 關鍵觀察</h2> <ul> <li>表單 `action` 指向自身頁面，`method="post"`。</li> <li>隱藏欄位 `__VIEWSTATE`、`__EVENTVALIDATION` 維護狀態與安全。</li> <li>Button 轉為 `<input type="submit" name="btnLogin" value="登入" id="btnLogin" onclick="return confirm('確定送出？');" />`。</li> </ul> <h2>總結</h2> <p>Button 與 TextBox 是表單互動的基石。掌握 `OnClientClick` 整合客戶端確認、`ValidationGroup` 區隔驗證、`TextMode` 切換輸入模式、`AutoPostBack` 實現即時回應，能構建流暢且安全的使用者介面。理解轉譯後的 HTML 結構，有助於除錯與前端整合。</p> <div class="qcxs_ie_he"></div> </div> <div class="akevx_own"> <script language='javascript' src='/ad/p.js'></script></div> <div class="akevx_mj"> </div> <div class="qcxs_ie_he"></div> <ol class="qmsbvx_hsb ovv_hex"> <li>上一篇文章： <a class='LinkPrevArticle' href='https://code.yunyiwangluo.com/bianchen/gyaspnet/18635.html' >ASP.NET 基礎控件深度解析 (二)：FileUpload、Literal、Panel、PlaceHolder 實戰應用</a> <li>下一篇文章： <a class='LinkNextArticle' href='https://code.yunyiwangluo.com/bianchen/gyaspnet/18637.html' >開發基於 ASP.NET WebService 的圖片驗證碼服務：從 Bitmap 到位元組流的完整實作</a> </ol> </div> </div> <div class="qirnxbd bg1 mt20"> <div class="jdbsbav"> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/' target="_blank">關於ASP.NET</a> <div class="jdbsbav_hx"></div> </div> <div class="qirnxbd_rbx"> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/19475.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010511115129_S.jpg' width='100' height='70' alt='使用 Silverlight 建構工作流設計器（十八）：資料持久化至資料庫——伺服器端實作' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/19475.html' target="_blank"><strong>使用 Silverlight 建構工作流設計器（十八）：資料持久化至資料庫——伺服器端實作</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/19475.html' target="_blank"><p>伺服器端架構 伺服器端負責接收客戶端傳送的工作流 XML，解</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/18100.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010510435720_S.jpg' width='100' height='70' alt='多表查詢合併多個 DataTable 為單一結果集' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/18100.html' target="_blank"><strong>多表查詢合併多個 DataTable 為單一結果集</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/18100.html' target="_blank"><p>需求：查詢連續 N 天的郵件發送日誌。資料庫按天分表（如 s</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/19397.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010511101851_S.jpg' width='100' height='70' alt='DNN 模組開發系列（5）：DNN 通用控制項（上） - LabelControl' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/19397.html' target="_blank"><strong>DNN 模組開發系列（5）：DNN 通用控制項（上） - LabelControl</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/19397.html' target="_blank"><p>DNN 通用控制項主要在 DotNetNuke.UI.Use</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/19337.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010511090506_S.gif' width='100' height='70' alt='DNN 本地化機制深度解析：打造全球化應用的完整指南' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/19337.html' target="_blank"><strong>DNN 本地化機制深度解析：打造全球化應用的完整指南</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/19337.html' target="_blank"><p>DNN 透過語言包實現本地化（漢化）。核心原理：所有頁面由用</p></a> </div> <div class="qcxs_ie_he"></div> </div> </div> </div> <div class="eccsgxsg mt20"> <div class="akevx_oin"> </div> <div class="nenxnxb bg1 mt20"> <div class="enxvsfgg"> <div class="enxvsfgg_1"></div> </div> <div class="pdirbvx lbhevs ovv_hex"> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/18052.html' target="_blank">ASP.NET HttpHandler 核心疑難雜症：IsReusable 與重用機制深度解析</a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/135508.html' target="_blank">ASP.NET Calendar 控件完整指南：日曆顯示、日期選擇、樣式自訂與事件處理</a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/18373.html' target="_blank">Hxj.Data 輸出執行 SQL：RegisterSqlLogger 事件攔截、參數化 SQL 完整顯示</a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/18756.html' target="_blank">ASP.NET 控件開發系列（一）：開篇——為什麼要開發控件與核心概念建立</a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/19344.html' target="_blank">DNN 排程管理深度解析（三）：Web.config 設定與後台管理介面實戰</a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/17982.html' target="_blank">微型專案實踐（四）：Common 層驗證框架 Validater 流式介面與單元測試示範</a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/19524.html' target="_blank">結合 ASP.NET 與 JavaScript 開發互動式電子沙盤系統</a> </div> </div> <div class="eqibneb bg1 mt20"> <div class="lkebxsg">欄目導航</div> <div class="eqibneb_1 ovv_hex"> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/aspnetjc/' target="_self">ASP.NET 基礎</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/gyaspnet/' target="_self">關於ASP.NET</a></li> </div> </div> </div> <div class="qcxs_ie_he"></div> </div> </div> <div class="qcxs_ie_he"></div> <div class="ebrxbsbf">Copyright © <a href="https://code.yunyiwangluo.com/" target="_blank" title="程式碼之家">程式碼之家</a> All Rights Reserved </div> </body> </html>