ASP.NET C# - Server Controls

Microsoft 採取跟 Windows Form 應用程式一樣的方式來建立網站應用程式，

動態處理部分會放在 .aspx，事件處理程式則會將程式碼後置(code-behind) 放在 .cs或.vb

所以都必須先建立一個 form 表單範圍，並且添加 runat=“server”

在 form 內部，就能開始添加控制項，或者事件驅動，

因此，想在HTML元素進行 server side處理，就要向這些元素添加 runat=“server” 屬性，

以及註冊 ID 作為辨識，ID在同一個webForm中不可以重複

例如，在 server side 賦予超連結的url值

在 C# 檔案 C#

mylink.HRef = "http://google.com";

在HTML 表單中，超連結標籤新增了HtmlAnchor 服務器控制向之後，

server side就會透過id來辨識，操控賦予值

aspx

<form id="form1" runat="server">
	<a id="mylink" runat="server">my link</a>
</form>

標準控制項

前面提到，在 Web 設計會透過一個 form 的區塊來處理動態資料

微軟提供相當多的標準控制項，可以直接應來建立各種網頁功能，例如: Label, TextBox, Button, LinkButton, ImageButton, HyperLink, DropDownList, ListBox, CheckBox, CheckBoxList, RadioButton, RadioButtonList, Image, ImageMap, Table, BulletedList, HiddenField, Literal, Calendar, AdRotator, FileUpload, Wizard, Xml, MultiView, Panel, PlaceHolder, View, Substitution, Localize

每一個控制項都有屬性、事件、方法可以使用

我習慣僅單純使用需動態文字、內容，對於樣式屬性控制則交由CSS負責

這裡列出幾個常用的標準控制項，進行說明

[Label] 顯示文字

Lable 控制向主要用來顯示文字資訊

這裡註冊一個ID 為 mylabel aspx

<form id="form1" runat="server">
	<asp:Label ID="mylabel" runat="server"></asp:Label>
</form>

接著在 code-behind 賦予值

mylabel.Text = "my label";

[TextBox] 輸入文字

TextBox 控制項常常需要搭配 TextMode 來指定標籤類型

TextMode 可用的屬性: Color, Date, DateTime, DateTimeLocal, Email, Month, MultiLine, Number, Password, Phone, Range, Search, SingleLine, Time, Url, Week

aspx

<form id="form1" runat="server">
	<asp:TextBox ID="my_textbox" runat="server" TextMode="MultiLine"></asp:TextBox>
</form>

接著在 code-behind 賦予值

my_textbox.Text = "my textbox";

[Button] 按鈕及事件

Button 最常搭配 onclic 呼叫對應事件程式

例如這裡兩個按鈕分別呼叫不同事件 aspx

<form id="form1" runat="server">
	<div>
	 <asp:Button runat="server" onclick="myButtonClickEvent" Text="Click This"/>
	</div>
	<div>
	 <asp:Button runat="server" onclick="myButtonClickEvent2" Text="Click This2"/>
	</div>
</form>

在 code-behind 加入兩個事件

protected void myButtonClickEvent(object sender, EventArgs e)
{
    Response.Write("OK This is myButtonClickEvent Click");
}
protected void myButtonClickEvent2(object sender, EventArgs e)
{
    Response.Write("OK This is myButtonClickEvent2 Click");
}

[DropDownList] 下拉選單

屬性	說明
AppendDataBoundItems	指示是否在資料繫結之前清除清單項目。
AutoPostBack	指示在使用者變更清單選取項目時，是否會自動向伺服器回傳。
DataSource	設定資料繫結來源。
DataSourceID	設定資料繫結來源控制項 ID
DataMember	設定資料繫結控制項繫結至的資料清單名稱。
DataTextField	設定提供清單項目文字內容的資料來源的欄位。
DataTextFormatString	設定用來控制資料繫結至清單控制項時顯示方式的格式字串。
Items	取得或設定 DropDownList 控制項中項目的集合。

直接提供下拉選單項目:

aspx

<form id="form1" runat="server">
	<asp:DropDownList runat="server">
		<asp:ListItem Value="0">一</asp:ListItem>
		<asp:ListItem Value="1">二</asp:ListItem>
		<asp:ListItem Value="2" Selected="True">三</asp:ListItem>
		<asp:ListItem Value="3">四</asp:ListItem>
	</asp:DropDownList>
</form>

單一資料來源方式建立下拉選單:

aspx

<form id="form1" runat="server">
	<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
</form>

//這兩種方式都可以
//List Data
var items = new List<string> {"111", "222", "333" };
//Array Data
string[] items = { "111", "222", "333", "444", "555" };

DropDownList1.DataSource = items;
DropDownList1.DataBind();

value-name 資料來源方式，建立下拉選單:

//若有 post back， 取得目前選擇的值
if (IsPostBack)
{
    Response.Write("<br>" + DropDownList1.SelectedValue + "<----- <br>");
    Response.Write("<br>" + DropDownList1.SelectedItem.Value + "<----- <br>");
    Response.Write("<br>" + DropDownList1.SelectedItem.Text + "<----- <br>");
}
// 僅有首次需要建立資料 (若post back 也 Add ，下拉選項會持續累加)
if (!IsPostBack)
{
    //要先清除 DropDownList 資料
    DropDownList1.Items.Clear();
    List<string[]> myList = new List<string[]> { new string[] { "111", "AAA" }, new string[] { "222", "BBBB" }, new string[] { "333", "CCC" } };
    foreach (var item in myList)
    {
        DropDownList1.Items.Add(new ListItem(item[1], item[0]));
    }
    DropDownList1.DataBind();
}

[ListBox] 單/多重列表項目

ListBox 可以建立單/多選列表

預設為單選，若要多選擇可以使用 SelectionMode: Multiple 列表長度可以透過 Row 來指定顯示的列數

動態資料來源則可參考 DropDownList

aspx

<asp:ListBox runat="server" SelectionMode="Multiple" Rows="10" >
	<asp:ListItem Value="0">一</asp:ListItem>
	<asp:ListItem Value="1">二</asp:ListItem>
	<asp:ListItem Value="2" Selected="True">三</asp:ListItem>
	<asp:ListItem Value="3">四</asp:ListItem>
</asp:ListBox>

[CheckBox] 核選框

CheckBox 可以產生核選單

aspx

<div>
	<label for="my_checkbox">MyCheckbox</label>
	<asp:CheckBox ID="my_checkbox" runat="server" Checked="true" />
</div>

取得 CheckBox 值 C#


if (IsPostBack)
{
    Response.Write(my_checkbox.Checked);
}

[CheckBoxList] 多重核選框

aspx

<asp:CheckBoxList ID="my_checkboxlist" runat="server" CssClass="myList">
    <asp:ListItem Value="1"> A </asp:ListItem>
    <asp:ListItem Value="2"> B </asp:ListItem>
    <asp:ListItem Value="3"> C </asp:ListItem>
    <asp:ListItem Value="4"> D </asp:ListItem>
    <asp:ListItem Value="5"> E </asp:ListItem>
    <asp:ListItem Value="6"> F </asp:ListItem>
</asp:CheckBoxList>

簡單使用 foreach 取得值 C#

if (IsPostBack)
{
	foreach (ListItem item in my_checkboxlist.Items)
	{
	    if (item.Selected)
	    {
	        Response.Write("<br>"+item.Text+"<br>");
	    }
	}
}

儲存在List中 C#

if (IsPostBack)
{
	List<ListItem> selected = new List<ListItem>();
	foreach (ListItem item in my_checkboxlist.Items)
	{
	    if (item.Selected)
	    {
	        selected.Add(item);
	    }
	}
}

[RadioButton] 單一選項按鈕

選項按鈕通常會多選一的方式呈現因此都會使用到 GroupName 這個屬性來將同類型的選項群組起來

aspx

<asp:RadioButton runat="server" ID="RadioButton1" GroupName="myGroup" Text="my radio1" />
<asp:RadioButton runat="server" ID="RadioButton2" GroupName="myGroup" Text="my radio2" />
<asp:RadioButton runat="server" ID="RadioButton3" GroupName="myGroup" Text="my radio3" />

但是在 code-behind 端，這樣只能透過 Text 屬性取得值

我們希望可以設定一個 value 的方式，可以自己增加這個屬性

aspx

<asp:RadioButton runat="server" ID="RadioButton1" GroupName="myGroup" Text="my radio1" Value="1" />
<asp:RadioButton runat="server" ID="RadioButton2" GroupName="myGroup" Text="my radio2" Value="2"/>
<asp:RadioButton runat="server" ID="RadioButton3" GroupName="myGroup" Text="my radio3" Value="3"/>

透過 Attributes 屬性取得自定義"Value" 值: C#

if (IsPostBack)
{
    if (RadioButton1.Checked)
    {
        Response.Write(RadioButton1.Attributes["Value"]+"</br>");
    }else if (RadioButton2.Checked)
    {
        Response.Write(RadioButton2.Attributes["Value"] + "</br>");
    }else if (RadioButton3.Checked) 
    {
        Response.Write(RadioButton3.Attributes["Value"] + "</br>");
    }
}

[RadioButtonList] 選項按鈕列表

選單按鈕列表可以更方便的直接建立一個群組，而不必再透過 GroupName

aspx

<asp:RadioButtonList runat="server" ID="RadioButtonList1">
    <asp:ListItem>my radiolist1</asp:ListItem>
    <asp:ListItem>my radiolist2</asp:ListItem>
    <asp:ListItem>my radiolist3</asp:ListItem>
</asp:RadioButtonList>

取得方式 C#

RadioButtonList1.SelectedItem.Text

也可以改用取得 Value 的方式 aspx

<asp:RadioButtonList runat="server" ID="RadioButtonList1">
    <asp:ListItem  Value="r1">my radiolist1</asp:ListItem>
    <asp:ListItem  Value="r2">my radiolist2</asp:ListItem>
    <asp:ListItem  Value="r3">my radiolist3</asp:ListItem>
</asp:RadioButtonList>

在 code behind 取得 Vaule C#

Response.Write(RadioButtonList1.SelectedValue

[Panel] 容器

Panel 是一個容器 - 功能區塊的概念

我們可以在這區塊中，進行動態新增元件

首先先定義好區塊

aspx

<asp:Panel runat="server" ID="my_panel">
	This is my panel<br />
</asp:Panel>

<asp:Button ID="Button1" runat="server" Text="Enter..." style="width:85px" onclick="Button1_Click" />

接著在 code behind 建立動態加入控制項 C#


protected void Button1_Click(object sender, EventArgs e)
{
    AddPanelControls();
}

protected void AddPanelControls()
{
    TextBox t1 = new TextBox();
    t1.Text = "Add first textbox";
    TextBox t2 = new TextBox();
    t2.Text = "Add second textbox";
    my_panel.Controls.Add(t1);
    my_panel.Controls.Add(t2);
}

[PlaceHolder] 容器

PlaceHolder 與 Panel 一樣都具有容器的功能

PlaceHolder 但是主要皆著重在動態新增控制項，不提供設定樣式及屬性

aspx

 <asp:PlaceHolder runat="server" ID="my_placeholder">
     This is my PlaceHolder<br />
 </asp:PlaceHolder>

<asp:Button ID="Button1" runat="server" Text="Enter..." style="width:85px" onclick="Button1_Click" />

接著在 code behind 建立動態加入控制項 C#


protected void Button1_Click(object sender, EventArgs e)
{
    AddPlaceHolderControls();
}

protected void AddPlaceHolderControls()
{
    TextBox tp1 = new TextBox();
    tp1.Text = "Add AddPlaceHolderControls first textbox";
    TextBox tp2 = new TextBox();
    tp2.Text = "Add AddPlaceHolderControls second textbox";
    my_placeholder.Controls.Add(tp1);
    my_placeholder.Controls.Add(tp2);
}