MIS2000 Lab. 的 ASP.NET專題實務/教學與分享

關於這個題目，還滿常見的。

Q : GridView裡面的「編輯模式」，預設值都採用 TextBox來作。

如果遇上「性別」、「單選」、「複選」這些資料，必須搭配 CheckBox / Radio / DropDownList / ListBox等等，該怎麼作呢？

說來慚愧，這部份是很基本的設定，小弟卻忘了放在書裡面。

今天看書時，發現一本書在講這種範例。我嚇了一跳～～「咦？幹嘛寫得這麼複雜？」

一部份要靠畫面設定（SqlDataSource）、一部份要自己寫程式運作.....我的媽啊！看到這種作法，連我都被嚇著了，哪裡還想要學下去？

小弟推薦的作法（解答）有兩種：   本範例可以當作書本第九章（GridView樣版）的後續補充！

• 第一，完全靠 SqlDataSource(精靈)設定畫面就能完成，不需要寫程式啊！
• 第二，要增強功力，瞭解內部運作，那麼要我完全「手寫程式」也可以！
• 第三，使用 GridView的 RowDataBound()事件來處理（謝謝網友hatelove提醒）

不管是方法一或是方法二，都比那本書的範例不三不四的要好太多！

說了這麼多，先來看看執行成果：

執行程式時，我們發現這五個會員的性別，已經由 RadioButtonList來取代，而且會依照資料表的數值，「自動點選」出正確的性別

就算按下欄位的「排序」，資料也是正確！

接下來，進入 GridView的「編輯模式」，仍然是正確顯示！

我把科學小飛俠裡面「五號」的胖子，名字給忘了？.....大家別介意喔～    （剛剛上網找圖片，發現他名叫阿龍）

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

現在開始解答：

第一，完全靠 SqlDataSource(精靈)設定畫面就能完成，不需要寫程式啊！

首先，做好GridView + SqlDataSource

把GridView的「性別」欄位設定成樣版（模版、Template）.......如果連這樣都不會設定，那就很糟糕了。每本書都會講到的基本設定ㄟ！

然後在樣版內（例如：ItemTemplate or EditTemplate）裡面設定。畫面如下：

我們設定 RadioButtonList的繫結（綁定）屬性，而 SelectedValue從字面上就知道是預設值！

也就是資料表的性別欄位如果是「女」，那麼 RadioButtonList的子選項「女」，便會自動被勾選！

[廣告] 如果這個畫面與步驟，您不能第一時間想起的話，表示您非常不熟練。  快快買一本好書來加強吧！

市面上唯一的一本ASP.NET書籍，耗費 五大章 徹底講解GridView的，就是我這本啊~

HTML畫面設定如下，搭配SqlDataSource，不需要寫程式也能完成上述功能：

01         <asp:GridView ID="GridView1" runat="server" AllowPaging="True"  
02             AutoGenerateColumns="False" BackColor="White" BorderColor="#E7E7FF"  
03             BorderStyle="None" BorderWidth="1px" CellPadding="3" DataKeyNames="id"  
04              GridLines="Horizontal" PageSize="5" DataSourceID = "SqlDataSource1"
05             AllowSorting="True">
06             <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
07             <Columns>
08                 <asp:CommandField ShowEditButton="True" />
09                 <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False"  
10                     ReadOnly="True" SortExpression="id" />
11                 <asp:BoundField DataField="real_name" HeaderText="real_name"  
12                     SortExpression="real_name" />
13                 <asp:TemplateField HeaderText="sex" SortExpression="sex">
14                     <EditItemTemplate>
15
16                         <asp:RadioButtonList ID="RadioButtonList1" runat="server"  
17                             SelectedValue='<%# Bind("sex") %>' >
18                             <asp:ListItem>男</asp:ListItem>
19                             <asp:ListItem>女</asp:ListItem>                            
20                         </asp:RadioButtonList>
21
22                         <asp:Label ID="Label1" runat="server" style="font-weight: 700; color: #FF0000" Text='<%# Bind("sex") %>'></asp:Label>
23
24                     </EditItemTemplate>
25                     <ItemTemplate>
26                         <asp:Label ID="Label1" runat="server" Text='<%# Bind("sex") %>'  
27                             style="font-weight: 700; color: #FF0000"></asp:Label>
28                         &nbsp;
29                         <asp:RadioButtonList ID="RadioButtonList1" runat="server"  
30                             SelectedValue='<%# Bind("sex") %>' >
31                             <asp:ListItem>男</asp:ListItem>
32                             <asp:ListItem>女</asp:ListItem>                            
33                         </asp:RadioButtonList>
34                         
35                     </ItemTemplate>
36                 </asp:TemplateField>
37             </Columns>
38             <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
39             <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
40             <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
41             <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
42             <AlternatingRowStyle BackColor="#CCFFCC" ForeColor="#006600" />
43         </asp:GridView>
44         
45         
46         <asp:SqlDataSource ID="SqlDataSource1" runat="server"  
47             ConnectionString="<%$ ConnectionStrings:testConnectionString %>"  
48             InsertCommand="INSERT INTO [db_user] ([real_name], [sex]) VALUES (@real_name, @sex)"  
49             SelectCommand="SELECT [id], [real_name], [sex] FROM [db_user]"  
50             UpdateCommand="UPDATE [db_user] SET [real_name] = @real_name, [sex] = @sex WHERE [id] = @id">
51             <UpdateParameters>
52                 <asp:Parameter Name="real_name" Type="String" />
53                 <asp:Parameter Name="sex" Type="String" />
54                 <asp:Parameter Name="id" Type="Int32" />
55             </UpdateParameters>
56             <InsertParameters>
57                 <asp:Parameter Name="real_name" Type="String" />
58                 <asp:Parameter Name="sex" Type="String" />
59             </InsertParameters>
60         </asp:SqlDataSource>

