ASP.NET WebForm: Lập trình form master-detail bằng control FormView và GridView

Bài viết này là 1 tutorial để các bạn đang theo học ASP.NET WebForm có thể build nhanh ra 1 form master-detail mà không cần kiến thức về kiến trúc 3 lớp. Mục tiêu là ta có website quản lý khách hàng với giao diện như sau:

Khi điền thông tin và bấm nút Insert thì dữ liệu được lưu xuống bảng danh sách bên dưới.

1. Chuẩn bị:
Visual Studio (bài viết này dùng phiên bản VS2015 Community)
SQLServer (bài viết này dùng SQL Server Express 2012)

2 .Tạo database:

create table Customers(
	CustomerId int identity primary key,
	CustomerName nvarchar(32),
	PhoneNumber nvarchar(16)
)

insert into Customers(CustomerName,PhoneNumber) values(N'Chung Vĩnh Khang', '012271xxx');
insert into Customers(CustomerName,PhoneNumber) values(N'Trần Thị Phụng', '092271xxx');

Bài viết này mình chọn phương pháp đơn giản là tạo database rồi viết ứng dụng luôn. Bỏ qua những việc thiết kế chi tiết, code first, test first,…. Tuy nhiên trong thực tế thì có thể bạn sẽ được yêu cầu làm những bước này

3 .Lập trình giao diện
ASP.NET WebForm cung cấp sẵn rất nhiều thành phần cho lập trình viên. Sau khi tạo mới project WebForm từ Visual studio, ta có thể vào trang Default.aspx xóa hết những html không cần thiết trong thẻ asp:Content. Để có master detail, ta sẽ dùng control GridView thể hiện master và FormView cho detail

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <asp:FormView runat="server"
        ID="frmCustomer"
        DefaultMode="Insert">
        <InsertItemTemplate>
            <asp:Panel DefaultButton="btnSaveCustomer" runat="server">
                <asp:TextBox ID="txtCustomerName" Text='<%# Bind("CustomerName") %>' runat="server" />
                <asp:TextBox ID="txtPhoneNumber" Text='<%# Bind("PhoneNumber") %>' runat="server" />
                <asp:Button CssClass="btn btn-sm btn-primary" ID="btnSaveCustomer" Text="Insert" CommandName="Insert" runat="server" />
            </asp:Panel>
        </InsertItemTemplate>
    </asp:FormView>

    <asp:GridView runat="server"
        ID="grdCustomers"
        CssClass="table table-bordered">
    </asp:GridView>
</asp:Content>

4 .Kết nối CSDL
Để kết nối được CSDL mà ở bước 1 tạo ở SQLServer, ta sẽ vào web.config để thêm hoặc sửa nếu đã có:

...
<connectionStrings>
    <add name="DemoFormViewConnection" connectionString="Data Source=<ten-sqlserver>;Initial Catalog=<ten-database>;Integrated Security=True"
      providerName="System.Data.SqlClient" />
  </connectionStrings>
...

Trong ASP.NET WebForm có luôn cả control để kết nối CSDL SQLServer đó là SqlDataSource. Ta sẽ tạo 2 datasource trong asp:Content. 1 cái để cho gridview connect và 1 cái để formview connect. Với yêu cầu ban đầu, thì gridview chỉ có nhiệm vụ đọc dữ liệu lên (SelectCommand) và formview chỉ có nhiệm vụ thêm mới (InsertCommand)

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <asp:FormView runat="server"
        ID="frmCustomer"
        DataSourceID="sqlCustomerDetail"
        DataKeyNames="CustomerId"
        DefaultMode="Insert">
        <InsertItemTemplate>
            <asp:Panel DefaultButton="btnSaveCustomer" runat="server">
                <asp:TextBox ID="txtCustomerName" Text='<%# Bind("CustomerName") %>' runat="server" />
                <asp:TextBox ID="txtPhoneNumber" Text='<%# Bind("PhoneNumber") %>' runat="server" />
                <asp:Button CssClass="btn btn-sm btn-primary" ID="btnSaveCustomer" Text="Insert" CommandName="Insert" runat="server" />
            </asp:Panel>
        </InsertItemTemplate>
    </asp:FormView>
    <asp:GridView runat="server"
        ID="grdCustomers"
        DataSourceID="sqlCustomers"
        CssClass="table table-bordered">
    </asp:GridView>

    <asp:SqlDataSource ID="sqlCustomers"
        SelectCommand="select CustomerId, CustomerName, PhoneNumber from Customers"
        ConnectionString="<%$ ConnectionStrings:DemoFormViewConnection %>"
        runat="server"></asp:SqlDataSource>

    <asp:SqlDataSource ID="sqlCustomerDetail"
        InsertCommand="insert into Customers(CustomerName, PhoneNumber) VALUES (@CustomerName, @PhoneNumber)"
        ConnectionString="<%$ ConnectionStrings:DemoFormViewConnection %>"
        OnInserted="sqlCustomerDetail_Inserted"
        runat="server"></asp:SqlDataSource>
</asp:Content>

Khi insert xuống thành công thì ta sẽ refresh lại grid. Do vậy ta xử lý thêm event OnInserted trong code behind

namespace DemoFormView
{
    public partial class _Default : Page
    {
        ...
        protected void sqlCustomerDetail_Inserted(object sender, SqlDataSourceStatusEventArgs e)
        {
            grdCustomers.DataBind();
        }
    }
}

Vậy là xong!

Khi xây dựng những ứng dụng phức tạp, ta thiết kế và lập trình theo kiến trúc phân tầng có thể giúp ta dễ dàng trong việc bảo trì nâng cấp. Tuy nhiên đối với 1 ứng dụng đơn giản, viết 1 lần rồi thôi thì có lẽ là không cần thiết.

Hiện tại phiên bản ASP.NET Core chưa có kế hoạch hỗ trợ Web Form. Nhưng tôi tin rằng những dạng server-side render framework (ASP.NET Core, Vaadin, JSF,…) sẽ còn áp dụng rất nhiều trong phát triển phần mềm.

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s