關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

ASP.NET C# - Server Controls

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 賦予值

C#

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 賦予值

C#

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 加入兩個事件

C#

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>

C#

//這兩種方式都可以
//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 資料來源方式,建立下拉選單:

c#

//若有 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);
}

如果你喜歡我們的文章內容,請在這裡按個讚



最新文章推薦