Để làm việc với dữ liệu (XML, cơ sở dữ liệu, …), ASP.NET cung cấp hai nhóm controls là nhóm data-bound controls dùng để hiển thị và chỉnh sửa dữ liệu và nhóm data source controls dùng để nhận dữ liệu từ các nguồn dữ liệu như tập tin XML hay cơ sở dữ liệu.

Data – bound controls gồm 7 controls trong mục Data của Toolbox được phân thành 3 nhóm:

  • List controls: cho phép hiển thị nhiều hàng dữ liệu tại cùng một thời điểm, hỗ trợ tính năng phân trang (các hàng được tách thành nhiều nhóm trong các trang khác nhau). Các controls trong nhóm này gồm: GridView, DataList, ListViewRepeater.
  • Single Item controls: chỉ hiển thị một hàng (bản ghi) tại một thời điểm. Các controls trong nhóm này gồm DetailsView FormView.
  • Paging controls: cho phép phân trang trên các controls khác. Nhóm này chỉ có DataPager và dùng nó để hỗ trợ chủ yếu trong ListView.

Data source controls gồm 6 controls trong mục Data của Toolbox gồm XmlDataSource, SitemapDataSource (dùng với dữ liệu XML), ObjectDataSource (dùng cho các đối tượng), SqlDataSource, EntityDataSource (cơ sở dữ liệu) và LinqDataSource (dùng cho LINQ).

Trong chương này chúng ta sẽ làm việc với cơ sở dữ liệu được tạo và quản lý bởi SQL Server (2008 hay 2012). Kiến thức về cơ sở dữ liệu quan hệ, ngôn ngữ truy vấn SQL, hệ quản trị cơ sở dữ liệ SQL Server xem như chúng ta đã nắm rõ.

Chuẩn bị cơ sở dữ liệu

  • Đăng nhập vào SQL Server, nhấp chuột phải vào Databases chọn New Database. Trong hộp thoại New Database gõ tên cơ sở dữ liệu trong Database name (ví dụ ngocminhtran) và chọn vị trí lưu (tìm đến mục Path trong Database files và nhấn button bên phải để tìm đường dẫn) là thư mục App_Data trong Site của chúng ta (lấy đường dẫn bằng cách trở lại VS, trong Solution Explorer, tìm đến thư mục App_Data và nhấp chuột phải vào nó chọn Open Folder in File Explorer ở cuối sẽ chuyến chúng ta đến thư mục App_Data. Copy đường dẫn và Paste vào Path trong SQL Server)

  • Trong cơ sở dữ liệu (ngocminhtran) chúng ta tạo hai bảng là GenreReview có mối quan hệ một (Genre) – nhiều (Review). Các thuộc tính của hai bảng, kiểu dữ liệu và khoá như sau:

Bảng Genre

Bảng Review

Lượt đồ quan hệ hai bảng:

Dữ liệu bảng Genre:

Dữ liệu bảng Review:

Thao tác dữ liệu với GridView và SqlDataSource

Khi đã tạo xong cơ sở dữ liệu (ngocminhtran) và các bảng của nó (GenreReview), kế tiếp chúng ta sẽ tìm hiểu cách sử dụng các data-bound control (GridView) và data source control (SqlDataSource) thông qua bài thực hành sau:

