Home > .NET, C# > Gridview with inserting ROW

Gridview with inserting ROW

Trong một ứng dụng, luôn có phần quản trị các danh mục (categories management) ví dụ như quản lý danh mục thành phố, danh mục phòng ban,… Thông thường chúng ta phải sử dụng gridview + formview hoặc detailview để cung cấp CRUD cho user. Nhưng với những loại categories đơn giản và ít thông tin, tớ muốn thiết kế 1 page với 1 gridview duy nhất và user có thể thực hiện CRUD ngay trên gridview đó. Mục đích chính là giảm bớt các thao tác mà user cần phải thực hiện. Nhưng trên thực tế, gridview của asp.net không support insert trực tiếp mà phải thông quan FormView hoặc DetailView. Tớ search google và biết được có 2 cách để tạo ra 1 insertable gridview.

Cách 1:  là tạo ra 1 row dữ liệu rỗng bằng cách sử dụng câu lệnh select của sql để select records của bảng kèm theo 1 record rỗng, rồi xử lý sự kiện OnRowUpdating của GridView. Tham khảo tại đây: ASP.NET GridView – Add a new record

Cách 2: sử dụng footer của gridview để hiện thị form insert row. Tham khảo bài viết của John Sanborn – Adding a New Record to the DataGrid

Tớ thích cách 2 hơn vì nó đơn giản và rõ ràng, không phải viết lại select store procedure😀. Tớ sẽ trình bày phương pháp này theo cách của mình, gồm 4 bước như dưới đây

Bài toán: cung cấp chức năng CRUD – Create Read Update Delete để quản lý bảng dữ liệu EducationUnit gồm 3 trường ID, Name, Note.

1. Viết các store procedure và Business Object (EducationUnit.cs) + DAL (EducationUnitDB.cs) + Business Layer (EducationUnitManager.cs)

2. Tạo Web page chứa gridview với datasource là 1 ObjectDatasource sử dụng các hàm của object EducationUnitManager trong Business Layer

Chú ý: bạn có thể sử dụng datasource loại khác cũng chẳng sao.  Nếu ngại thì có thể dùng Design view của VS để sinh ra SQLDatasource 1 cách nhanh chóng. mà không cần phải làm bước 1

3. Thiết lập thuộc tính ShowFooter của gridview = true.

Convert toàn bộ BoundField của GridView sang TemplateField.

Thêm FooterTemplate cho các field.

