[習題]GridView樣版內部,改用CheckBox/Radio/DropDownList(單/複選)控制項,取代TextBox #1--自己動手寫程式

Q : GridView裡面的「編輯模式」,預設值都採用 TextBox來作。
如果遇上「性別」、「單選」、「複選」這些資料,必須搭配 CheckBox / Radio / DropDownList / ListBox等等,該怎麼作呢?

A : 本範例可以當作書本第九章(GridView樣版)的後續補充!
第一,完全靠 SqlDataSource(精靈)設定畫面就能完成,不需要寫程式啊!
第二,要增強功力,瞭解內部運作,那麼要我完全「手寫程式」也可以!







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

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

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

 

新出版的「ASP.NET 4.0專題實務 I -- 入門實戰篇 / 松崗出版」,

把這些相關範例歸納在第十一 章

 

 

 

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

一部份要靠畫面設定(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(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
06         DBinit()
07     End Sub

08
09     Protected 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(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()
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樣版)的後續補充!

 

本文提供三個範例下載,請下載: 

 

 

2011/6/22 補充:謝謝中國內地的網友 Derek的討論與提醒,

                                  在此提供可以分頁的(手寫程式)版本,請下載(VB / C#) ----  Book_1_Ch11_3.4.rar

 

 

 

另外一個類似的範例,請參閱:[習題] [主細表]大腸包小腸/巢狀GridView內部的「子控制項」搭配不同SqlDataSource(留言版)

下一篇範例 ----
[習題]GridView樣版內部,改用CheckBox/Radio/DropDownList(單/複選)控制項,取代TextBox #2 -- 關連式資料表

http://www.dotblogs.com.tw/mis2000lab/archive/2011/07/13/gridview_template_dropdownlist_20110713.aspx

 

新出版的「ASP.NET 4.0專題實務 I -- 入門實戰篇 / 松崗出版」,把這些相關範例歸納在第十 一 章

 

 

 

有點晚了,晚安!................以下是今日值班正妹,松島楓。   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  這裡有她的幾張寫真集

 

 

 

我將思想傳授他人, 他人之所得,亦無損於我之所有;

猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson

線上課程,遠距教學 (Web Form 49hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程,遠距教學 (ASP.NET MVC 75hr)  https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

ASP.NET MVC線上課程 第一天 免費看 (5.5小時) 

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.台灣  或  school (at) mis2000lab.net


ASP.NET遠距教學、線上課程(Web Form + MVC)。 第一天課程, "完整" 試聽。 

................   facebook社團   https://www.facebook.com/mis2000lab   ......................

................  YouTube (ASP.NET) 線上教學影片  https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

 

Blog文章 "附的範例" 無法下載,請看 這裡 ...... https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍(嚴格認定)

......................................................................................................................................................

...................................................................................................................................................... 

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講

事先錄製好的影片,並非上課時側錄!   觀看影片時,有如我「一對一」跟您面對面講課

 

ASP.NET MVC 5 線上教學

累積時數約 75小時...... 第一天(5.5小時)完整內容,"免費"讓您評估