這一篇要介紹的是DropDownList, ListBox, RadioButtonList, CheckBoxList,其餘比較複雜的資料繫結控制項,如Repeater, DataList, DataGrid, GridView, ListView等等,因為要注意的事項太多了,就請有興趣的人請自行至MSDN文件庫查閱,上面有完整的文件說明以及sample code。可以從目的當作切入點,去參考一些How To的文章。
DropDownList的介紹
1.MSDN reference:http://msdn.microsoft.com/zh-tw/library/system.web.ui.webcontrols.dropdownlist(VS.80).aspx
2.屬性
(a)Items:清單控制項中項目的集合
(b)DataTextField:要Binding到Item.Text的欄位名稱
(c)DataValueField:要Binding到Item.Value的欄位名稱
(d)SelectedIndex:選取項目的索引,沒選為-1
(e)SelectedValue:選取項目的值
(f)SelectedItem:具有最低索引的選取項目
(g)AppendDataBoundItems:是否在資料繫結之前清除清單項目,通常拿來做第一個『請選擇』的項目,設定為true之後,binding的items為Append
(h)AutoPostBack:設定為true,則在client端onchange時呼叫__doPostBack()
3.方法
(a)DataBind(),給完DataSource之後,記得要呼叫DataBind()才會實際繫結。呼叫DataBind()之後,會將原本選取的狀態清空
(b)Items.Clear():將DropDownList的項目清空
4.事件:SelectedIndexChanged,當SelectedIndex與上次的值有改變的時候觸發
5.HTML tag
(a)DropDownList:<select>
(b)Items:<option>
6.注意
(a)Index的範圍:注意超出索引範圍的exception
(b)DataBind()之前,應設定DataTextField與DataValueField,給定DataSource後,再呼叫DataBind()
(c)呼叫DataBind()會清空選取的狀態,如果碰到postback後選取狀態掉了,很有可能就是DataBind()的部分沒有判斷 !IsPostBack
(d)連動式DropDownList的作法
(1)拉式選單的連動:http://social.msdn.microsoft.com/Forums/zh-TW/236/thread/9f0342e6-c717-4534-9bf8-02808332139b
(2)CascadingDropDown with PageMethods:http://bibby.be/2008/04/cascadingdropdown-with-pagemethods.html
(3)ASP.NET MVC 連動式下拉式選單:http://demo.tc/Post/547
ListBox的介紹
1.MSDN reference:http://msdn.microsoft.com/zh-tw/library/system.web.ui.webcontrols.listbox(VS.80).aspx
2.屬性
(a)Rows:呈現列數
(b)SelectionMode:多選或單選
3.資料繫結方式同DropDownList
4.HTML tag
(a)ListBox:預設為<select size="4" />
(b)Rows:size屬性
(c)electionMode:multiple="multiple"
5.注意:常用變形例子:黑暗執行緒:CODE-用jQuery實作<select>選項上下移動(複選版)
RadioButtonList的介紹
1.MSDN reference:http://msdn.microsoft.com/zh-tw/library/system.web.ui.webcontrols.radiobuttonlist(VS.80).aspx
2.屬性
(a)RepeatColumns:顯示的行數,會根據RepeatDirection調整為欄或列
(b)RepeatDirection:群組中選項按鈕的顯示方向,水平或垂直
(c)RepeatLayout:群組內選項按鈕的配置
(1)Table:顯示在table中
(2)Flow:不顯示table結構,通常用在最後一個radio後面還需要緊接著其他control,例如TextBox
3.資料繫結方式同DropDownList
4.用在單選,且需可以看到全部選項的清單
5.HTML tag
(a)Table:<table id="server control.ID"><tr><td><input type="radio" name="server control.ID"><label>XXX</label></input></td></tr></table>
(b)Flow:<span>取代<table<tr><td>
CheckBoxList的介紹
1.MSDN reference:http://msdn.microsoft.com/zh-tw/library/system.web.ui.webcontrols.checkboxlist(VS.80).aspx
2.行為屬性同RadioButtonList
3.注意
(a)SelectedValue只選的到有勾選,且index最小的值
(b)如何確認有哪一些項目被勾選?可透過foreach checkboxlist.items + if(item.checked),也可參考:CheckBoxList複選的SelectedValue,用逗號串接
最後,請想學習的客倌,看完這篇文章思考一下,下列的問題該如何回答:
1.DropDownList該如何bind資料?
2.DropDownList該怎麼樣加入『請選擇』的項目,而不受datasource影響?
3.DropDownList對應的HTML為何?ListBox對應的HTML為何?Items對應的HTML為何?
4.CheckBoxList該如何得到勾選的值?
5.RadioButtonList與CheckBoxList該怎麼改變呈現的方向?
6.ListBox呈現的列數如何控制?對應的HTML屬性為何? 多選與單選該怎麼控制?對應的HTML屬性為何?