Thực hành dùng GridView và SqlDataSource

  • Nhấp chuột phải vào thư mục MasterPages chọn Add > Add New Item và thêm một trang master tên Management.master  với các tuỳ chọn như sau:

  • Thêm một thư mục tên Management (cùng cấp với thư mục MasterPages), trong thư mục này thêm một trang tên Default.aspx  (kiểu Web Form và chọn trang master là Management.master):

  • Thêm giá trị cho thuộc tính TitleManagement – Home, trang Default.aspx ở chế độ Source như sau:

  • Thêm một trang aspx khác vào thư mục Management tên Genres.aspx  (tuỳ chọn giống Default.aspx), với giá trị thuộc tính TitleManagement – Genre.
  • Lưu và tạm đóng hai trang Default.aspxGenres.aspx. Mở lại trang Management.master ở chế độ Source, xoá hết nội dung trong <form> và thêm đoạn mã sau trong <form>:

  • Lưu và đóng trang master. Mở lại trang Default.aspx  trong thư mục ở chế độ Source, trong Content2, thay đổi giá trị của thuộc tính ContentPlaceHolderID từ ContentPlaceHolder1 thành cpMainContent và thêm vài dòng mã vào phần cpMainContent này như sau:

  • Lưu và đóng trang Default.aspx. Mở lại trang Genres.aspx ở chế độ Source và cũng trong Content2, thay đổi giá trị của thuộc tính ContentPlaceHolderID từ ContentPlaceHolder1 thành cpMainContent. Mở trang ở chế độ Design.
  • Trong thư mục App_Data, nhấp đôi chuột vào ngocminhtran.mdf  để mở Server Explorer, nếu phát sinh lỗi như sau:

  • Thì khi nhấn OK cửa sổ Server Explorer sẽ trông như thế này:

  • Nhấp chuột phải vào ngocminhtran.mdf và chọn Delete để xoá nó. Nhấp lại chuột phải vào Data Connections chọn Add Connection sẽ hiện hộp thoại:

  • Trong Server Name nhập thông tin lấy từ Server name khi đăng nhập SQL Server Management:

  • Nếu nhấn nút Test Connection và kết nối thành công thì sẽ hiện thị:

  • Nhấn OK, Server Explorer lúc này như sau:

  • Lúc này chúng ta thấy hai bảng GenreReview.
  • Kéo bảng Genre từ Server Explorer và thả vào vùng cpMainContent của trang Genres.aspx. VS sẽ tự động phát sinh GridViewSqlDataSource

  • Check vào tất cả các tuỳ chọn trong GridView Tasks:

  • Thêm một file Web.config  chỉ dành riêng cho thư mục Management (phân biệt với Web.config của toàn bộ website) bằng cách nhấp chuột phải vào Mangement chọn Add > Add New Item và chọn Web Configuration File, giữ nguyên tên là Web.config và nhấn Add. Thêm phần tử <pages> vào trong <system.web> với thuộc tính theme để rỗng, nghĩa là không dùng bất kì theme nào của website:

  • Lưu tất cả. Chọn trang Genres.aspx  và Ctrl + F5 và thử một số chức năng xử lí dữ liệu như Edit, SortOrder,…

DetailsView control

Trong bài thực hành trên chúng ta đã thực hiện hiển thị, cập nhật và xoá dữ liệu một cách dễ dàng với GridView; việc thêm dữ liệu cũng có thể thực hiện dễ dàng với DetailsView. DetailsView sẽ hiển thị theo những chế độ khác nhau phụ thuộc vào việc chúng ta chọn template cho nó. Một số template gồm HeaderTemplate (định nghĩa bởi <HeaderTemplate>), FooterTemplate (<FooterTemplate> ), PagerTemplate (<PagerTemplate>). Bên cạnh đó, DetailsView có phần tử <Fields> cho phép chúng ta định nghĩa cách hiển thị các hàng trong DetailsView. DetailsView cũng có thuộc tính DefaultMode với những chế độ khác nhau như ReadOnly, Insert hay Edit. Chúng ta sẽ thực hiện bài thực hành dưới đây để hiểu rõ hơn về DetailsView.

Thực hành thêm dữ liệu với DetailsView

Trong bài này chúng ta sẽ cho phép người dùng thêm các hàng mới vào bảng Genre với DetailsView.

  • Mở trang Genres.aspx  trong thư mục Management ở chế độ Design. Kéo DetailsView control từ mục Data trong Toolbox và thả vào vị trí giữa GridViewSqlDataSource:

  • Trong DetailsView Tasks (nếu chưa mở thì nhấp vào dấu mũi tên bên phải DetailsView) chọn SqlDataSource1trong Choose Data Source và check vào mục Enable Inserting

  • Nhấp chuột phải vào DetailsView và chọn Properties, tìm đến thuộc tính DefaultMode và thiết lập giá trị là Insert

  • Lưu tất cả và Ctrl + F5. Nhập thông tin vào NameSortOrder, nhấp Insert và xem kết quả.

Khi chúng ta kéo và thả bảng Genre vào trang Genres.aspx, VS không chỉ tạo ra các controls (như SqlDataSource) tương ứng mà còn lưu trữ thông tin về cơ sở dữ liệu của chúng ta trong Web.config (của Site, không phải Web.config trong Management). Cụ thể, Web.config lưu trữ thông tin về chuỗi kết nối chứa các thông tin liên quan đến cơ sở dữ liệu trong phần tử <connectionStrings>:

SqlDataSource sẽ truy cập đến cơ sở dữ liệu thông qua chuỗi kết nối này. Có thể thấy điều này bằng cách mở trang Genres.aspx ở chế độ Source:

Nhìn kĩ hơn về chuỗi kết nối với một số thuộc tính:


<connectionStrings>

<add name="ngocminhtranConnectionString1" connectionString="Data Source=Admin-PC0617iey\SQLEXPRESS;Initial Catalog=ngocminhtran;Integrated Security=True" providerName="System.Data.SqlClient" />

</connectionStrings>

Thuộc tính connectionString (của phần tử <add> trong <connectionString>)chứa một số thông tin về cơ sở dữ liêu:

Data Source Xác định SQL Server trên máy cục bộ. Trong trường hợp trên là SQL Server Express.
Initial Catalog Tham chiếu đến cơ sở dữ liệu hợp lệ trên SQL Server.
Integrated Security Hỗ trợ bảo mật.
AttachDbFileName Đường dẫn đến tập tin cơ sở dữ liệu (*.mdf)

Thuộc tính providerName cung cấp thông tin về nhà cung cấp dịch vụ, trong trường hợp trên là SQL Server.

Xem thuộc tính ConnectionString của SqlDataSource (trong trang Genres.aspx chế độ Source):


<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ngocminhtranConnectionString1 %>" DeleteCommand="DELETE FROM [Genre] WHERE [Id] = @Id" InsertCommand="INSERT INTO [Genre] ([Name], [SortOrder]) VALUES (@Name, @SortOrder)" ProviderName="<%$ ConnectionStrings:ngocminhtranConnectionString1.ProviderName %>" SelectCommand="SELECT [Id], [Name], [SortOrder] FROM [Genre]" UpdateCommand="UPDATE [Genre] SET [Name] = @Name, [SortOrder] = @SortOrder WHERE [Id] = @Id">

Trong thuộc tính này chứa các lệnh SQL vể thêm (InsertCommand), xoá (DeleteCommand), sửa (UpdateCommand), hiển thị dữ liệu (SelectCommand).

Trích lọc dữ liệu (filtering data)

Một trong những chức năng cơ bản của hệ thống quản lí thông tin (website, phần mềm) là không những chỉ hiển thị toàn bộ thông tin mà còn hiển thị thông tin theo nhu cầu (người dùng, phòng ban, các nhóm khác,…). Để hiển thị thông tin theo nhu cầu, chúng ta dùng chức năng trích lọc dữ liệu (filtering data). SqlDataSource có phần tử <SelectParameters> cho phép chúng ta trích lọc dữ liệu tuỳ vào các giá trị chúng ta thiết lập cho phần tử này. Các giá trị này đến từ các nguồn phụ thuộc vào các tham số sau:

Tham số Nguồn
ControlParameter Một control bất kì trong trang, ví dụ textbox
CookieParameter Cookie lưu trữ trên máy người dùng
FormParameter Dữ liệu từ form được gửi đến server
Parameter Chọn nguồn tuỳ ý thông qua viết mã
ProfileParameter Profile (thông tin) người dùng
QueryStringParameter Từ các trường trong chuỗi truy vấn
SessionParameter Từ session

Để hiểu rõ hơn, chúng ta sẽ thực hành trích lọc dữ liệu thông qua tham số ControlParameter và nguồn là DropDownList. Bài thực hành chia thành hai bước là Cài đặt các tham số trích lọcỨng dụng trích lọc đến trang.

Ý tưởng bài thực hành là lọc các thông tin trong bảng Review theo Genre.

Thực hành cài đặt các tham số trích lọc

  • Tạo một trang mới Reviews.aspx  (các tuỳ chọn tương tự hai trang Default.aspxGenres.aspx) trong thư mục Management. Tiêu đề trang trong thuộc tính TitleManagement Reviews.
  • Mở trang Management.master  ở chế độ Source và thêm một liên kết đến trang Reviews.aspx vừa tạo:

  • Lưu, đóng trang master. Trở lại trang Reviews.aspx  ở chế độ Design. Kéo một DropDownList trong mục Standard của Toolbox thả vào vùng cpMainContent của trang Reviews.aspx. Trong DropDownList Tasks (nhấp vào mũi tên bên phải) chọn Enable AutoPostBack, nhấp vào Edit Items, thêm một item với thuộc tính TextMake a selectionValue (được thêm tự động) như sau

  • Nhấp OK trở lại DropDownList Tasks, chọn Choose Data Source và chọn <New data source> từ hộp thoại hiện ra, hộp thoại sẽ xuất hiện như sau:

  • Nhấp chuột vào Database để thiết lập IDSqlDataSource1OK:

  • Chọn chuỗi kết nối tên ngocminhtranConnectionString1 trong hộp thoại tiếp theo và nhấn Next

  • Chọn các mục như hình dưới, nhấn vào nút ORDER BY chọn SortOrderOK. Giao diện hộp thoại sau khi chọn:

  • Nhấp NextFinish trở lại hộp thoại Data Source Configuration Wizard.
  • Trong hộp thoại Data Source Configuration Wizard thiết lập Name trong DropDownList thứ nhất và Id cho DropDownList thứ hai và OK

  • Nhấp chuột phải vào DropDownList trong trang Reviews chế độ Design chọn Properties và tìm đến thuộc tính AppendDataBoundItems và thiết lập giá trị là True

  • Chuyển trang Reviews.aspx  sang chế độ Source, tìm đến ListItem của DropDownList và thêm thuộc tính Value với giá trị là chuỗi rỗng

  • Lưu và Ctrl + F5 và lưu ý rằng, khi chọn một mục trong DropDownList sẽ chưa có gì xảy ra.

Ứng dụng trích lọc đến trang

Trong bài thực hành tiếp theo này, chúng ta sẽ thêm một SqlDataSource khác để lấy dữ liệ từ bảng Review. Nhờ tạo trích lọc với DropDownList ở trên, chúng ta sẽ hạn chế dữ liệu sẽ xuất hiện ra GridView (một GridView mới).

Thực hành ứng dụng trích lọc dữ liệu

  • Chuyển trang Reviews.aspx  sang chế độ Design. Kéo một GridView từ mục Data trong Toolbox thả vào ngay trên SqlDataSource đã tồn tại trong trang

  • Trong GridView Tasks (nhấp mũi tên bên phải của GridView), tại mục Choose Data Source chọn <New data source>. Trong hộp thoại Data Source Configuration Wizard chọn DatabaseOK.
  • Trong hộp thoại kế tiếp chọn ngocminhtranConnectionString1 và nhấn Next.
  • Chọn Review trong mục Name, giữ nguyên chọn *, nhấn nút WHERE và nhập các thông tin sau trong hộp thoại Add WHERE Clause:

  • Nhấp nút Add để thêm thông tin vào mục WHERE clause ở dưới và OK.

  • Hộp thoại Data Source Configuration Wizard lúc này

  • Nhấn Next. Chúng ta có thể nhấp vào nút Test Query để xem kết quả câu lệnh truy vấn của chúng ta bằng cách nhập một giá trị vào ô Value (một giá trị của GenreId từ bảng Review), ví dụ 2, kết quả:Nhấn Finish. Lưu tất cả và Ctrl + F5, thử chọn một mục nào đó trong DropDownList và xem kết quả

Giao diện thân thiện người dùng

Trong các bài thực hành trên, chúng ta dùng GridView hay DetailsView để hiển thị dữ liệu người dùng một cách mặc định và đôi khi không thân thiện với người dùng. VS cung cấp một số cách thức giúp chúng ta có thể thay đổi, điều chỉnh giao diện các controls để chúng trở nên thân thiện hơn với người dùng.

Cấu hình các cột (columns hay fields) của data bound controls

Với GridView hay DetailsView, có hai phần tử là <Columns> và <Fields> giúp chúng ta cấu hình cho các cột của các controls này bằng cách thêm một số kiểu sau:

BoundField Mặc định cho hầu hết các kiểu cơ sở dữ liệu, hiển thị ra như một đoạn văn bản đơn giản chỉ đọc hay như một textbox ở chế độ soạn thảo.
ButtonField Hiển thị ra như một nút nhấn hay liên kết để thực hiện một lệnh nào đó trên server.
CheckBoxField Hiển thị như một check box.
CommandField Cho phép thiết lập các lệnh khác nhau như thêm, xoá, sửa,…
HyperLinkField Hiển thị như một liên kết (thẻ <a>).
ImageField Hiển thị ảnh (thẻ img).
TemplateField Cho phép chúng ta định nghĩa cách hiển thị thông qua các template như ItemTemplate, InsertItemTemplate, EditItemTemplate.

Như vậy, tuỳ vào các mục đích khác nhau mà chúng ta sử dụng các field khác nhau. Bài thực hành kế tiếp sẽ giúp chúng ta làm quen với cách cấu hình các cột.

Thực hành cấu hình các cột cho GridView và DetailsView

  • Mở trang Reviews.aspx  ở chế độ Design, tìm đến SqlDataSource2 và nhấp vào Configure Data Source trong SqlDataSource Tasks (nhấp vào mũi tên bên phải). Nhấp Next và cập nhật thông tin trong hộp thoại xuất hiện sau đó:

  • Nhấp vào nút Advance…và cho VS phát sinh các lệnh SQL UPDATE, INSERT, DELETE bằng cách check vào checkbox đầu tiên trong hộp thoại Advanced SQL Generation Options và để trống checkbox Use optimistic concurrency (giúp phát hiện sự thay đổi của hàng kể từ lần tải cuối cùng)

  • Nhấp OK để đóng hộp thoại Advance…
  • Nhấn Next, Finish. Nếu hộp thoại dưới đây xuất hiện thì nhấn Yes

  • Mở GridView Tasks (nhấn nút mũi tên bên phải GridView) và chọn Edit Columns. Khi hộp thoại Fields xuất hiện, xoá tất cả các thông tin trong mục Selected fields bằng cách chọn từng mục và nhấn nút Delete (có dấu X)

  • Trong mục Available fields, tìm đến BoundField, chọn Authorized và nhấn Add để thêm vào Selected fields

  • Tương tự chọn CreateDateTime trong BoundFieldAdd

  • Trong Available fields chọn HyperLinkField và nhấn Add để thêm vào Selected fields. Trong Selected fields di chuyển HyperLinkField lên đầu bằng nút

  • Vẫn chọn HyperLinkField và thay đổi một số thuộc tính của nó trong khung HyperLinkField Properties bên phải
Thuộc tính Giá trị
HeaderText Title
DataNavigateUrlFields Id
DataNavigateUrlFormatString AddEditReview.aspx?Id={0}
DataTextField Title

  • Trong Available fields chọn CommandField và nhấn Add. Thiết lập các thuộc tính cho CommandField trong CommandField Properties:
Thuộc tính Giá trị
HeaderText Delete
ShowDeleteButton True
  • Hộp thoại Fields lúc nay:

  • Nhấp chuột vào Authorized trong Selected fields và nhấn chuột vào liên kết Convert this filed into a TemplateField

  • Nhấp chuột vào CreateDateTime trong Selected fields và thiết lập giá trị cho thuộc tính DataFormatString của nó ở cửa sổ bên phải là {0:g}.
  • Nhấp OK. Chuyển trang Reviews.aspx sang chế độ Source, tìm đến phần tử <EditItemTemplate> của Authorized và xoá nó vì chúng ta muốn GridView chỉ cần hiển thị ở chế độ chỉ đọc, không cần chỉnh sửa. Trong phần tử <ItemTemplate> cũng của Authorized chỉnh sửa Label như sau:

  • Chúng ta thấy lỗi xuất hiện tại phương thức GetBooleanText vì ta chưa định nghĩa nó và sẽ được định nghĩa ở bước kế tiếp.
  • Mở file Reviews.aspx.vb  và định nghĩa GetBooleanText như sau:

  • Lưu và đóng file Reviews.aspx.vb. Trở lại trang Reviews.aspx và Ctrl + F5:

Cập nhật và thêm dữ liệu

Ở phần trên, chúng ta đã thao tác dữ liệu với GridViewSqlDataSource và mặc dù chúng khá tốt (chúng ta có thể cảm nhận được điều này qua các bài thực hành ở trên), nhưng vẫn không đáp ứng một cách đầy đủ các yêu cầu trong những bối cảnh rộng hơn. VS cung cấp thêm FormViewDetailsView để mở rộng các giải pháp tương tác với dữ liệu. Phần kế tiếp sẽ tìm hiểu và thực hành với DetailsView ở mức nâng cao hơn (so với cách dùng ở phần thực hành với DetaisView ở trên).

Dùng DetailsView để thêm và cập nhật dữ liệu

Trong bài thực hành dùng DetailsView để thêm dữ liệu ở trên, chúng ta dùng DetailsView trong một phạm vi hẹp. Một số tình huống rộng hơn có thể thực hiện với DetailsView như thay vì dùng các textbox đơn giản chúng ta có thể dùng DropDownList, thêm vào một số validation controls, hay quản lí dữ liệu được gửi đến cơ sở dữ liệu. Trước khi đến với bài thực hành sử dụng các tính năng mở rộng của DetailsView, chúng ta sẽ làm quen với một số sự kiện tồn tại trong suốt chu kỳ sống của các controls như DetailsView, FormViewListView như bảng dưới đây:

Sự kiện Mô tả
ItemInserting Kích hoạt ngay trước khi lệnh Insert được thực thi đến data source. Đây là lúc thích hợp nhất để thay đổi dữ liệu trước khi được gửi đến database.
ItemInserted Kích hoạt sau khi lệnh Insert thực thi.
ItemDeleting Kích hoạt ngay trước khi lệnh Delete được thực thi đến data source.
ItemDeleted Kích hoạt sau khi lệnh Delete thực thi.
ItemUpdating Kích hoạt ngay trước khi lệnh Update được thực thi đến data source.
ItemUpdated Kích hoạt sau khi lệnh Update thực thi.

GridView cũng có các sự kiện tương tự nhưng thay vì bắt đầu bằng Item, chúng bắt đầu bằng Row, ví dụ RowInserting. DataList Repeater không có các sự kiện này vì không hỗ trợ tính năng chỉnh sửa dữ liệu.Trong bài thực hành dưới đây chúng ta sẽ dùng DetailsView và các sự kiện của nó.

Thực hành dùng DetailsView để thêm và cập nhật dữ liệu

  • Trong thư mục Management tạo trang AddEditReview.aspx  (tương tự cách tạo trang Reviews.aspx) với TitleManagement – Insert and Update Reviews.
  • Chuyển trang sang chế độ Design và thêm một DetailsView control từ Toolbox vào trang. Trong DetailsView Tasks từ hộp danh sách Choose Data Source chọn <New data source>. Chọn biểu tượng Database và nhấp OK. Chọn chuỗi kết nối ngocminhtranConnectionString1 từ hộp thoại xuất hiện và nhấn Next.
  • Trong hộp thoại xuất hiện ngay sau khi nhấn Next, chọn tất cả các cột trong mục Columns của bảng Review, ngoại trừ cột CreateDateTime:

  • Nhấn vào button WHERE và điều chỉnh một số thông tin trong hộp thoại Add WHERE Clause như sau:

  • Nhấp Add và nhấn OK. Nhìn lại lệnh trong SELECT statement trong hộp thoại Configure Data Source (so sánh với hình ở bước 3):

  • Nhấn vào nút Advanced… chọn Generate INSERT, UPDATE, and DELETE statements và nhấp OK. Nhấp NextFinish.
  • Trong DetailsView Tasks (nhấp mũi tên bên phải DetailsView) chọn Enable InsertingEnable Deleting

  • Thiết lập thuộc tính DefaultMode của DetailsView đến Insert.
  • Nhấp đôi chuột vào vùng xám (vùng chỉ đọc) của trang để đến trình xử lí sự kiện Page_Load và thêm đoạn mã sau:

  • Mở trang Reviews.aspx ở chế độ Design và kéo trang AddEditReview.aspx  từ cửa sổ Solution Explorer và thả vào dưới GridView – việc làm này sẽ thêm một liên kết từ trang Reviews.aspx đến trang AddEditReview.aspx

  • Chuyển trang Reviews.aspx sang chế độ Source và thay đổi dòng text của liên kết này thành Insert new review

  • Lưu và đóng trang Review.aspx. Mở trang AddEditReview.aspx và Ctrl + F5. Điền một vài thông tin và nhấp link Insert:

  • Lúc này thông tin vừa nhập sẽ được thêm vào cơ sở dữ liệu. Để xem thông tin vừa nhập, chúng ta để ý GenreId là 3 (tương ứng với Jazz trong bảng Genre), nhấp vào liên kết Manage Reviews và chọn Jazz:

  • Để thêm review mới chúng ta có thể nhấp vào Insert new review.

Giao diện DetailsView lúc này trông đơn giản và chưa ấn tượng. Trong bài thực hành kế tiếp, chúng ta sẽ thêm một vài chức năng mở rộng đến DetailsView như dùng các template tuỳ chọn, thêm các validation controls, hay thêm một số sự kiện.

Thực hành nâng cao với DetailsView

  • Mở trang AddEditReview.aspx  trong chế độ Design, mở DetailsView Tasks chọn Edit Fields. Chọn UpdateDateTime trong Selected Fields và thiết lập giá trị False cho thuộc tính Visible ở cửa sổ Properties bên phải.
  • Cũng trong Selected Fields, chọn Title và nhấp vào liên kết Convert this field into a TemplateField. Làm tương tự với Summary, Body, và GenreId. Nhấp OK đóng cửa sổ Fields.
  • Chuyển trang sang chế độ Source. Tìm đến các textbox của BodySummary thêm các thuộc tính TextMode (giá trị MultiLine), Width (giá trị 500), và Height (giá trị 100), cụ thể với Summary:

  • Với Body:

  • Trong Summary, Title thêm dưới mỗi textbox một RequireFieldValidator control bằng cách kéo nó từ mục Validation của Toolbox và thả vào dưới textbox, Title lúc này:

  • Trong mỗi RequireFieldValidator thêm thuộc tính ControlToValidate với giá trị là giá trị thuộc tính ID của textbox tương ứng, trong Title lúc này như sau:

  • Quá trình thực hiện tương tự với Summary như sau:

  • Mở trang sang chế độ Design. Thêm một SqlDataSource từ Data của Toolbox vào dưới SqlDataSource1 có sẵn trong trang. Chọn Configure Data Source từ SqlDataSource Tasks của SqlDataSource2:

  • Chọn ngocminhtranConnectionString1 trong hộp thoại xuất hiện sau đó và nhấn Next. Chọn IdName trong Columns, nhấn nút ORDER BY chọn SortOrder từ Sort by, kết quả như sau:

  • Nhấp NextFinish.
  • Thay đổi giá trị thuộc tính ID của SqlDataSource2 thành GenresDataSource.
  • Chuyển trang sang chế độ Source, tìm đến GereId của DetailsView, tại InsertIemTemplate xoá textbox có sẵn và thay bằng một DropDownList từ Toolbox như sau:

  • Chuyển trang sang Design. Nhấp chuột phải vào DetailsView và chọn EditTemplate > Field[4] – GenreId, nếu không xuất hiện mục này thì chọn một hàng nào đó, ví dụ như Body, trong DetailsView và nhấp chuột phải

  • Kết quả:

  • Mở DropDownList Tasks, chọn Choose Data Source

  • Chọn GenresDataSource ở bước kế tiếp, chọn NameId ở các mục thứ hai và thứ ba, nếu NameId không xuất hiện thì nhấn dòng liên kết Refresh Schema ở dưới

  • Nhấp OK đóng hộp thoại.
  • Trở lại DropDownList Tasks chọn Edit DataBindings. Trong hộp thoại xuất hiện kế tiếp chọn SelectedValue trong danh sách bên trái và chọn GenreId từ Bound to, chú ý nếu tuỳ chọn Field binding hiện chế độ chỉ đọc (tức không cho phép chọn) như hình dưới thì chọn Refresh Schema và nhấp OK trong hộp thoại xuất hiện sau đó:

  • Sau khi chọn Refresh Schema và nhấp OK

  • Nhấp OK. Mở trang sang chế độ Source, tìm đến GenreId sẽ có mã như sau trong InsertItemTemplate:

  • Xoá toàn bộ đoạn mã Textbox trong EditItemTemplate và sao chép đoạn mã trong InsertItemTemplate thay thế cho đoạn mã vừa xoá, lúc này đoạn mã trong GenreId

  • Nhấp chuột phải vào DetailsView và chọn Properties. Trong cửa sổ Properties, chọn biểu tượng Events (hình tia chớp)

  • Chọn lần lượt các sự kiện ItemInserted, ItemInserting, ItemUpdated, ItemUpdating. Mỗi lần chọn một sự kiện, ví dụ ItemInserted, VS sẽ chuyển đến cửa sổ soạn thảo mã Visual Basic, ví dụ khi chọn ItemInserted sẽ chuyển đến trình xử lí sự kiện này như sau:

  • Trở lại cửa sổ Properties sẽ như thế này:

  • Tương tự với các sự kiện còn lại, kết quả:

  • Vào trình soạn thảo Visual Basic, tìm đến các trình xử lí sự kiện vừa thêm vào và thêm các đoạn mã như sau:

  • Lưu tất cả. Chọn trang AddEditReview.aspx và Ctrl + F5. Chưa nhập thông tin và nhấn Insert, kết quả

  • Nhập thông tin và nhấn Insert trở lại sẽ chuyển đến trang Reviews.aspx: