[ASP.NET] 你說什麼？！網頁設計竟然可以用拉的 ( ASP.NET 伺服器控制項)

第 11 屆 iThome 鐵人賽

DAY 23

Modern Web

ASP.NET Web Form 入門30天系列第 23 篇

11th鐵人賽 asp.net 伺服器控制項 runat="server" html

碼屋( MARK WU )

團隊火箭隊

2019-09-24 23:48:00

10348 瀏覽

分享至

本篇擷取重點：

ASP.NET 伺服器控制項
如何使用ASP.NET伺服器控制項呢?→用拉的
HELLO WORLD

一、ASP.NET 伺服器控制項

首先要解釋：「什麼是 ASP.NET 伺服器控制項？」一般而言，HTML的物件基本上是在使用者端（Client 端）的瀏覽器執行，其使用的是使用者端的電腦資源，例如以下的 HTML 宣告：

<input id="Text1" type="text" />
<input id="Button1" type="button" value="button" />

但由 HTML 的前端控制項功能過於簡單，且也無法配合 C# 或 VB 來撰寫程式，更不可能與.NET Framework 進行廣泛的結合，是故微軟推出了【ASP.NET 伺服器控制項】，可藉由伺服器控制項的ID屬性，在後端伺服器透過程式操作與控制，故稱為「伺服器控制項」。

<form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <br />
        <input id="Text1" type="text" runat="server"/>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    </div>
</form>

注意：

所有 HTML 伺服器控制項必須位於帶有 runat="server" 屬性的 < form> 標籤內。runat="server" 屬性表明了該表單必須在伺服器上進行處理。同時也表明了包含在它內部的控制項可被伺服器腳本訪問。

參考資料：
http://epaper.gotop.com.tw/pdf/AEL007600.pdf (大推薦)
http://epaper.gotop.com.tw/pdf/ACL025600.pdf
https://kknews.cc/code/yne8bab.html
http://rfid.ctu.edu.tw/rueychi/CCA/ASPNET/6_%E4%BC%BA%E6%9C%8D%E5%99%A8%E6%8E%A7%E5%88%B6%E9%A0%85.pdf

==================================================================
貼心小補充

ASP.NET 伺服器控制項本身內建各種屬性、事件與方法，透過這三者的設定與程式的撰寫，就可以建立各種所需的網頁應用程式及功能。以下說明屬性、事件與方法的作用：

屬性：屬性是控制項種種的特性，比如說顏色、長、寬大小等特性，這些都歸類在屬性之中。
事件：事件是指控制項面對不同狀況發生時，提供相對應的程式處理，做法是在事件處理常式中撰寫自訂的程式。
方法：方法是控制項所支援的一些執行功能，一個控制項本身多半都會內建許多相關方法，例如：ToString()方法就是進行轉換成字串的功能。

==================================================================

二、如何使用ASP.NET伺服器控制項呢?→用拉的

首先建立一個新的web表單(命名為index.aspx)，在方案總管點選開啟剛建立網頁的設計頁面(index.aspx)，左下角會看到設計、分割、原始檔可做選擇，我們點選設計模式，會看到畫面如下。

上方工作列 - 檢視 - 工具箱，來開啟工具箱

是從左側的工具箱選擇所需的控制項，再拖曳到中間的 ASP.NET Web Form 表單，並一一設定控制項的各種屬性與撰寫事件程式，這就是 ASP.NET 網頁最基本的程式設計過程，接下來，我們就可以就由拖曳的方式來進行基礎的網頁排版設計囉~

==================================================================
貼心小補充，

工具箱內的ASP.NET控制項，大致分為

HTML控制項：原HTML表單的標籤項目
伺服器控制項：：MS針對ASP.NET所提供的物件
- HTML伺服器控制項：定義網頁結構，由原HTML標籤轉變而來，內含runat="server"
- Web伺服器控制項：定義網頁上的項目，由< asp:xxx runat=“server”>定義

==================================================================

三、HELLO WORLD

我們也不免俗的用 HELLO WORLD 來開啟這個系列的章節XDD

這是設計頁面(index.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="ShareTwo.index" %>

<!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>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            <br />
            <input id="Text1" type="text" runat="server"/>
        </div>
    </form>
</body>
</html>

這是後置程式碼(index.aspx.cs)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ShareTwo
{
    public partial class index : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Label1.Text = "HELLO WORLD By Label";
            Text1.Value = "HELLO WORLD By Input Text";
        }
    }
}

這是最後的頁面輸出，HELLO WORLD