[ASP.Net]GridView攻略04-編輯資料列

以下是此範例的效果：

點選編輯按鈕後，欲編輯的資料列就會進入編輯模式，在編輯模式有更新和取消兩個按鈕，而真正的SQL Update動作是在更新按鈕裡面完成的。當按下編輯按鈕，欲編輯的資料列就會變成文字輸入方塊，讓使用者編輯內容。


這是ASPX的內容：##ReadMore##

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="5"
            DataKeyNames="id" OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing">
            <HeaderStyle CssClass="headerstyle" />
            <Columns>
                <asp:TemplateField HeaderText="編號">
                    <ControlStyle Width="80px" />
                    <ItemTemplate>
                        <asp:Label ID="lblId" runat="server" Text='<%# Bind("id") %>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtId" runat="server"></asp:TextBox>
                    </FooterTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="edtId" runat="server" Width="80px" Text='<%# Bind("id") %>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="標題">
                    <ControlStyle Width="200px" />
                    <ItemTemplate>
                        <asp:Label ID="lblTitle" runat="server" Text='<%# Bind("title") %>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtTitle" runat="server"></asp:TextBox>
                    </FooterTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="edtTitle" runat="server" Width="200px" Text='<%# Bind("title") %>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="數量">
                    <ControlStyle Width="30px" />
                    <ItemTemplate>
                        <asp:Label ID="lblNum" runat="server" Text='<%# Bind("num") %>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtNum" runat="server"></asp:TextBox>
                    </FooterTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="edtNum" runat="server" Width="30px" Text='<%# Bind("num") %>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="日期">
                    <ControlStyle Width="80px" />
                    <ItemTemplate>
                        <asp:Label ID="lblDate" runat="server" Text='<%# Bind("date", "{0:yyyy/MM/dd}") %>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
                    </FooterTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="edtDate" runat="server" Width="80px" Text='<%# Bind("date", "{0:yyyy/MM/dd}") %>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField ShowHeader="False">
                    <ItemTemplate>
                        <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CssClass="btnlink"
                            CommandName="Delete" Text="刪除" OnClientClick="return confirm('是否刪除？');"></asp:LinkButton>
                        <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Edit"
                            Text="編輯" CssClass="btnlink"></asp:LinkButton>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update"
                            Text="更新" CssClass="btnlink"></asp:LinkButton>
                        <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel"
                            Text="取消" CssClass="btnlink"></asp:LinkButton>
                    </EditItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

為了在按下編輯按鈕以後可以顯示文字輸入方塊讓使用者編輯，我們添加EditItemTemplate，在EditItemTemplate中並不是只能加入文字輸入方塊(TextBox)，如果如果你想顯示日曆讓使用者選擇，你也可以將TextBox改換成Calendar，只是程式會變得較為複雜，我們在後面的章節會提到。

點選編輯按鈕會觸發GridView的RowEditing事件。

protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
GridView1.EditIndex = e.NewEditIndex;
getData();
}

在RowEditing事件中，用e.NewEditIndex可以知道我們點選編輯的是哪一列，接著將現在編輯列編號設定給GridView。
接著，當點選更新按鈕的時候，會觸發GridView的RowUpdating事件。

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
    string id = GridView1.DataKeys[e.RowIndex].Value.ToString();
    string msg = "";
    int rf = 0;

    string sid = ((TextBox)GridView1.Rows[e.RowIndex].FindControl("edtId")).Text;
    string stitle = ((TextBox)GridView1.Rows[e.RowIndex].FindControl("edtTitle")).Text;
    string snum = ((TextBox)GridView1.Rows[e.RowIndex].FindControl("edtNum")).Text;
    string sdate = ((TextBox)GridView1.Rows[e.RowIndex].FindControl("edtDate")).Text;

    if (WebUtility.SetSQLdata(string.Format("update product set id='{1}',title='{2}',num='{3}',date='{4}' where id='{0}'"
    , id, sid, stitle, snum, sdate), "teachDB", out msg, out rf))
    {
        //設定-1讓GridView離開編輯狀態
        GridView1.EditIndex = -1;
        getData();
    }
    else
    {
        GridView1.EditIndex = -1;
    }
}

使用FindControl可以找到編輯列裡面的控制項，我們現在要找的是文字輸入方塊(TextBox)。無論Update成功或失敗，都設定EditIndex=-1讓GridView離開編輯狀態。
哈，編輯與更新講完，我們還漏了一個東西沒有提到，那就是取消編輯的按鈕。取消按鈕要做的事情其實很單純，就是隱藏編輯列，讓GridView離開編輯模式，回到正常模式。所以想必我們會用到上面提到的EditIndex=-1，可是要在哪裡加入這段程式呢？答案是RowCancelingEdit，當我們按下取消編輯的按鈕會觸發RowCancelingEdit這個事件。

protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
GridView1.EditIndex = -1;
getData();     
}

如果覺得本文對您有幫助，歡迎訂閱悶騷男的RSS