<asp:GridView ID="gvEduUnit" runat="server"
        AutoGenerateColumns="False" DataKeyNames="ID"
        DataSourceID="odsEduUnit" Width="100%" ShowFooter="True" >
        <Columns>
            <asp:TemplateField HeaderText="ID" InsertVisible="False"
                SortExpression="ID">
                <EditItemTemplate>
                    <asp:Label ID="Label1" runat="server"
                         Text='<%# Eval("ID") %>'></asp:Label>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server"
                        Text='<%# Bind("ID") %>'></asp:Label>
                </ItemTemplate>
                <HeaderStyle Width="30px" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Name" SortExpression="Name">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"
                        Text='<%# Bind("Name") %>' Width="100%"></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server"
                        Text='<%# Bind("Name") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:TextBox ID="inputName" runat="server" 
                        Width="95%"></asp:TextBox>
                </FooterTemplate>
                <ControlStyle Width="95%" />
                <HeaderStyle Width="200px" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Note" SortExpression="Note">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox2" runat="server"
                       Text='<%# Bind("Note") %>' TextMode="MultiLine">
                    </asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label3" runat="server"
                      Text='<%# Bind("Note") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:TextBox ID="inputNote" runat="server" 
                        TextMode="MultiLine" Width="95%">
                    </asp:TextBox>
                </FooterTemplate>
                <ControlStyle Width="95%" />
            </asp:TemplateField>
            <asp:TemplateField ShowHeader="False">
                <EditItemTemplate>
                <div align="right">
                    <asp:LinkButton ID="LinkButton1" runat="server"
                        CausesValidation="True" CommandName="Update">
                        <asp:Image ID="imgUpdate" runat="server"
                            ImageUrl="~/img/action_check.gif"
                            AlternateText="lưu" />
                    </asp:LinkButton>
                    <asp:LinkButton ID="LinkButton2" runat="server"
                        CausesValidation="False" CommandName="Cancel">
                        <asp:Image ID="imgCancel" runat="server"
                             ImageUrl="~/img/action_delete.gif"
                             AlternateText="hủy bỏ" />
                    </asp:LinkButton>
                </div>
                </EditItemTemplate>
                <ItemTemplate>
                <div align="right">
                    <asp:LinkButton ID="LinkButton1" runat="server"
                        CausesValidation="False" CommandName="Edit">
                        <asp:Image ID="imgEdit" runat="server"
                             ImageUrl="~/img/reply.gif"
                             AlternateText="sửa" />
                    </asp:LinkButton>
                </div>
                </ItemTemplate>
                <HeaderStyle Width="40px" />
                <FooterTemplate>
                <div align="right">
                    <asp:LinkButton ID="btnInsert" runat="server" 
                        CausesValidation="true" CommandName="Insert" 
                        OnClick="btnInsert_Click" >
                        <asp:Image ID="imgInsert" runat="server" 
                             ImageUrl="~/img/action_add.gif" 
                             AlternateText="lưu" />
                    </asp:LinkButton>
                </div>
                </FooterTemplate>
            </asp:TemplateField>
        </Columns>
        <FooterStyle VerticalAlign="Top" />
        <RowStyle VerticalAlign="Top" />
    </asp:GridView>
<asp:ObjectDataSource ID="odsEduUnit" runat="server"
    DataObjectTypeName="DHD.DMS.BusinessObject.EducationUnit"
    DeleteMethod="Delete" InsertMethod="Save" OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetList" TypeName="DHD.DMS.BusinessLayer.EducationUnitManager"
    UpdateMethod="Save">
</asp:ObjectDataSource>

Như vậy footer cho trường ID sẽ bỏ qua (bởi tớ đặt chế độ tự tăng cho ID), footer cho trường Name là một textbox (inputName), cho trường Note là multiline textbox (inputNote), footer cho cột chứa linkbutton edit là 1 linkbutton (btnInsert) với sự kiện OnClick = btnInsertClick.

4. Xử lý hàm btnInsertClick như sau:

protected void btnInsert_Click(object sender, EventArgs e)
{
    // get controls from FooterRow
    TextBox txtName = gvEduUnit.FooterRow.FindControl("inputName") as TextBox;
    TextBox txtNote = gvEduUnit.FooterRow.FindControl("inputNote") as TextBox;

    // get data from controls
    DHD.DMS.BusinessObject.EducationUnit item = new DHD.DMS.BusinessObject.EducationUnit();
    item.Name = txtName.Text;
    item.Note = txtNote.Text;

    // action to insert record into table on database
    DHD.DMS.BusinessLayer.EducationUnitManager.Save(item);

    // rebind gridview
    gvEduUnit.DataBind();
}

Kết quả:

insertableGridview

Giờ tớ đã có 1 insertable gridview hoạt động ngon lành rồi đấy!!! Phương pháp này có thể chưa thực sự hay vì trong TH đã sử dụng footer để phục vụ cho việc trình bầy thì bạn không thể dùng phương pháp này. Có lẽ ngoài 2 phương pháp tớ đã đề cập, chắc chắn còn cách khác hay hơn để có được insertable gridview (không kể sài third party :P)

  1. Hung Tran
    December 16, 2010 at 9:30 am

    Anh ơi, anh có gửi source code phần này cho em tham khảo với đc ko ạ. Em đang làm bài tập mà bị mắc chỗ này ko biết làm thế nào. cảm ơn anh nhiều


    Tranviethung2410@gmail.com

  2. freebirds2081
    March 13, 2011 at 11:47 pm

    sorry, dạo này mình nhiều việc quá. Ít viết blog.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: