ASP.NET Dynamic Data

Bài viết này được dịch lại từ http://mattberseth.com/blog/2008/08/aspnet_dynamic_data_simple_5_t.html, bài viết giới thiệu một kiểu ASP.NET web application mới được đưa ra từ bản .NET 3.5 SP1: Dynamic Data Web Application.

Tôi đã khắc khoải chờ đợi ngày Dynamic Data được phát hành. Và giờ thì nó đây (đã được phát hành cùng với VS 2008 và .NET 3.5 SP1) Tôi quyết định thử xem nó có gì bằng cách thử tạo một ứng dụng web Dynamic Data cho phép bạn duyệt qua 5 bảng chính có trong CSDL Northwind: Customers, Employees, Orders, Products and Suppliers. Hãy đọc một cách chi tiết và dừng quên download mã nguồn.  Dịch vụ DiscountASP hiện chưa hoàn toàn nâng cấp lên SP1 nên tôi không thể cài một bản demo cho chương trình này. Hi vọng là họ sẽ nâng cấp sớm, nhưng tôi cũng đảm bảo là sẽ có nhiều ảnh chụp màn hình để bạn có thể xem và thấy được nó thế nào.

Dynamic Data là gì?

Tôi luôn theo sát ASP.NET, nhưng tôi không biết là Dynamic Data đã được đưa vào bản SP1. Tôi hỏi một số đồng nghiệp và họ cũng tỏ vẻ ngạc nhiên. Và không ít người thậm chí chưa từng nghe về Dynamic Data. Nếu bạn rơi vào trường hợp này, thì vài đoạn trích dẫn dau đây sẽ mô tả Dynamic Data là gì.

Từ Wikipedia …

ASP.NET Dynamic Data is a web application scaffolding framework from Microsoft, shipped as an extension to ASP.NET, that can be used to build data driven web applications. It exposes tables in a database by encoding it in the URI of the ASP.NET web service, and the data in the table is automatically rendered to HTML. The process of rendering can be controlled using custom design templates. Internally, it discovers the database schema by using the database metadata. (nguyên gốc)

From asp.net …

ASP.NET Dynamic Data provides a framework that enables you to quickly build a functional data-driven application, based on a LINQ to SQL or Entity Framework data model. It also adds great flexibility and functionality to the DetailsView, FormView, GridView, and ListView controls in the form of smart validation and the ability to easily change the display of these controls using templates.(nguyên gốc)

Nôm na ASP.NET Dynamic Data là một bộ khung cho phép xây dựng các ứng dụng nặng về dữ liệu, dựa trên LINQ to SQL hoặc Entity Framework. Dựa trên cấu trúc của CSDL mà Dynamic Data Framework (DDF)  sẽ tạo nên các trang web cho phép người dùng xem/chèn/xóa/sửa dữ liệu. Ngoài ra, nó còn cho phép tùy biến để người dùng có thể thêm vào các cơ chế kiểm tra tính hợp lệ của dữ liệu, hoặc chỉnh sửa lại các mẫu để thay đổi cách hiển thị dữ liệu – NG.

Và với chương trình mẫu này, tôi sẽ dùng Dynamic Data để tạo một ứng dụng web cho phép tôi duyệt qua CSDL Northwind.

Tạo một website Dynamic Data

Để bắt đầu, bạn hãy chọn File -> New -> Web Site và chọn Dynamic Data Entities Web Site hay Dynamic Data Web Site. Nếu bạn đang định dùng ADO.NET Entity Framework để truy cập dữ liệu thì chọn cái thứ nhất, ngược lại, nếu dùng LINQ to SQL thì hãy chọn cái thứ hai. Với ví dụ này tôi sẽ dùng LINQ to SQL, do vậy tôi chọn Dynamic Data Web Site.

Khi VS đã tạo xong, bạn sẽ thấy một số file/folder được đưa vào trong solution. Trong đó sẽ có một folder có tên là DynamicData, bên trong chứa một số các folder khác, và trong mỗi folder con này sẽ chứa các UserControl và các trang ASP.NET.

Tạo và đăng ký LINQ to SQL DataContext

Tôi dự định dùng LINQ to SQL để truy cập vào CSDL Northwind, vậy nên tôi dùng VS designer để tạo các lớp LINQ to SQL cho các bảng tôi muốn bằng cách kéo các bảng này từ Server Explorer và thả nó lên trên trình thiết kế LINQ to SQL.

Sau khi tạo ra DataContext, tôi cập nhật file Global.asax và đăng ký NorthwindDataContext với hệ thống DynamicData. Website được tạo ra đã chứa sẵn mã lệnh để làm những điều này, bạn chỉ cần đọc các đoạn ghi chú và sửa lại code theo cách bạn muốn. Và sau khi chỉnh sửa, nó sẽ trông như sau:

   1: public static void RegisterRoutes(RouteCollection routes) {

   2:     MetaModel model = new MetaModel();

   3:

   4:     //                    IMPORTANT: DATA MODEL REGISTRATION 

   5:     // Uncomment this line to register LINQ to SQL classes or an ADO.NET Entity Data

   6:     // model for ASP.NET Dynamic Data. Set ScaffoldAllTables = true only if you are sure 

   7:     // that you want all tables in the data model to support a scaffold (i.e. templates) 

   8:     // view. To control scaffolding for individual tables, create a partial class for 

   9:     // the table and apply the [Scaffold(true)] attribute to the partial class.

  10:     // Note: Make sure that you change "YourDataContextType" to the name of the data context

  11:     // class in your application.

  12:     model.RegisterContext(typeof(NorthwindDataContext), new ContextConfiguration() { ScaffoldAllTables = true });

  13: 

  14:     // The following statement supports separate-page mode, where the List, Detail, Insert, and 

  15:     // Update tasks are performed by using separate pages. To enable this mode, uncomment the following 

  16:     // route definition, and comment out the route definitions in the combined-page mode section that follows.

  17:     routes.Add(new DynamicDataRoute("{table}/{action}.aspx") {

  18:         Constraints = new RouteValueDictionary(new { action = "List|Details|Edit|Insert" }),

  19:         Model = model

  20:     });

  21: 

  22:     // The following statements support combined-page mode, where the List, Detail, Insert, and

  23:     // Update tasks are performed by using the same page. To enable this mode, uncomment the

  24:     // following routes and comment out the route definition in the separate-page mode section above.

  25:     //routes.Add(new DynamicDataRoute("{table}/ListDetails.aspx") {

  26:     //    Action = PageAction.List,

  27:     //    ViewName = "ListDetails",

  28:     //    Model = model

  29:     //});

  30: 

  31:     //routes.Add(new DynamicDataRoute("{table}/ListDetails.aspx") {

  32:     //    Action = PageAction.Details,

  33:     //    ViewName = "ListDetails",

  34:     //    Model = model

  35:     //});

  36: }

Và sau khi hoàn thành, bạn sẽ có một website trông rất “xinh” và nhiều tính năng. Trên trang chính sẽ hiện ra tất cả các bảng mà bạn có:

Và các trang để xem nội dung chứa trong các bảng (cho phép sắp xếp và phân trang):

Và cả các trang để nhập thêm, cập nhật và xem chi tiết:

Tùy biến

Nếu tôi đã hài lòng với những gì các trang mặc nhiên có, tôi có thể ngừng tại đây và có một ứng dụng web hỗ trợ đầy đủ các thao tác CRUD (create, read, update, delete). Thật tuyệt, và bạn chỉ mất có 5 phút. Nhưng liệu tôi có thể thay đổi một số thứ không?

Tùy biến List Page Template

List template được đặt trong  folder DynamicData/PageTemplates. Trang List mặc nhiên trông đã khá tốt rồi, nhưng tôi vẫn muốn thử xem liệu có thể thay đổi một vài thứ hay không. Vậy nên tôi mởi file List.aspx và thực hiện một số thay đổi.

• Đầu tiên, tôi thêm một viền đen bằng cách đặt GridView vào trong một dãy các thẻ DIV dùng hình nền để tạo kiểu cho đường viền. 
• Tiếp theo, tôi tăng PageSize từ 10 lên 15.
• Sau đó thêm một Data Pager.
• Cuối cùng, tôi muốn trang web này là chỉ đọc, nên tôi xóa các liên kết Insert, Edit và Delete.

Chỉ là những thay đổi nhỏ, nhưng giao diện đã được cải tiến.

Tùy biến Details Page Template

Tiếp theo, tôi thay đổi trang Details một chút theo cách tương tự.

Thêm Custom Metadata vào Model

Có một vài thay đổi sẽ làm bạn thấy các trang của tôi khác với các trang mặc nhiên.

• Số cột khác nhau trong các bảng dữ liệu (các trang của tôi có ít cột hơn)
• Một số tiêu đề cột tên khác
• Một số giá trị trong các ô được định dạng khác
• Tên hiển thị của các bảng

Để tùy biến các mục trên, bạn cần tạo một lớp metadata mà nó sẽ cung cấp cho hệ thống Dynamic Data thông tin về các thực thể của bạn. Thực sự mà nói, tôi không rành phần này lắm, có lẽ vì nó mới. Nhưng dù sao để làm được việc này, bạn cần phải tạo thêm hai lớp nữa cho mỗi lớp trong DataContext. Vậy nên tôi sẽ phải tạo thêm 10 lớp nữa cho 5 bảng dữ liệu của tôi.

Đầu tiên bạn cần tạo thêm một lớp partial với cùng tên của lớp entity trong mô hình dữ liệu và sau đó áp dụng một thuộc tính lên lớp này để có thể chỉ ra lớp metadata cho lớp này. Đoạn code dưới đây sẽ thực hiện điều này cho thực thể Order trong ứng dụng mẫu. The display name for the Order table is ‘My Orders’ – Applied with the TableName attributes

• Các cột OrderDate, ShippedDate, ShipAddress và ShipCity được thay đổi tên hiển thị bằng cách áp dụng thuộc tính DisplayName.
• Các cột OrderDate và ShippedDate có định dạng được tùy biến- áp dụng bằng thuộc tính DisplayFormat.
• Các cột RequiredDate, ShipVia, Freight, ShipName, ShipPostalCode, và ShipCountry được ẩn bởi khỏi giao diện bằng cách dùng thuộc tính ScaffoldColumn.

1: //  Attach the OrderMetadata to the Order class

   2: [MetadataType(typeof(OrderMetadata))]

   3: public partial class Order {}

   4: 

   5: [TableName("My Orders")]

   6: public class OrderMetadata

   7: {

   8:     //  Override the display name

   9:     [DisplayName("Date Ordered")]

  10:     //  Format the Date

  11:     [DisplayFormat(DataFormatString="{0:d}")]

  12:     public object OrderDate { get; set; }

  13:     //  Override the display name

  14:     [DisplayName("Date Shipped")]

  15:     //  Format the Date

  16:     [DisplayFormat(DataFormatString = "{0:d}")]

  17:     public object ShippedDate { get; set; }

  18:     //  Override the display name

  19:     [DisplayName("Address")]

  20:     public object ShipAddress { get; set; }

  21:     //  Override the display name

  22:     [DisplayName("City")]

  23:     public object ShipCity { get; set; }

  24: 

  25:     //  Columns I want hidden

  26:     [ScaffoldColumn(false)]

  27:     public object RequiredDate { get; set; }

  28:     [ScaffoldColumn(false)]

  29:     public object ShipVia { get; set; }

  30:     [ScaffoldColumn(false)]

  31:     public object Freight { get; set; }

  32:     [ScaffoldColumn(false)]

  33:     public object ShipName { get; set; }

  34:     [ScaffoldColumn(false)]

  35:     public object ShipPostalCode { get; set; }

  36:     [ScaffoldColumn(false)]

  37:     public object ShipCountry { get; set; }

  38: }

Kết luận

 Ok, đây là lần đầu thử qua Dynamic Data. Tôi thực sự hài lòng và tôi sẽ tiếp tục tìm hiểu thêm về nó.

Chúc bạn thành công.