設定完成就OK啦，GridView + SqlDataSource，完全不用寫程式。

如果您不熟悉他的運作，硬要自己加一些手寫的程式在裡面，狀況只會越來越多！

     @@ 要嘛！完全靠設定、靠SqlDataSource的精靈設定！

     # #  要嘛！就是「完全靠自己、完全自己寫程式去操作」！    

兩種選擇，乾淨俐落！不要混搭在一起，會出現更多意外狀況～

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

接下來要介紹第二種作法：

第二，要增強功力，瞭解內部運作，那麼要我完全「手寫程式」也可以！

    只會在畫面上拉拉扯扯，說真的，這種程式設計師似乎很容易被人取代。

    能自己動手寫程式，好處很多。

    除了變化萬千之外，對於內部的運作流程＆原理，也會更精進！對自己來說，也是一個很棒的磨練！

HTML的畫面設定，大致跟上面雷同。  唯一的差異是，這裡我們不使用 SqlDataSource了！

因為各種動作，都要自己寫程式去搞定。

後置程式碼（VB）如下：

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            mis2000lab_DataSet()
        End If
    End Sub

    Protected Sub GridView1_RowCancelingEdit(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCancelEditEventArgs) Handles GridView1.RowCancelingEdit
        GridView1.EditIndex = -1    '--取消「編輯」模式
        mis2000lab_DataSet()
    End Sub

    Protected Sub GridView1_RowEditing(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewEditEventArgs) Handles GridView1.RowEditing
        GridView1.EditIndex = e.NewEditIndex   '--進入「編輯」模式
        mis2000lab_DataSet()
    End Sub

    Sub mis2000lab_DataSet()    （底下是很簡單的 ADO.NET程式，DataSet）

        '**** db_user資料表的性別欄位，與RadioButtonList進行搭配 ****
        Dim sqlstr As String
        Dim Conn As New SqlConnection(WebConfigurationManager.ConnectionStrings("testConnectionString").ConnectionString)
        Dim myAdapter As SqlDataAdapter
        Dim ds As New DataSet
        Try

            sqlstr = "select id, real_name, sex from db_user"
            myAdapter = New SqlDataAdapter(sqlstr, Conn)

            myAdapter.Fill(ds, "test")   

            GridView1.DataSource = ds.Tables("test").DefaultView 
            GridView1.DataBind()

            '----重點(start)--------------------------------------------------------------

           '上面那張圖片，設定 RadioButtonList的資料繫結（選定SelectedValue），就是在作這件事！
            For i As Integer = 0 To (GridView1.Rows.Count - 1)
                Dim u_radio As RadioButtonList = GridView1.Rows(i).FindControl("RadioButtonList1")
                If u_radio.Items(0).Value = ds.Tables("test").Rows(i).Item("sex").ToString() Then
                    u_radio.Items(0).Selected = True
                Else
                    u_radio.Items(1).Selected = True
                End If
            Next
            '----重點(end)---------------------------------------------------------------
        Catch ex As Exception
            Response.Write("<b>Error Message----  </b>" + ex.ToString() + "<HR/>")
        End Try
    End Sub

 程式碼裡面，有兩個小重點：

    第一，要會自己寫 ADO.NET 的程式才行。上面是DataSet，但也可參考這篇文章：DataReader的標準範例 for ASP.NET 2.0 / 3.5

    第二，黃底的部份， FindControl()是啥？請看這篇文章：[習題]GridView裡面，樣版（Template）內的控制項，怎麼抓取？使用FindControl就對啦～

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

第三，使用 GridView的 RowDataBound()事件來處理（謝謝網友hatelove提醒）

 後置程式碼如下：

01     Dim Conn As New SqlConnection(WebConfigurationManager.ConnectionStrings("testConnectionString").ConnectionString.ToString)
02     Dim myAdapter As SqlDataAdapter
03     Dim ds As New DataSet
04
05     Protected Sub Page_Load() Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
06         DBinit()
07     End Sub
08
09     Protected Sub GridView1_RowDataBound() Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
10         '----重點(start)--------------------------------------------------------------
11         If e.Row.RowType = DataControlRowType.DataRow Then
12             '**** db_user資料表的性別欄位，與RadioButtonList進行搭配 ****
13             Dim u_radio As RadioButtonList = e.Row.FindControl("RadioButtonList1")
14             '********************************************************
15             If u_radio.Items(0).Value = ds.Tables("test").Rows(e.Row.RowIndex).Item("sex").ToString() Then
16                 u_radio.Items(0).Selected = True
17                 '--因為RadioButtonList1只有「男」、「女」兩個子選項
18             Else
19                 u_radio.Items(1).Selected = True
20             End If
21         End If
22         '----重點(end)---------------------------------------------------------------
23     End Sub
24
25     Protected Sub GridView1_RowEditing() Sub GridView1_RowEditing(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewEditEventArgs) Handles GridView1.RowEditing
26         GridView1.EditIndex = e.NewEditIndex
27         DBinit()
28     End Sub
29
30     Sub DBinit() DBinit()
31         Dim sqlstr As String
32         Try
33             sqlstr = "select id, real_name, sex from db_user"
34             myAdapter = New SqlDataAdapter(sqlstr, Conn)
35             myAdapter.Fill(ds, "test")
36             GridView1.DataSource = ds.Tables("test").DefaultView            GridView1.DataBind()
37         Catch ex As Exception
38             Response.Write("<b>Error Message----  </b>" + ex.ToString() + "<HR/>")
39         End Try
40     End Sub

 您也可以看看這篇文章（簡體中文）的範例：http://www.cnblogs.com/cnaspnet/archive/2007/03/09/669415.html  (C#語法)

 或是 jeff這篇文章，也是類似範例：http://www.dotblogs.com.tw/jeff377/archive/2008/03/17/1720.aspx

 這個範例雖然簡單，但裡面還是有些學問在。

不管您是依靠 SqlDataSource的畫面設定？

或是有能力自己寫程式去解決？

似乎都不是初學者（剛剛入門ASP.NET一兩天）就能搞定的。

所以我才說這篇文章是給本書讀者的「補充教材」

本範例可以當作書本第九章（GridView樣版）的後續補充！

本文提供三個範例下載，請下載： 

• VB([VB]GridView_Template_1227.rar)  
• C#([CS]GridView_Template_1227.rar) 

有點晚了，晚安！................以下是今日值班正妹，松島楓。   AV女神復出，這兩天來台灣宣傳

點圖可放大

圖片來源： http://1-apple.com.tw/index.cfm?Fuseaction=Article&IssueID=20081226&art_id=31262538

 點圖可放大

圖片來源：http://fashion.big5.enorth.com.cn/system/2007/09/03/001875267.shtml  這裡有她的幾張寫真集

......  寄信給我    mis2000lab (at) 雅虎.com.台灣 ................................................................................................................
ASP.NET專題實務  （文魁出版，VB版 P8187 / C#版P09027）

              下集已經出版囉～～～ASP.NET專題實務II：範例應用與4.0新功能

.............................................................................................................. 寄信給我    mis2000lab (at) 雅虎.com.台灣 ........