Tài liệu Tổng quan về ASP.NET 3.5

127 trang hapham 520

Download

Bạn đang xem 20 trang mẫu của tài liệu "Tài liệu Tổng quan về ASP.NET 3.5", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

tai_lieu_tong_quan_ve_asp_net_3_5.pdf

Nội dung text: Tài liệu Tổng quan về ASP.NET 3.5

TỔNG QUAN VỀ ASP.NET 3.5
MỤC LỤC 1. ASP.NET là gì? 2 1.1 ASP.NET tích hợp với NET Framework 2 1.2 ASP.NET là đa ngôn ngữ 2 1.3 ASP.NET là hướng đối tượng (Object-Oriented) 2 1.4 ASP.NET được biên dịch 2 1.5 ASP.NET được lưu trữ trên máy bởi Common Language Runtime 3 1.6 ASP.NET dễ dàng triển khai và cấu hình 3 2. Các tính năng mới trong ASP.NET 3.5 3 2.1 ASP.NET AJAX 4 2.2 Các Control mới 4 2.3 LINQ 4 2.4 Các Assembly mới 4 2.5 ASP.NET Dynamic Data 4 2.6 ASP.NET MVC (Model View Control) 4 3. Cách tạo trang web trong Visual Studio 2008 5 3.1 Khởi động Visual Studio 2008 hoặc Visual Web Developer 2008 (hình 1) 5 3.2 Cách tạo dự án mới 5 3.3 Ví dụ 1 7 4. Giới thiệu về sự kiện (Event) trong ASP.NET 9 4.1 Một số tệp cơ bản trong ASP.NET 9 4.2 Chu kỳ sống của trang web trong ASP.NET (ASP.NET Page Life Cycle) 9 4.3 Một số các sự kiện của trang web (Page Event) 9 4.4 Sự kiện ứng dụng (Event Application) 10 5. Tài liệu tham khảo 11
Bài mở đầu GIỚI THIỆU TỔNG QUAN VỀ ASP.NET 3.5 Bài này giới thiệu tổng quan về công nghệ ASP.NET 3.5 (Active Server Page). ASP.NET là gì? Giới thiệu những tính năng mới của ASP.NET 3.5 sơ với ASP.NET 2.0. Cách tạo website trong Visual Studio 2008. 1. ASP.NET là gì? Trước hết, tên đầy đủ của ASP.NET là Active Server Pages .NET (.NET ở đây là .NET framework). Nói đơn giản thì ASP.NET là một công nghệ có tính cách mạng dùng để phát triển các ứng dụng về mạng hiện nay cũng như trong tương lai. Bạn lưu ý ở chổ ASP.NET là một phương pháp tổ chức hay khung tổ chức (framework) để thiết lập các ứng dụng hết sức hùng mạnh cho mạng dựa trên CLR (Common Language Runtime). 1.1 ASP.NET tích hợp với NET Framework .NET Framework được chia thành bộ các tác vụ cho từng chức năng gồm các lớp (class), các cấu trúc (structures), các giao diện (interfaces) và các lõi (core) thành phần chương trình. Trước khi sử dụng thành phần nào bạn phải hiểu cơ bản về chức năng, các tổ chức của nó. Mỗi một trong hàng nghàn các tầng lớp được nhóm theo trình tự logic, thứ bậc được gọi là một namespace. Mỗi namespace cung cấp một tính năng. 1.2 ASP.NET là đa ngôn ngữ Để xây dựng một ứng dụng web chúng ta không chỉ chọn một ngôn ngữ mà có thể chọn nhiều ngôn ngữ khác. Điều quan trọng là các ngôn ngữ chúng ta chọn mã của nó dịch được ra mã IL. Điều đó có nghĩa là IL là ngôn ngữ của .NET và chỉ có CLR nhận biết được IL. 1.3 ASP.NET là hướng đối tượng (Object-Oriented) ASP.NET là ngôn ngữ lập trình hướng đối tượng sử dụng các ngôn ngữ .NET. Nó cung cấp bộ các đối tượng nhỏ và thực sự là một tầng làm việt trên nguyên lý của HTTP và HTML. Mã nguồn của chúng ta không được truy cập toàn bộ các đối tượng trong .NET Framework nhưng có thể khai thác tất cả các quy ước của một môi trường OOP (Object Oriented Programming). Chúng ta có tạo các lớp, giao diện, kế thừa các lớp Chúng ta có thể kiểm soát được các đối tượng trong chương trình như hiển thị dữ liệu và các sự kiện của đối tượng. 1.4 ASP.NET được biên dịch Một ứng dụng ASP.NET luôn luôn được biên dịch, nó không chạy bằng mã của C# hoặc Visual Basic mà không được biên dịch trước. Một ứng dụng ASP.NET thực sự được biên dịch thông qua 2 giai đoạn: Giai đoạn đầu tiên những các mã (code) bạn viết (C#, Visual Basic hoặc ngôn ngữ .NET khác) được dịch bởi Microsoft Intermediate Language (MSIL). Giai đoạn dịch này được dịch tự động khi trang wed đầu tiên yêu cầu. Chúng ta có thể thực hiện dịch trước. Các tệp được dịch thành mã IL (Intermediate Language Code). Giai đoạn tiếp theo được dịch trước khi trang Web được thực thi. Tại giai đoạn này mã IL được dịch thành bản mã máy (Native Machine Code). Giai đoạn này được gọi là Just-In-Time (JIT). Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan về ASP.NET 3.5 2
Code in Another Code in VB.NET Code in C# .NET Language VB.NET Compiler C# Compiler Appropriate Compiler IL (Intermediate Language) Code Just-In-Time (JIT) Compiler The Common Language Runtime Native Machine Code Execute 1.5 ASP.NET được lưu trữ trên máy bởi Common Language Runtime Khía cạnh quang trọng nhất của công cụ ASP.NET là nó chạy trong môi trường thời gian thực (Runtime) của CLR (Common Language Runtime). CLR là máy ảo (virtual machine) trong Microsoft .NET, do có ngôn ngữ trung gian IL nên khi phát triển ứng dụng trên .NET, chúng ta không bị phụ thuộc vào thiết bị, có nghĩa là theo Microsoft nói thì ứng dụng .NET có thể chạy trên bất kỳ thiết bị nào có .NET Framework. Tất cả các namespace, các ứng dụng, các lớp trong bộ .NET Framework được gọi tắt là bộ quản lý mã. CLR cũng cung cấp các dịch vụ quan trọng khác như: Quản lý bộ nhớ Thu nhặt rác Quản lý các tuyến Xử lý ngoại lệ An toàn 1.6 ASP.NET dễ dàng triển khai và cấu hình Mọi sự cài đặt .NET Framework đều cung cấp các lớp như nhau. Để triển khai ứng dụng ASP.NET chúng ta chỉ cần sao chép các tập tin vào thư mục ảo trên máy chủ (server) và máy chỉ chỉ cần có .NET Framework. Việc cấu hình dễ dàng đơn giản không phụ thuộc vào IIS (Internet Information Services). Cấu hình trong ASP.NET được đặt trong tệp web.config. Tệp web.config được để cùng với thư mực chứa trang web của chúng ta. Tệp web.config không bao giờ bị khóa, chúng ta có thể truy cập bất kỳ lúc nào, việc sửa tệp này hoàn toàn dễ dạng vì chúng được lưu dưới dạng XML. 2. Các tính năng mới trong ASP.NET 3.5 Microsoft phát hành ASP.NET vào ngày 19 tháng 11 năm 2007 cùng với Visual Stutio 2008. Đây là bước tiến hóa từ ASP.NET 2.0 tới ASP.NET 3.5. Nếu chúng ta đang sử dụng ASP.NET 2.0 để sử dụng ASP.NET 3.5 chỉ cần cài đặt thêm các tính năng mới của ASP.NET 3.5. Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan về ASP.NET 3.5 3
Trong phần này sẽ giới thiệu một số tính năng mới trong ASP.NET 3.5 2.1 ASP.NET AJAX Trong ASP.NET 2.0, ASP.NET AJAX được cài đặt thêm vào. Tuy nhiên trong ASP.NET 3.5, ASP.NET AJAX đã được tích hợp. vào trong .NET Framework, do đó quá trình xây dựng giao diện người dùng được dễ dàng và trực quan. ASP.NET AJAX Control Extenders đã được tích hợp ToolBox của Visual Studio 2008. Các tính năng của ASP.NET AJAX sẽ được trình bày ở bài sau. 2.2 Các Control mới Các control ListView và DataPager có thể dùng mới kiểu dữ liệu mới LinqDataSource. ListView linh hoạt hơn và có chứa toàn bộ tính năng của Gridview, Datagrid, Repeater trong ASP.NET 2.0. Nó cung cấp các khả năng và chèn, xóa, sửa, sắp xếp, phân trang. Chúng ta hoàn toàn định dạng được việc dữ liệu hiển thị trên ListView mà không cần phải sử dụng thẻ . Các Template trong ListView rất phong phú và đa dạng. Datager cung cấp cho ListView trong việc phân trang. 2.3 LINQ LINQ (Language Integrated Query) đưa ra khả năng lập trình mới trong .NET. Giải pháp lập trình hợp nhất, đem đến khả năng truy vấn dữ liệu theo cú pháp SQL trực tiếp trong C# hay VB.NET, áp dụng cho tất cả các dạng dữ liệu từ đối tượng đến Cơ sở dữ liệu quan hệ và XML. ASP.NET LinqDataSource cho phép chúng ta có thể sử dụng LINQ để lọc (filter), order và nhóm (group) dữ liệu trước khi binding vào List Control. 2.4 Các Assembly mới System.Core.dll – Các implementation cho LINQ to Objects System.Data.Linq.dll - Các implementation cho LINQ to SQL System.Xml.Linq.dll - Các implementation cho LINQ to XML System.Data.DataSetExtensions.dll - Các the implementation cho LINQ to DataSet System.Web.Extensions.dll: Các implementation for ASP.NET AJAX 2.5 ASP.NET Dynamic Data ASP.NET Dynamic Data cung cấp một Framework cho phép chúng ta nhanh chóng xây dựng một chức năng ứng dụng driver-data, dựa trên LINQ to SQL hay Entity Framework. Nó cũng có thêm nhiều tính linh hoạt cho các DetailsView, FormView, GridView, ListView trong 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. 2.6 ASP.NET MVC (Model View Control) Kiến trúc MVC là việc chia tất cả mục của một ứng dụng ra làm ba thành phần (component) khác nhau Model, View và Controller: Model: Model được giao nhiệm vụ cung cấp dữ liệu cho cơ sở dữ liệu và lưu dữ liệu vào các kho chứa dữ liệu. Tất cả các nghiệp vụ logic được thực thi ở Model. Dữ liệu vào từ người dùng sẽ thông qua View được kiểm tra ở Model trước khi lưu vào cơ sở dữ liệu. Việc truy xuất, xác nhận, và lưu dữ liệu là một phần của Model. View: View hiển thị các thông tin cho người dùng của ứng dụng và được giao nhiệm vụ cho việc nhận các dữ liệu vào từ người dùng, gửi đi các yêu cầu đến bộ điều khiển, sau đó là nhận lại các phản hồi từ bộ điều khiển và hiển kết quả cho người dùng. Các trang HTML, JSP, các thư viện thể và các file nguồn là một phần của thành phần View. Controller: Controller là tầng trung gian giữa Model và View. Controller được giao nhiệm vụ nhận các yêu cầu từ phía máy khách. Một yêu cầu được nhận từ máy khách được thực hiện bởi một chức năng logic thích Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan về ASP.NET 3.5 4
hợp từ thành phần Model và sau đó sinh ra các kết quả cho người dùng và được thành phần View hiển thị. ActionServlet, Action, ActionForm và struts-config.xml là các phần của Controller. 3. Cách tạo trang web trong Visual Studio 2008 3.1 Khởi động Visual Studio 2008 hoặc Visual Web Developer 2008 (hình 1) Hình 1: Visual Web Developer 2008 3.2 Cách tạo dự án mới Chọn File → New Project (Ctrl+Shitf+N) hoặc New Web Site (Shift+Alt+N) (Hình 2) Hình 2: Tạo dự án mới Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan về ASP.NET 3.5 5
 Nếu chọn New Project xuất hiện hộp hội thoại New Project sau (hình 3): Hình 3 Trong Project Type: Visual Basic → Web nếu chọn Visual Basic là ngôn ngữ viết ứng dụng. Visual C# → Web nếu chọn C# là ngôn ngữ viết ứng dụng. Trong Templates chọn ASP.NET Web Application,. Trong Name đặt tên cho Project, tên do ta đặt. Trong Location là thư mục chứa Project.  Nếu chọn New Web Site xuất hiện hộp hội thoại New Project sau (hình 4): Hình 4 Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan về ASP.NET 3.5 6
Trong Languge: Visual Basic → Web nếu chọn Visual Basic là ngôn ngữ viết ứng dụng. Visual C# → Web nếu chọn C# là ngôn ngữ viết ứng dụng. Trong Templates chọn ASP.NET Web Application. Trong Location là chọn Sysem File và Chọn tên và thư mực chứa Project. 3.3 Ví dụ 1 Hình 5 Ví dụ tạo một dự án có tên là “Vi_du_1”, đặt tại ổ đĩa D, chọn ngôn ngữ chọn là C# (hình 5) sau đó bấm OK. Sau đó chúng ta được file “Default.aspx” (hình 6). Hình 6 Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan về ASP.NET 3.5 7
Trong ví dụ đầu tiên này chúng ta soạn một đoạn mã sau trong Default.aspx: Chào mừng bạn đến với ASP.NET 3.5 Để chạy chạy web này dưới dạng Deburg chúng ta chọn Deburg → Start Deburgging hoặc bấm phím F5 (hình 7). Hình 7 Kết quả khi chạy Vi_du_1 (hình 8) Hình 8 Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan về ASP.NET 3.5 8
4. Giới thiệu về sự kiện (Event) trong ASP.NET 4.1 Một số tệp cơ bản trong ASP.NET TỆP MIÊU TẢ Tệp này chứa toàn bộ giao diện người dùng, các tùy chọn, các đoạn *.aspx code ứng dụng. Đây là một trong những trang web đầu tiên được bắt đầu khi người sử dụng duyệt web. *.cs Tệp này chứa các mã nguồn của C# Tệp tin dạng XML chứa cấu hình cho ứng dụng ASP.NET. Nó bao web.config gồm các cấu hình về an ninh, quản lý trạng thái, quản lý bộ nhớ Chúng ta sử dụng tập tin này để khai báo các biến toàn cục và phản global.asax ứng với các sự kiện toàn cục. Khi chúng ta xây dựng xong một ứng dụng Web: Phần giao diện của ứng dụng nằm trong ở các tệp .aspx và html. Tất cả các tệp mã nguồn (C#, VB.NET hoặc ngôn ngữ .NET) sẽ được biên dịch thành tệp .DLL và nằm trong thư mục /Bin. 4.2 Chu kỳ sống của trang web trong ASP.NET (ASP.NET Page Life Cycle) Chu kỳ sống được bắt đầu khi trình duyệt yêu cầu một trang web gọi là Session. Chu kỳ sống vẫn tiếp tục nếu: - Session đang hoạt động. - Người sử dụng tương tác với giao diện web cho đến khi kích hoạt một sự kiện. - Dữ liệu của trang (View State) wed được gửi về cho Server. - Server nhận được View State và trả lại yêu cầu từ View State. Chu kỳ sống kết thúc khi: - Người dùng kết thúc trình duyệt. - Session kết thúc (timeout). 4.3 Một số các sự kiện của trang web (Page Event) SỰ KIỆN MIÊU TẢ Kiểm tra thuộc tính IsPostBack khi lần đầu tiên trang web đang được sử lý. Tạo mới hoặc tạo mới lại các Control động (Dynamic Control). Pre_Init Thiết lập trang chủ (Master page), thuộc tính Theme. Đọc và thiết lập giá trị cho thuộc tính Profile. Làm nổi (Raised) sau khi các Control đã được khởi động và các Skin đã được Init ứng dụng. Chúng ta sử dụng sử kiện này để đọc hoặc khởi tạo các thuộc tính của Control. Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan về ASP.NET 3.5 9
Sử dụng sự kiện này để thiết lập thuộc tính cho Control, thiết lập các kết nối với Load Cơ sở dữ liệu. Sử dụng sự kiện này để xử lý các tác vụ có yêu cầu khi tất cả các khởi tạo hoàn InitComplete thành. Unload Trang được giải phóng khỏi bộ nhớ Error Khi xảy ra lỗi trong trang. DataBinding Server Control trên trang được gắn với nguồn dữ liệu 4.4 Sự kiện ứng dụng (Event Application) SỰ KIỆN MIÊU TẢ Application_Start Người dùng đầu tiên duyệt trang web. Application_End Khi không còn người dùng nào duyệt trang web. Application_Error Khi có lỗi xảy ra trong ứng dụng Session_Start Khi người dùng duyệt một trang web Session_End Khi người dùng đóng trình duyệt hoặc Session kết thúc (time out) Ví dụ sau đếm số người truy cập và số người online Chọn Project → Add New Item (hình 9). Hình 9 Trong “Add New Item” chọn “Global Application Class” (hình 10). Hình 10 Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan về ASP.NET 3.5 10
Trong file Global.asax soạn đoạn mã sau: void Application_Start(object sender, EventArgs e) { if (!File.Exists("D:\\Dem.txt")) File.WriteAllText("D:\\Dem.txt", "0"); Application["SNTruyCap"] = int.Parse(File.ReadAllText("D:\\Dem.txt")); } void Application_End(object sender, EventArgs e) { } void Application_Error(object sender, EventArgs e) { } void Session_Start(object sender, EventArgs e) { if (Application["SNOnline"] == null) Application["SNOnline"] = 1; else Application["SNOnline"] = (int)Application["SNOnline"] + 1; Application["SNTruyCap"] = (int)Application["SNTruyCap"] + 1; File.WriteAllText("D:\\Dem.txt", Application["SNTruyCap"].ToString()); } void Session_End(object sender, EventArgs e) { Application["SNOnline"] = (int)Application["SNOnline"] - 1; } 5. Tài liệu tham khảo 1. Visual Web Developer, URL: 2. Microsoft ASP.NET, URL: 3. Bill Evjen, Scott Hanselman, Devin Rader, “Professional ASP.NET 3.5 In C# And VB” Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan về ASP.NET 3.5 11
MỤC LỤC 1. Dynamic Data là gì? 2 2. Các tính năng của Dynamic Data 2 3. Xây dựng ứng dụng Dynamic Data với LINQ to SQL 2 2.1 Tạo Project Dynamic Data 3 2.2 Xây dựng Cơ sở dữ liệu cho Project 4 2.3 Tạo DataContext với LINQ to SQL 5 2.4 Đăng ký DataContext 7 2.5 Thêm Custom Metadata vào Model 8 4. Câu hỏi ôn tập 13 5. Tài liệu tham khảo 14
Bài 7 DYNAMIC DATA VỚI LINQ TO SQL Bài này giới thiệu tổng quan về Dynamic Data, những tính năng của Dynamic Data. Cách xây dựng ứng dụng Dynamic Data với LINQ to SQL. 1. Dynamic Data là gì? ASP.NET Dynamic Data cung cấp một Framework cho phép chúng ta nhanh chóng xây dựng một chức năng ứng dụng driver-data, dựa trên LINQ to SQL hay 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. Nhiều tính linh hoạt cho các DetailsView, FormView, GridView, ListView trong 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. ASP.NET Dynamic Data mang đến cho chúng ta các tiện ích và RAD (Rapid Application Development) để thay đổi dữ liệu các các control ASP.NET. 2. Các tính năng của Dynamic Data Web Scaffolding để tạo ra một ứng dụng web dựa trên các lược đồ cơ bản của cơ sở dữ liệu. Dynamic Data scaffolding có thể tạo ra một chuẩn UI (User Interface – Giao diện người dùng) từ các mô hình dữ liệu. Đầy đủ các thao tác (tạo, cập nhật, xóa bỏ, hiển thị) cho việc truy cập dữ liệu truy cập dữ liệu, các thao tác về quan hệ giữa các bảng và kiểm tra tính hợp lệ của dữ liệu. Tự động hỗ quan các quan hệ khóa ngoài (foreign-key). Dynamic Data phát hiện ra các quan hệ giữa các bảng và từ đó tạo ra các giao diện người dùng trên các bảng quan hệ. Khả năng tùy chỉnh các UI. Khả năng tùy chỉnh tính hợp lệ cho các trường dữ liệu. 3. Xây dựng ứng dụng Dynamic Data với LINQ to SQL Để xây dựng một trang Web với Dynamic Data sẽ bắt đầu bằng cách sử dụng scaffolding. Dynamic Data hỗ trợ mô hình dữ liệu LINQ to SQL và mô hình dữ liệu ADO.NET Entity Framework. Trong một ứng dụng web của chúng ta có thể có nhiều loại mô hình dữ liệu nhưng để sử dụng Dynamic Data thì các mô hình dữ liệu phải cùng kiểu. Chúng ta phải đăng ký mô hình dữ liệu sử dụng Dynamic Data với file “Global.asax”. Sau khi mô hình dữ liệu được đăng ký với Dynamic Data, dữ liệu mô hình có thể tự động thực hiện xác nhận các trường dữ liệu, và nó cho phép chúng ta kiểm soát sự xuất hiện và hành vi của dữ liệu ở cấp độ tầng dữ liệu. Trong ví dụ sau đây sẽ xây dựng một Project sử dụng Dynamic Data với mô hình dữ liệu LINQ to SQL. Microsoft Vietnam – DPE Team | Bài số 7: Dynamic Data với LINQ to SQL 2
2.1 Tạo Project Dynamic Data Để bắt đầu, File→New Web Site và chọn “Dynamic Data Entities Web Site” hay “Dynamic Data Web Site”. Ở đây chúng ta dùng Dynamic Data với LINQ to SQL nên chọn “Dynamic Data Web Site” (Hình 1). Hình 1: Tạo Project Dynamic Data với LINQ to SQL Trong Project này chúng ta đặt tên là Vi_du_7, ngôn ngữ là Visual C# sau đó bấm “OK”. Khi đã tạo xong, bạn sẽ thấy một số Folder/File được đưa vào trong Solution Explorer (Hình 2). 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. Hình 2: Các Folder và File trong Dynamic Data Microsoft Vietnam – DPE Team | Bài số 7: Dynamic Data với LINQ to SQL 3
2.2 Xây dựng Cơ sở dữ liệu cho Project Từ Folder “App_Data” trong “Solution Explore” click phải chuôṭ choṇ “Add New Item” (Hình 3). Hình 3: Tạo C ơ sở dữ liệu Chọn “SQL Server Database”, trong ví dụ này đặt tên cho CSDL là “My_Database.mdf”, chọn ngôn ngữ là “Visual C#”, sau đó bấm “Add” (Hình 4). Hình 4: SQL Server Database Để tạo Table cho “My_Database”, trong “Database Explore” chúng click chuột phải vào Folder “Table” chọn “Add New Table”. Trong ví dụ này chúng ta sẽ tạo 2 bảng: SanPham gồm các trường: Id, TenSanPham, DonGia, SoLuong, LoaiSanPham (Hình 6). LoaiSanPham gồm các trường: Id, TenLoaiSanPham (Hình 7). Hình 5: Tạo bảng cho My_Database.mdf Microsoft Vietnam – DPE Team | Bài số 7: Dynamic Data với LINQ to SQL 4
Hình 6: Bảng SanPham trong CSDL My_Database.mdf Hình 7: Bảng LoaiSanPham trong CSDL My_Database.mdf 2.3 Tạo DataContext với LINQ to SQL Trong ví dụ này chúng ta dùng LINQ to SQL để truy cập vào CSDL My_Database.mdf. Để tạo các lớp cho cho LINQ to SQL, trong “Solution Explore” click chuột phải chọn “Add New Item” (Hình 8). Hình 8 Microsoft Vietnam – DPE Team | Bài số 7: Dynamic Data với LINQ to SQL 5
Trong “Add New Item” (Hình 9) chọn “LINQ to SQL Classes”, đặt tên tệp là “MyDataClassess.dbml”, chọn ngôn ngữ là “Visual C#”, sau đó bấm vào “Add” . Sau khi bấm “Add” sẽ xuất hiện một thông báo khuyên chúng ta nên đặt các file kiểu (LINQ to SQL Class) vào trong thư mục “App_Code” của Project. Chúng ta sẽ bấm “Yes” để các file “MyDataClasses.dbml” sẽ được chứa trong thư mục “App_Code”. Hình 9: Tạo LINQ to SQL Classes Mở file “MyDataClasses.dbml” trong thư mực “App_Code”, đánh dấu v ào 2 bảng “LoaiSanPham” và “SanPham”, kéo thả 2 bảng này vào file “MyDataClasses.dbml” (Hình 10). Hình 10: Tạo file MyDataClasses với 2 bảng SanPham và LoaiSanPham Sau kéo thả 2 bảng này vào trong “MyDataClasses.dbml” chúng ta sẽ tạo liên kết cho 2 bảng. Trong file “MyDataClasses.dbml” click phải chuôṭ choṇ Add→Association để tạo liên kết giữa 2 bảng (Hình 11). Hình 11: Hình 12: Tạo liên kết cho bảng LoaiSanPham và SanPham Microsoft Vietnam – DPE Team | Bài số 7: Dynamic Data với LINQ to SQL 6
Chúng ta sẽ tạo liên kết giữa trường Id của bảng LoaiSanPham với trường LoaiSanPham của bảng SanPham (Hình 12). Sau đó chúng ta bấm “OK” tạo được kết quả như Hình 13. Hình 13 2.4 Đăng ký DataContext Sau khi tạo ra DataContext, chúng ta mở tệp “MyDataClasses.designer.cs”, chương trình đã tạo cho chúng ta một lớp có tên là MyDataClassesDataContext. public partial class MyDataClassesDataContext : System.Data.Linq.DataContext Chúng ta phải đăng ký MyDataClassesDataContext với hệ thống DynamicData. Mở file Global.asax, Sửa: //model.RegisterContext(typeof(YourDataContextType), new ContextConfiguration() { ScaffoldAllTables = false }); Thành: model.RegisterContext(typeof (MyDataClassesDataContext), new ContextConfiguration() { ScaffoldAllTables = true }); Khi đó chúng ta được file Golobal.asax như sau: public static void RegisterRoutes(RouteCollection routes) { MetaModel model = new MetaModel(); // IMPORTANT: DATA MODEL REGISTRATION // Uncomment this line to register LINQ to SQL classes or an ADO.NET Entity Data // model for ASP.NET Dynamic Data. Set ScaffoldAllTables = true only if you are sure // that you want all tables in the data model to support a scaffold (i.e. templates) // view. To control scaffolding for individual tables, create a partial class for // the table and apply the [Scaffold(true)] attribute to the partial class. // Note: Make sure that you change "YourDataContextType" to the name of the data context // class in your application. model.RegisterContext(typeof(MyDataClassesDataContext), new ContextConfiguration() { ScaffoldAllTables = true }); // The following statement supports separate-page mode, where the List, Detail, Insert, and // Update tasks are performed by using separate pages. To enable this mode, uncomment the following // route definition, and comment out the route definitions in the combined-page mode section that follows. routes.Add(new DynamicDataRoute("{table}/{action}.aspx") { Constraints = new RouteValueDictionary(new { action = "List|Details|Edit|Insert" }), Model = model }); // The following statements support combined-page mode, where the List, Detail, Insert, and // Update tasks are performed by using the same page. To enable this mode, uncomment the // following routes and comment out the route definition in the separate-page mode section above. //routes.Add(new DynamicDataRoute("{table}/ListDetails.aspx") { Microsoft Vietnam – DPE Team | Bài số 7: Dynamic Data với LINQ to SQL 7
// Action = PageAction.List, // ViewName = "ListDetails", // Model = model //}); //routes.Add(new DynamicDataRoute("{table}/ListDetails.aspx") { // Action = PageAction.Details, // ViewName = "ListDetails", // Model = model //}); } void Application_Start(object sender, EventArgs e) { RegisterRoutes(RouteTable.Routes); } Chúng ta vào Deburg→StartDebugging (hoặc F5) để chạy thử chương trình. Kết quả khi chạy chương trình (Hình 14). Hình 14 Khi click vào LoaiSanPhams kết quả như hình 15. Khi click vào SanPhams kết quả như hình 16. Hình 15 Hình 16 2.5 Thêm Cus tom Metadata vào Model Để thêm tùy biến các mục, chúng ta cần tạo lớp Metadata để nó cung cấp cho hệ thống Dynamic Data thông tin về các thực thể. Đầ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, sau đó muốn thay đổi thuộc tính lên lớp này phải chỉ ra lớp Metadata cho lớp này. Microsoft Vietnam – DPE Team | Bài số 7: Dynamic Data với LINQ to SQL 8
Trong ví dụ này chúng ta sẽ 2 lớp partial có tên là: LoaiSanPham và SanPham. Để thêm 2 lớp này chúng ta làm như sau: Click chuột phải vào “Add_Code” chọn “Add New Item”, trong hộp thoại “Add New Item”, chọn “Class”, đặt tên cho file là “MyClass.cs”, chọn ngôn ngữ là “Visual C#”, sau đó bấm “Add” (Hình 17). Hình 17: Thêm f ile MyClass.cs Mở file “MyClass.cs” khai báo thêm các namespace sau: using System.Web.DynamicData; using System.ComponentModel.DataAnnotations; using System.ComponentModel; Thêm 2 lớp partial có tên là: LoaiSanPham, SanPham và tên lớp của MetadataType. [MetadataType(typeof(LoaiSanPham_Metadata))] public partial class LoaiSanPham { public class LoaiSanPham_Metadata { } } [MetadataType(typeof(SanPham_Metadata))] public partial class SanPham { public class SanPham_Metadata { } } Các bảng muốn thay đổi tên hiển thị sử dụng thuộc tính TableName. Khi sử dụng thuộc tính này phải được viết trong thân của lớp partial. Các trường muốn thay đổi tên hiện thị sử dụng thuộc tính DisplayName Các trường muốn có định dạng tùy biến sử dụng thuộc tính DisplayFormat Các trường muốn ẩn khỏi giao diện sửa dụng thuộc tính ScaffoldColumn Các trường muốn kiểu tra tính hợp lệ khi nhập sử dụng thuộc tính Required Khi sử dụng các thuộc tính DisplayName,DisplayFormat,ScaffoldColumn,Required được viết trong thân của lớp MetadataType. Trong ví dụ này sử dụng các thuộc tính TableName, DisplayName để thay đổi giao diện hiện thị cho 2 bảng LoaiSanPham và SanPham. Sử dụng Required để kiểu tra việc nhập dữ liệu cho trường “SoLuong” và “DonGia” của bảng SanPham. using System; using System.Collections.Generic; Microsoft Vietnam – DPE Team | Bài số 7: Dynamic Data với LINQ to SQL 9
using System.Linq; using System.Web; using System.Web.DynamicData; using System.ComponentModel.DataAnnotations; using System.ComponentModel; /// /// Thay đổi cho các thuộc tính cho 2 bảng SanPham và LoaiSanPham /// [MetadataType(typeof(LoaiSanPham_Metadata))] public partial class LoaiSanPham { partial void OnTenLoaiSanPhamChanging(string value) { if (Char.IsLower(value[0]))//Kiểm tự đầu tiên phải có phải là chữ hoa { throw new ValidationException("Tên loại sản phẩm ký tự đầu tiên phải là chữ hoa!"); } } [TableName("Loại sản phẩm")]//Sửa lại tên bảng "LoaiSanPham" thành "Loại sản phẩm" public class LoaiSanPham_Metadata { [DisplayName("Tên loại sản phẩm")]//Sửa lại tên hiển thị cho trường TenLoaiSanPham public object TenLoaiSanPham { get; set; } [DisplayName("Sản phẩm")] public object SanPhams { get; set; } } } [MetadataType(typeof(SanPham_Metadata))] public partial class SanPham { partial void OnTenSanPhamChanging(string value) { if (Char.IsLower(value[0]))//Kiểm tự đầu tiên phải có phải là chữ hoa { throw new ValidationException("Tên sản phẩm ký tự đầu tiên phải là chữ hoa!"); } } [TableName("Sản phẩm")]//Sửa lại tên bảng "SanPham" thành "Sản phẩm" public class SanPham_Metadata { [DisplayName("Tên sản phẩm")]//Sửa lại tên hiển thị cho trường TenLoaiSanPham public object TenSanPham { get; set; } [DisplayName("Số lượng")] [Required] [Range(0, 300)]//Nhập số lượng trong khoảng từ 0 đến 300 public object SoLuong { get; set; } [DisplayName("Đơn giá")] [Required] [Range(100000, 3000000000)]//Nhập đơn giá trong khoảng từ 100.000 đến 3.000.000.000 public object DonGia { get; set; } [DisplayName("Loại sản phẩm")] public object LoaiSanPham1 { get; set; } } } Để sửa lại đổi giao diện của trang Master chúng ta mở file “Site.master”. Ví dụ chúng ta một số nội dung do chương trình tạo ra bằng tiếng Anh và thay bằng tiếng Việt. Sửa: Microsoft Vietnam – DPE Team | Bài số 7: Dynamic Data với LINQ to SQL 10
Dynamic Data Site Thành: Dynamic Data VỚI LINQ to SQL Sửa: Thành: Trong file “Details.aspx” sửa một số giao diện tiếng Anh và thay bằng tiếng Việt. Chi tiết một bản ghi của bảng ' Text="Sửa" /> Trong file “Edit.aspx” sửa lại Trong file “Insert.aspx” sửa lại Microsoft Vietnam – DPE Team | Bài số 7: Dynamic Data với LINQ to SQL 11
Trong file “List.aspx” sửa lại ' Text="Sửa" /> ' Text="Chi tiết" /> Không có dữ liệu trong bảng! Bây giờ chúng ta chạy thử chương trình. Các giao diện đã được sửa thành tiếng Việt. Chúng ta vào Deburg→StartDebugging (hoặc F5) để chạy thử chương trình. Kết quả khi chạy chương trình file “Defautl.axpx” (Hình 18). Hình 18: Trang chủ của Vi_du_7 Microsoft Vietnam – DPE Team | Bài số 7: Dynamic Data với LINQ to SQL 12
Khi click vào “Loại sản phẩm” kết quả như hình 19 hoặc click vào “Sản phẩm” kết quả như hình 20. Hình 19: Giao diện của bảng LoaiSanPham Hình 20: Giao diện của bảng SanPham Hình 21: Thêm mới vào bảng SanPham Hình 22: Sửa bản ghi của bản SanPham 4. Câu hỏi ôn tập 1. Các tính năng của Dynamic Data? Trả lời: Web Scaffolding để tạo ra một ứng dụng web dựa trên các lược đồ cơ bản của cơ sở dữ liệu. Dynamic Data scaffolding có thể tạo ra một chuẩn UI (User Interface – Giao diện người dùng) từ các mô hình dữ liệu. Đầy đủ các thao tác (tạo, cập nhật, xóa bỏ, hiển thị) cho việc truy cập dữ liệu truy cập dữ liệu, các thao tác về quan hệ giữa các bảng và kiểm tra tính hợp lệ của dữ liệu. Tự động hỗ quan các quan hệ khóa ngoài (foreign-key). Dynamic Data phát hiện ra các quan hệ giữa các bảng và từ đó tạo ra các giao diện người dùng trên các bảng quan hệ. Khả năng tùy chỉnh các UI. Khả năng tùy chỉnh tính hợp lệ cho các trường dữ liệu. 2. Dynamic Data hỗ trợ các các mô hình dữ liệu nào? Microsoft Vietnam – DPE Team | Bài số 7: Dynamic Data với LINQ to SQL 13
Trả lời: Dynamic Data hỗ trợ 2 mô hình dữ liệu LINQ to SQL và ADO.NET Entity Framework. 3. Các bước cơ bản xây dựng Dynamic Data với LINQ to SQL Trả lời: Tạo project Dynamic Data Web Site Xây dựng Cơ sở dữ liệu Tạo DataContext với LINQ to SQL Đăng ký DataContext với file Global.asax Thêm Custom Metadata vào Model 5. Tài liệu tham khảo 1. Using ASP.NET Dynamic Data, URL: 2. Microsoft ASP.NET, URL: 3. ScottGu's Blog, URL: net-dynamic-data-asp-net-ajax-asp-net-mvc-visual-studio-silverlight-wpf.aspx Microsoft Vietnam – DPE Team | Bài số 7: Dynamic Data với LINQ to SQL 14
MỤC LỤC 1. Xây dựng ứng dụng Dynamic Data với ADO.NET Entity Framework 2 1.1. Tạo Project Dynamic Data 2 1.2. Xây dựng Cơ sở dữ liệu cho Project 3 1.3. Tạo Data Model với ADO.NET Entity Framework 6 1.4. Đăng ký Data Model 8 1.5. Thêm Custom Metadata vào Model 10 2. Câu hỏi ôn tập 15 3. Tài liệu tham khảo 15
Bài số 8 DYNAMIC DATA VỚI ADO.NET Entity Framework Bài này giới thiệu cách xây dựng ứng dụng Dynamic Data với ADO.NET Entity Framework. 1. Xây dựng ứng dụng Dynamic Data với ADO.NET Entity Framework 1.1. Tạo Project Dynamic Data Để bắt đầu, File→New Web Site và chọn “Dynamic Data Entities Web Site” hay “Dynamic Data Web Site”. Ở đây chúng ta dùng Dynamic Data với ADO.NET Entity Framwork nên chọn “Dynamic Data Entities Web Site” (Hình 1). Hình 1: Tạo Project Dynamic Data với ADO.NET Entity Framework Trong Project này chúng ta đặt tên là Vi_du_8, ngôn ngữ là Visual C# sau đó bấm “OK”. Microsoft Vietnam – DPE Team | Bài số 8: Dynamic Data với ADO.NET Entity Framework 2
Khi đã tạo xong, bạn sẽ thấy một số Folder/File được đưa vào trong Solution Explorer (Hình 2). 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. Hình 2: Các Folder và File trong Dynamic Data 1.2. Xây dựng Cơ sở dữ liệu cho Project Từ Folder “App_Data” trong “Solution Explore” click phải chuôṭ choṇ “Add New Item” (Hình 3). Hình 3: Tạo Cơ sở dữ liệu Microsoft Vietnam – DPE Team | Bài số 8: Dynamic Data với ADO.NET Entity Framework 3
Chọn “SQL Server Database”, trong ví dụ này đặt tên cho CSDL là “My_Database.mdf”, chọn ngôn ngữ là “Visual C#”, sau đó bấm “Add” (Hình 4). Hình 4: SQL Server Database Để tạo Table cho “My_Database”, trong “Database Explore” chúng click chuột phải vào Folder “Table” chọn “Add New Table”. Trong ví dụ này chúng ta sẽ tạo 2 bảng: SanPham gồm các trường: Id, TenSanPham, DonGia, SoLuong, LoaiSanPham (Hình 5). LoaiSanPham gồm các trường: Id, TenLoaiSanPham (Hình 6). Hình 5: Bảng SanPham trong CSDL My_Database.mdf Microsoft Vietnam – DPE Team | Bài số 8: Dynamic Data với ADO.NET Entity Framework 4
Hình 6: Bảng LoaiSanPham trong CSDL My_Database.mdf Chúng ta cũng có thể sử dụng CSDL đã có. Để sử dụng CSDL đã có từ Folder “App_Data” trong “Solution Explore” click phải chuôṭ choṇ “Add Existing Item ” (Hình 7). Hình 7: Thêm Cơ sở dữ liệu đã có Trong hộp thoại “Add Existing Item” chọn CSDL muốn thêm vào Project, sau đó bấm “Add” (hình 8). Hình 8: Chọn Cơ sở dữ liệu đã có Microsoft Vietnam – DPE Team | Bài số 8: Dynamic Data với ADO.NET Entity Framework 5
1.3. Tạo Data Model với ADO.NET Entity Framework Trong ví dụ này chúng ta dùng ADO.NET Entity Framework để truy cập vào CSDL My_Database.mdf. Để tạo Data Model, trong “Solution Explore” click chuột phải chọn “Add New Item” (Hình 9). Hình 9 Trong “Add New Item” (Hình 10) chọn “ADO.NET Entity Data Model”, đặt tên tệp là “My_Modle.edmx”, chọn ngôn ngữ là “Visual C#”, sau đó bấm vào “Add” . Hình 10: Tạo ADO.NET Entity Data Model Classes Sau khi bấm “Add” sẽ xuất hiện một thông báo khuyên chúng ta nên đặt các file kiểu (ADO.NET Entity Data Model) vào trong thư mục “App_Code” của Project. Chúng ta sẽ bấm “Yes” để các file “My_Model.edmx” sẽ được chứa trong thư mục “App_Code” . Khi đó sẽ xuất hiện hộp thoại “Entity Data Model Wizard” (hình 11). Chúng ta chọn “Generate from database”, rồi bấm “Next” sẽ xuất hiện giao diện (hình 12) chọn CSDL “My_Database.mdf” tiếp tục bấm “Next” sẽ xuất hiện giao diện (hình 13). Hình 11 Hình 12 Microsoft Vietnam – DPE Team | Bài số 8: Dynamic Data với ADO.NET Entity Framework 6
Hình 13 Trong giao diện hình14, chọn đánh dấu vào các bảng trong “Tables” sau đó bấm “Finish”. Tiếp theo chúng ta mở file “My_Model.edmx” trong thư mực “App_Code”. Chúng ta sẽ tạo liên kết giữa trường Id của bảng LoaiSanPham với trường LoaiSanPham của bảng SanPham. Click chuột phải chọn Add→Association (hình 14) sẽ xuất hiện “Add Association” (hình 15), chúng ta chọn như hình 16 rồi bấm OK. Hình 14 Hình 15 Sau đó click chuột phải chọn “Mapping Details” và chọn như hình 16. Ở đây chúng ta chọn quan hệ 1- nhiều giữa bảng LoaiSanPham và SanPham. Hình 16: Tạo liên kết giữa bảng LoaiSanPham với bảng SanPham Microsoft Vietnam – DPE Team | Bài số 8: Dynamic Data với ADO.NET Entity Framework 7
1.4. Đăng ký Data Model Sau khi tạo ra DataModel, chúng ta mở tệp “My_Model.Designer.cs”, chương trình đã tạo cho chúng ta một namespace có tên là My_DatabaseModel và trong namespace My_DatabaseModel có một lớp My_DatabaseEntities. public partial class My_DatabaseEntities :global::System.Data.Objects.ObjectContex Chúng ta phải đăng ký My_DatabaseEntities với hệ thống DynamicData. Mở file Global.asax, thêm Sửa: //model.RegisterContext(typeof(YourDataContextType), new ContextConfiguration() { ScaffoldAllTables = false }); Thành: model.RegisterContext(typeof (My_DatabaseEntities), new ContextConfiguration() { ScaffoldAllTables = true }); Khi đó chúng ta được file Golobal.asax như sau: public static void RegisterRoutes(RouteCollection routes) { MetaModel model = new MetaModel(); // IMPORTANT: DATA MODEL REGISTRATION // Uncomment this line to register LINQ to SQL classes or an ADO.NET Entity Data // model for ASP.NET Dynamic Data. Set ScaffoldAllTables = true only if you are sure // that you want all tables in the data model to support a scaffold (i.e. templates) // view. To control scaffolding for individual tables, create a partial class for // the table and apply the [Scaffold(true)] attribute to the partial class. // Note: Make sure that you change "YourDataContextType" to the name of the data context // class in your application. model.RegisterContext(typeof(My_DatabaseEntities), new ContextConfiguration() { ScaffoldAllTables = true }); // The following statement supports separate-page mode, where the List, Detail, Insert, and // Update tasks are performed by using separate pages. To enable this mode, uncomment the following // route definition, and comment out the route definitions in the combined- page mode section that follows. routes.Add(new DynamicDataRoute("{table}/{action}.aspx") { Constraints = new RouteValueDictionary(new { action = "List|Details|Edit|Insert" }), Model = model }); // The following statements support combined-page mode, where the List, Detail, Insert, and // Update tasks are performed by using the same page. To enable this mode, uncomment the // following routes and comment out the route definition in the separate- page mode section above. //routes.Add(new DynamicDataRoute("{table}/ListDetails.aspx") { // Action = PageAction.List, Microsoft Vietnam – DPE Team | Bài số 8: Dynamic Data với ADO.NET Entity Framework 8
// ViewName = "ListDetails", // Model = model //}); //routes.Add(new DynamicDataRoute("{table}/ListDetails.aspx") { // Action = PageAction.Details, // ViewName = "ListDetails", // Model = model //}); } void Application_Start(object sender, EventArgs e) { RegisterRoutes(RouteTable.Routes); } Chúng ta vào Deburg→StartDebugging (hoặc F5) để chạy thử chương trình. Kết quả khi chạy chương trình (Hình 17). Hình 17 Khi click vào LoaiSanPhams kết quả như hình 18. Khi click vào SanPhams kết quả như hình 19. Hình 18 Hình 19 Microsoft Vietnam – DPE Team | Bài số 8: Dynamic Data với ADO.NET Entity Framework 9
1.5. Thêm Custom Metadata vào Model Để thêm tùy biến các mục, chúng ta cần tạo lớp Metadata để nó cung cấp cho hệ thống Dynamic Data thông tin về các thực thể. Đầ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, sau đó muốn thay đổi thuộc tính lên lớp này phải chỉ ra lớp Metadata cho lớp này. Trong ví dụ này chúng ta sẽ 2 lớp partial có tên là: LoaiSanPham và SanPham. Để thêm 2 lớp này chúng ta làm như sau: Click chuột phải vào “Add_Code” chọn “Add New Item”, trong hộp thoại “Add New Item”, chọn “Class”, đặt tên cho file là “MyClass.cs”, chọn ngôn ngữ là “Visual C#”, sau đó bấm “Add” (Hình 20). Hình 20: Thêm f ile MyClass.cs Mở file “MyClass.cs” khai báo thêm các namespace sau: using System.Web.DynamicData; using System.ComponentModel.DataAnnotations; using System.ComponentModel; Thêm 2 lớp partial có tên là: LoaiSanPham, SanPham và tên lớp của MetadataType trong namespace My_DatabaseModel. namespace My_DatabaseModel { [MetadataType(typeof(LoaiSanPham_Metadata))] public partial class LoaiSanPham { public class LoaiSanPham_Metadata { } } [MetadataType(typeof(SanPham_Metadata))] public partial class SanPham { public class SanPham_Metadata { } } } Trong ví dụ này sử dụng các thuộc tính TableName, DisplayName để thay đổi giao diện hiện thị cho 2 bảng LoaiSanPham và SanPham. Sử dụng Required để kiểu tra việc nhập dữ liệu cho trường “SoLuong” và “DonGia” của bảng SanPham. Sử dụng ScaffoldColumn để ẩn trường “Id” của 2 bảng. Microsoft Vietnam – DPE Team | Bài số 8: Dynamic Data với ADO.NET Entity Framework 10
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.DynamicData; using System.ComponentModel.DataAnnotations; using System.ComponentModel; namespace My_DatabaseModel { /// /// Thay đổi cho các thuộc tính cho 2 bảng SanPham và LoaiSanPham /// [MetadataType(typeof(LoaiSanPham_Metadata))] public partial class LoaiSanPham { partial void OnTenLoaiSanPhamChanging(string value) { if (Char.IsLower(value[0]))//Kiểm tự đầu tiên phải có phải là chữ hoa { throw new ValidationException("Tên loại sản phẩm ký tự đầu tiên phải là chữ hoa!"); } } [TableName("Loại sản phẩm")]//Sửa lại tên bảng "LoaiSanPham" thành "Loại sản phẩm" public class LoaiSanPham_Metadata { [ScaffoldColumn(false)]//// Ẩn cột Id public object Id { get; set; } [DisplayName("Tên loại sản phẩm")]//Sửa lại tên hiển thị cho trường TenLoaiSanPham public object TenLoaiSanPham { get; set; } [DisplayName("Sản phẩm")] public object SanPham { get; set; } } } [MetadataType(typeof(SanPham_Metadata))] public partial class SanPham { partial void OnTenSanPhamChanging(string value) { if (Char.IsLower(value[0]))//Kiểm tự đầu tiên phải có phải là chữ hoa { throw new ValidationException("Tên sản phẩm ký tự đầu tiên phải là chữ hoa!"); } } [TableName("Sản phẩm")]//Sửa lại tên bảng "SanPham" thành "Sản phẩm" public class SanPham_Metadata { [ScaffoldColumn(false)]// Ẩn cột Id public object Id { get; set; } [DisplayName("Tên sản phẩm")]//Sửa lại tên hiển thị cho trường TenLoaiSanPham public object TenSanPham { get; set; } [DisplayName("Số lượng")] [Required] [Range(0, 300)]//Nhập số lượng trong khoảng từ 0 đến 300 Microsoft Vietnam – DPE Team | Bài số 8: Dynamic Data với ADO.NET Entity Framework 11
public object SoLuong { get; set; } [DisplayName("Đơn giá")] [Required] [Range(100000, 3000000000)]//Nhập đơn giá trong khoảng từ 100.000 đến 3.000.000.000 public object DonGia { get; set; } [DisplayName("Loại sản phẩm")] public object LoaiSanPham { get; set; } } } } Để sửa lại đổi giao diện của trang Master chúng ta mở file “Site.master”. Ví dụ chúng ta một số nội dung do chương trình tạo ra bằng tiếng Anh và thay bằng tiếng Việt. Sửa: Dynamic Data Site Thành: Dynamic Data VỚI ADO.NET Entity Framework Sửa: Thành: Trong file “Details.aspx” sửa một số giao diện tiếng Anh và thay bằng tiếng Việt. Chi tiết một bản ghi của bảng ' Text="Sửa" /> Trong file “Edit.aspx” sửa lại Microsoft Vietnam – DPE Team | Bài số 8: Dynamic Data với ADO.NET Entity Framework 12
Trong file “Insert.aspx” sửa lại Trong file “List.aspx” sửa lại ' Text="Sửa" /> ' Text="Chi tiết" /> Không có dữ liệu trong bảng! Microsoft Vietnam – DPE Team | Bài số 8: Dynamic Data với ADO.NET Entity Framework 13
Bây giờ chúng ta chạy thử chương trình. Các giao diện đã được sửa thành tiếng Việt. Chúng ta vào Deburg→StartDebugging (hoặc F5) để chạy thử chương trình. Kết quả khi chạy chương trình file “Defautl.axpx” (Hình 21). Hình 21: Trang chủ của Vi_du_8 Khi click vào “Loại sản phẩm” kết quả như hình 22 hoặc click vào “Sản phẩm” kết quả như hình 23. Hình 22: Giao diện của bảng LoaiSanPham Hình 23: Giao diện của bảng SanPham Microsoft Vietnam – DPE Team | Bài số 8: Dynamic Data với ADO.NET Entity Framework 14
2. Câu hỏi ôn tập 1. Các tính năng của Dynamic Data? Trả lời: Web Scaffolding để tạo ra một ứng dụng web dựa trên các lược đồ cơ bản của cơ sở dữ liệu. Dynamic Data scaffolding có thể tạo ra một chuẩn UI (User Interface – Giao diện người dùng) từ các mô hình dữ liệu. Đầy đủ các thao tác (tạo, cập nhật, xóa bỏ, hiển thị) cho việc truy cập dữ liệu truy cập dữ liệu, các thao tác về quan hệ giữa các bảng và kiểm tra tính hợp lệ của dữ liệu. Tự động hỗ quan các quan hệ khóa ngoài (foreign-key). Dynamic Data phát hiện ra các quan hệ giữa các bảng và từ đó tạo ra các giao diện người dùng trên các bảng quan hệ. Khả năng tùy chỉnh các UI. Khả năng tùy chỉnh tính hợp lệ cho các trường dữ liệu. 2. Dynamic Data hỗ trợ các các mô hình dữ liệu nào? Trả lời: Dynamic Data hỗ trợ 2 mô hình dữ liệu LINQ to SQL và ADO.NET Entity Framework. 3. Các bước cơ bản xây dựng Dynamic Data với ADO.NET Entity Framework Trả lời: Tạo project Dynamic Data ADO.NET Entity Framework Xây dựng Cơ sở dữ liệu Tạo Data Model với ADO.NET Entity Framework Đăng ký DataModel với file Global.asax Thêm Custom Metadata vào Model 3. Tài liệu tham khảo 1. Using ASP.NET Dynamic Data, URL: 2. Microsoft ASP.NET, URL: 3. ScottGu's Blog, URL: net-dynamic-data-asp-net-ajax-asp-net-mvc-visual-studio-silverlight-wpf.aspx Microsoft Vietnam – DPE Team | Bài số 8: Dynamic Data với ADO.NET Entity Framework 15
MỤC LỤC 1. JQUERY là gì? 2 2. Download jQuery 2 3. Sử dụng jQuery trong ASP.NET 3 4. jQuery hoạt động như thế nào? 3 4.1. Chạy mã khi Document Ready (trang đã sẵn sàng) 3 4.2. Function $() 4 5. Một số API trong jQuery 4 5.1. Selectors 4 5.1.1. Basic 4 5.1.2. HIERACHY 5 5.1.3. Basic Filters (Các yếu tố chọn lọc cơ bản) 6 5.1.4. Content Filters (Chọn lọc nội dung) 7 5.1.5. Visibility Filters 8 5.2 Attributes 9 5.2.1 Class 9 5.2.2 HTML, Text 10 5.3 Events 10 6. Câu hỏi ôn tập 12 7. Tài liệu tham khảo 13
Bài số 9 JQUERY Bài này giới thiệu tổng quan jQuery. 1. JQUERY là gì? jQuery là một thư viện kiểu mới của Javascript giúp đơn giản hóa cách viết JavaScript và tăng tốc độ xử lý các sự kiện trên trang web. Các thư viện jQuery cung cấp một mục đích chung là sự trừu tượng hoá các lớp phổ biến cho các trang web scripting, do đó nó hữu ích trong hầu hết các tình huống scripting. Các chức năng jQuery bao gồm: Chọn một tag hoặc một tập hợp các tag trên trang web. Cung cấp các hàm tiện ích thông dụng. Nhanh chóng tạo ra các tag mới. Quan trọng nhất là phân tách việc thiết kế và lập trình web trên phía client. 2. Download jQuery jQuery là một thư viện script, do đó chúng ta có thể thêm vào trang web. Chúng ta có thể download phiên bản mới nhất của jQuery từ Hình 1: Downdload jQuery Như hình 1 ở trên phiên bản mới nhất của jQuery là 1.3.2, sau khi download về chúng ta được file “jquery- 1.3.2.js”, sau đó để viết ứng dụng bạn chỉ cần nhúng file “jquery-1.3.2.js” vào phần javascript của trang. Trong Visual Studio 2008 SP1 đã hỗ trợ đầy đủ các chức năng của JavaScript Intellisense. Để Visual Studio hỗ trợ Intellisense cho jQuery, chúng ta cần cài đặt thêm “Visual Studio 2008 Patch KB958502”, và download từ: Sau đó chúng ta download file “jquery-1.3.2-vsdoc.js” từ: Mục đích chính của “jquery-1.3.2-vsdoc.js” là giúp đỡ chúng ta trong việc viết các dòng chú thích và hỗ trợ cho việc phát sinh mã thông minh trong khi soạn thảo jQuery. Microsoft Vietnam – DPE Team | Bài số 9: jQuery 2
3. Sử dụng jQuery trong ASP.NET Chúng ta tạo một project (Vi_du_9) sau đó thêm 2 file “jquery-1.3.2.js” và “jquery-1.3.2-vsdoc.js” vào trong project (hình 2). Hình 2 Trước khi viết các câu lệnh jQuery là bạn chỉ cần khai báo sử dụng thư viện jQuery như sau: Vi_du_9 4. jQuery hoạt động như thế nào? 4.1. Chạy mã khi Document Ready (trang đã sẵn sàng) Có thể thấy rằng hầu hết khi lập trình với Javascript, kết thúc mã thực thi bằng cách thêm các dòng mã vào script, tương tự như sau: window.onload = function() { } Các mã bên trong đó sẽ được thực thi khi trang được tải xong. Tuy nhiên, mã Javascript không chạy cho đến khi tất cả các hình ảnh trong trang được tải xong (kể cả banner quảng cáo). Lý do cho việc sử dụng window.onload là để chắc chắn rằng HTML 'document' phải được tải xuống hết, sau đó mới chạy mã kia. Để giải quyết, jQuery có câu lệnh đơn giản, được biết như: $(document).ready(function() { //Mã của chúng ta }); Mã này kiểm tra document và đợi cho đến khi nó sẵn sàng để sử dụng - theo ý chúng ta muốn. Microsoft Vietnam – DPE Team | Bài số 9: jQuery 3
4.2. Function $() Khi chúng ta làm việc với CSS, Xpath hoặc custom, jQuery sử dụng function $() (dấu $ và cặp dấu ngoặc). Dưới dây là một số thành phần trong $(): $("p"): p là tên của một thẻ (tag). $("#id"): id là tên của một id. $(".class"): class là tên của một lớp. 5. Một số API trong jQuery 5.1. Selectors 5.1.1. Basic id # Trả về một phần tử của mảng: Array Nó tương ứng với một phần tử duy nhất được gán bởi thuộc tính id. Nếu id chứa các ký tự như dấu chấm (.) hoặc 2 dấu [] thì chúng phải thêm 2 dấu ngạch chéo (\\) vào trước các ký tự đó. Nếu là $("#some.id") thì phải viết thành $("#some\\.id") Nếu là $("#some[id]") thì phải viết thành $("#some\\[id]\\") element Kiểu trả về: Array Tương ứng với tất cả các phần tử với tên được gán. .class Kiểu trả về: Array Tương ứng với tất cả các phần tử với tên lớp. * Kiểu trả về: Array Tương ứng với tất cả các phần tử. selector1, selector2, selectorN Kiểu trả về: Array Phù hợp với sự kết hợp của tất cả các kết quả xác định selectors, số lượng selectors là bất kỳ, trật tự của các phần tử DOM trong đối tượng jQuery không nhất thiết phải đúng thứ tự. Ví dụ: Vi_du_9_1.aspx Vi_du_9_1 $(document).ready(function() { $("#div1").css("color", "red"); $("#div3\\.1\\.\\[0\\]").css("color", "red"); $("div").css("width", "200px"); $("div").css("height", "100px"); $(".Class1").css("color", "red"); $("*").css("border", "1px solid blue"); Microsoft Vietnam – DPE Team | Bài số 9: jQuery 4
$("div,span").css("background-color", "#EEEEEE"); }); div { float:left;padding: 5px;margin: 5px; } .Class1{ } Visual Studio 2008 ASP.NET 3.5 Chào mừng bạn đến với jQuery 5.1.2. HIERACHY ancestor descendant Kiểu trả về: Array Tương ứng với tất cả các phần tử với danh nghĩa descendant của các phần tử xác định bởi danh nghĩa “ancestor”. Ví dụ: $("form input").css("border", "2px dotted blue"); parent > child Kiểu trả về: Array Tương ứng với các phần tử con dưới danh nghĩa “child” của phần tử được xác định với danh nghĩa “parent”. Ví dụ: $("#main > *").css("border", "3px double red"); prev + next Kiểu trả về: Array Phù hợp với tất cả các yếu tố sau được xác định bởi "kế tiếp" bên cạnh đó là yếu tố xác định bởi "prev". Ví dụ: $("label + input").css("color", "blue").val("Labeled!"); prev ~ siblings Kiểu trả về: Array Phù hợp với tất cả các yếu tố sau "prev" và với các yếu tố lọc "siblings" (liên quan) của selector. Ví dụ: $("#prev ~ div").css("border", "3px groove blue"); Ví dụ: Vi_du_9_2.aspx Vi_du_9_1 $(document).ready(function() { $("form input").css("border", "1px solid blue"); $("#submit > *").css("border", "1px solid red"); $("label + input").css("background-color", "#EEEEEE"); }); body { font-size:14px; } form { border:2px green solid; padding:2px; margin:0; background:#efe; } div { color:red; } fieldset { margin:1px; padding:3px; } Microsoft Vietnam – DPE Team | Bài số 9: jQuery 5
Nhập thông tin cá nhân Họ và tên: Nơi công tác Tên công ty: Địa chỉ: Hộ khẩu thường trú: Cập nhật Hủy bỏ 5.1.3. Basic Filters (Các yếu tố chọn lọc cơ bản) :first Kiểu trả về: Array Tương ứng với phần tử đầu tiên được chọn. Ví dụ: $("tr:first").css("font-style", "italic"); :last Kiểu trả về: Array Tương ứng với phần tử cuối cùng được chọn. Ví dụ: $("tr:last").css("background-color", "yellow"); :not(selector) Kiểu trả về: Array Bỏ ra tất cả các phần tử tương ứng cho selector. Ví dụ: $("input:not(:checked)+span").css("background-color", "yellow"); :even Kiểu trả về: Array Tương ứng với các phần tử chẵn, chỉ số 0, 2, 4, Ví dụ: $("tr:even").css("background-color", "#bbbbff"); :odd Kiểu trả về: Array Tương ứng với các phần tử lẻ, chỉ số 1, 3, 5, Ví dụ: $("tr:odd").css("background-color", "#bbbbff"); :eq(index) Kiểu trả về: Array Tương ứng với một phần tử riêng lẻ bởi chỉ số của nó. Ví dụ: $("td:eq(2)").css("color", "red"); :gt(index) Kiểu trả về: Array Tương ứng với tất cả các phần ở trên chỉ số được gán. Ví dụ: $("td:gt(2)").css("color", "red"); :lt(index) Kiểu trả về: Array Tương ứng với tất cả các phần ở dưới chỉ số được gán. Ví dụ: $("td:lt(2)").css("color", "blue"); :header Kiểu trả về: Array Tương ứng với tất cả các phần tử tiêu đề, giống như h1, h2, h3 Microsoft Vietnam – DPE Team | Bài số 9: jQuery 6
Ví dụ: $(":header").css({ background: '#CCC', color: 'blue' }); Ví dụ: Vi_du_9_3.aspx Vi_du_9_3 $(document).ready(function() { $("tr:first").css("font-style", "italic"); $("tr:last").css({ backgroundColor: 'yellow', fontWeight: 'bolder' }); $("tr:even").css("color", "red"); $("tr:odd").css("color", "blue"); $("tr:eq(4)").css("text-decoration", "line-through"); $("tr:gt(6)").css("font-size", "30px"); $("tr:lt(3)").css("font-size", "25px"); $(":header").css({ background: '#CCC', color: 'blue' }); }); Dòng thứ 1 Dòng thứ 2 Dòng thứ 3 Dòng thứ 4 Dòng thứ 5 Dòng thứ 6 Dòng thứ 7 Dòng thứ 8 Dòng thứ 9 Tiêu đề 1 Nội dung 1 Tiêu đề 2 Nội dung 2 5.1.4. Content Filters (Chọn lọc nội dung) :contains(text) Kiểu trả về: Array Tương ứng với các phần tử chứa nội dung văn bản. Ví dụ: Gạch chân tất cả các thẻ “div” có chứa từ “John”. $("div:contains('John')").css("text-decoration", "underline"); :empty Kiểu trả về: Array Tương ứng với tất cả các phần tử không có phần tử con Ví dụ: Chèn xâu “Không có nội dung” màu đỏ vào các thẻ “td” không có phần tử con. $("td:empty").text("Không có nội dung!").css('color','red'); :has(selector) Kiểu trả về: Array Tương ứng với các phần tử bao gồm ít nhất một phần tử phù hợp với định danh selector. Ví dụ: Đặt cỡ chữ là 30px cho đoạn văn có nằm trong các thẻ “div” có chứa thẻ “p”. $("div:has(p)").css("font-size", "30px"); :parent Kiểu trả về: Array Tương ứng với tất cả các phần tử là cha (chứa các phần tử con, gồm cả phần tử văn bản). Microsoft Vietnam – DPE Team | Bài số 9: jQuery 7
Ví dụ: Đặt cỡ chữ là 30px cho các thẻ “td” cha có phần tử con. $("td:parent)").css("font-size", "30px"); Ví dụ: Vi_du_9_4.aspx Vi_du_9_4 $(document).ready(function() { $("div:contains('Thị')").css("text-decoration", "underline"); $("td:empty").css("background-color", "#EEEEEE"); $("div:has(p)").css("font-size", "30px"); $("td:parent").css("color", "yellow"); }); td {width:200px;background:green; } Danh sách lớp 12A3 Đỗ Thị Thu Hằng Lê Văn Bình Trần Thị Hương Nguyễn Hải Nam Hoàng Thu Bình TD #0 TD #2 Chào bạn đến với jQuery Chào bạn đến với jQuery 5.1.5. Visibility Filters :hidden Kiểu trả về: Array Tương ứng với tất cả các phần tử được ẩn đi hoặc phần tử vào có dạng ẩn “hidden”. Ví dụ: Ẩn các thẻ “div”. $("div:hidden").show(3000); :visble Kiểu trả về: Array Tương ứng với các phần tử nhìn thấy được Ví dụ: Click chuột vào các thẻ div nhìn thấy được. $("div:visible").click(function() {$(this).css("background", "yellow");}); Ví dụ: Vi_du_9_5.aspx Vi_du_9_5 Microsoft Vietnam – DPE Team | Bài số 9: jQuery 8
$(document).ready(function() { $("span:first").text("Tìm thấy " + $(":hidden", document.body).length + " phần tử ẩn."); $("div:hidden").show(3000); $("span:last").text("Tìm thấy " + $("input:hidden").length + " inputs ẩn."); $("div:visible").click(function() { $(this).css("background", "yellow"); }); }); div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; } span { display:block; clear:left; color:red; } .starthidden { display:none; } Ẩn Ẩn 5.2 Attributes 5.2.1 Class addClass( class ) Kiểu trả về: jQuery Thêm các class đã xác định vào mỗi tập phần tử phù hợp. Nếu có thêm nhiều class thì các class được các nhau bởi khoảng trắng. Ví dụ: Thêm class “Maudo” vào các thẻ p. $("p").addClass("Maudo"); removeClass( class ) Kiểu trả về: jQuery Loại bỏ tất cả hoặc các class đã xác định khỏi tập phần tử phù hợp. Ví dụ: Loại bỏ lass “Maudo” khỏi các thẻ p. $("p").removeClass("Maudo"); toggleClass( class ) Kiểu trả về: jQuery Thêm class nếu class chưa tồn tại hoặc loại bỏ nếu class đã tồn tại. Ví dụ: Thêm class “Maudo” vào thẻ p nếu class “Maudo” chưa tồn tại trong thẻ p hoặc loại bỏ class “Maudo” khỏi thẻ p nếu nó tồn tại. $("p").toggleClass("Maudo"); Ví dụ: Vi_du_9_6.aspx Microsoft Vietnam – DPE Team | Bài số 9: jQuery 9
Vi_du_9_6 $(document).ready(function() { $("p").addClass("under"); $("p:last").removeClass("highlight"); $("p").click(function() { $("p").removeClass("highlight"); $(this).toggleClass("highlight"); }); }); p { margin: 4px; font-size:16px; font-weight:bolder; } .blue { color:blue; } .under { text-decoration:underline; } .highlight { background:yellow; } Visual Studio 2000 ASP.NET 3.5 Chào mừng bạn đến với jQuery 5.2.2 HTML, Text html() Kiểu trả về: String Lấy nội dung html (innerHTML) của phần tử. Ví dụ: Mỗi khi click vào thẻ p lấy nội dung html của thẻ p đó và thông báo nội dung lấy được. $("p").click(function() {alert($(this).html())}); html( val ) Kiểu trả về: jQuery Thiết lậ nội dung html (innerHTML) cho phần tử. Ví dụ: Thiết lập nội dung html cho thẻ div. $("div").html(" Chào các bạn! Chúc buổi học hôm nay thú vị. "); text() Kiểu trả về: String Lấy nội dung text (innerText) của phần tử. Ví dụ: Mỗi khi click vào thẻ p lấy nội dung text của thẻ p đó và thông báo nội dung lấy được. $("p").click(function() {alert($(this).html())}); text( val ) Kiểu trả về: jQuery Thiết lập nội dung text (innerText) cho phần tử. Ví dụ: Thiết lập nội dung text cho thẻ div. $("div").text("Chào các bạn! Chúc buổi học hôm nay thú vị"); 5.3 Events Bind( type, [data], fn ) Bind một hander vào một sự kiện cho mỗi phần tử phù hợp, “type” là sự kiện, “[data]” (tùy chọn) thêm dữ liệu thông qua sự kiện, “fn” là hàm xử lý khi sự kiện đó xảy ra. Microsoft Vietnam – DPE Team | Bài số 9: jQuery 10
one( type, [data], fn ) Bind một hander vào một sự kiện và nó được thực thi 1 lần cho mỗi phần tử phù hợp. trigger( type, [data] ) Kích một sự kiện trên mọi phần tử phù hợp. unbind( [type], [data] ) Loại bỏ sự kiện khỏi phần tử hover( over, out ) over, out là 2 hàm xử lý sự kiện. Hàm over xử lý khi chuột di chuyển trên phần tử hàm out xử lý khi chuột rời khỏi phần tử toogle( fn, fn ) Chuyển đổi gọi hàm giữa 2 lần click. Ví dụ: Vi_du_9_7.aspx Vi_du_9_7 $(document).ready(function() { $("p:first").bind("click", function(e) { var str = "( " + e.pageX + ", " + e.pageY + " )"; $("span:first").text("Sự kiện click vừa xảy ra tại vị trí " + str); }); $("p:first").bind("dblclick", function() { $("span:first").text("Sự kiện click đúp vừa xảy ra tại thẻ " + this.tagName); }); var n = 0; $("div:lt(2)").one("click", function() { var index = $("div").index(this) + 1; $(this).css({ borderStyle: "inset", cursor: "auto" }); $("p:last").text("Hình chữ nhật thứ " + index + " vừa được click." + " Tổng cộng có " + ++n + " click."); }); $("button:eq(0)").click(function() { update($("span:eq(1)")); }); $("button:eq(1)").click(function() { $("button:first").trigger('click'); update($("span:eq(2)")); }); function update(j) { var n = parseInt(j.text(), 0); j.text(n + 1); } function aClick() { $("div:last").show().fadeOut("slow"); } Microsoft Vietnam – DPE Team | Bài số 9: jQuery 11
$("#bind").click(function() { // could use .bind('click', aClick) instead but for variety $("#theone").click(aClick).text("Có thể click"); }); $("#unbind").click(function() { $("#theone").unbind('click', aClick) .text("Không làm gì cả "); }); $("li").hover( function() { $(this).css("color", "red"); }, function() { $(this).css("color", "black"); } ); }); p { background:yellow; font-weight:bold; cursor:pointer; padding:5px; } span { color:red; } .div1 { width:60px; height:60px; margin:5px; float:left; background:green; border:5px outset; cursor:pointer; } Click hoặc click đúp vào đây. Hãy click vào các hình chữ nhật màu xanh Button thứ 1 Button thứ 2 0 lần button thứ 1 được click. 0 lần button thứ 2 được clicks. Không làm gì cả Bind Click Unbind Click Click! Hãy di chuyển chuột lên Máy bay, Ôtô, Xe máy, Xe đạp Máy bay Ôtô Xe máy Xe đạp 6. Câu hỏi ôn tập 1. jQuery là gì? Trả lời: jQuery là một thư viện kiểu mới của Javascript giúp đơn giản hóa cách viết JavaScript và tăng tốc độ xử lý các sự kiện trên trang web. Các thư viện jQuery cung cấp một mục đích chung là sự trừu tượng hoá các lớp phổ biến cho các trang web scripting, do đó nó hữu ích trong hầu hết các tình huống scripting. Các chức năng jQuery bao gồm: Chọn một tag hoặc một tập hợp các tag trên trang web. Cung cấp các hàm tiện ích thông dụng. Microsoft Vietnam – DPE Team | Bài số 9: jQuery 12
Nhanh chóng tạo ra các tag mới. Quan trọng nhất là phân tách việc thiết kế và lập trình web trên phía client. 2. Trong Visual Studio 2008 có hỗ trợ Intellisense cho jQuery không? Trả lời: Có. Nếu chúng ta downdload và cài đặt file sau: Sau đó chúng ta download file “jquery-1.3.2-vsdoc.js” từ: 7. Tài liệu tham khảo 1. jQuery, URL: 2. ScottGu's Blog, URL: net-dynamic-data-asp-net-ajax-asp-net-mvc-visual-studio-silverlight-wpf.aspx Microsoft Vietnam – DPE Team | Bài số 9: jQuery 13
Bài số 2 Giới thiệ u về cać h thức truy cậ p dữ liệ u Table of Contents 1 Tổng quan 2 2 Truy cập dữ liệu ADO.NET 3 3 Truy cập dữ liệu XML 4 4 Truy cập dữ liệu với SqlDataSource. 5 5 Truy cập dữ liệu LINQ 7 5.1 LINQ cơ bản 7 5.1.1 Cách làm việc của LINQ 7 5.1.2 Cú pháp LINQ 8 5.1.3 Dùng filter và sorting với LINQ 8 5.2 LinqDataSource 8 6 Truy cập dữ liệu với web services 11 7 Truy cập dữ liệu với Ajax 12 8 Câu hỏi ôn tập 14 9 Tài liệu tham khảo 14
1 Tổng quan Phần lớn các ứng dụng hiện nay đều sử dụng cơ sở dữ liệu. Có nhiều cách thức truy cập dữ liệu khác nhau trong các công nghệ của Microsoft như ADO, RDO, DAO, ODBC. Tuy nhiên từ khi .NET Framework ra đời thì công nghệ ADO.NET đã được tích hợp, ADO.NET chứa các lớp cho phép các ứng dụng connect data sources (kết nối với các nguồn dữ liệu), execute commands (thực hiện các lệnh), manage disconnected data (quản lý dữ liệu đã ngắt kết nối). Với ADO.NET người lập trình có thể viết ít mã lệnh thao tác cơ sở dữ liệu hơn so với các công nghệ trước trong các ứng dụng client-server hoặc các ứng dụng trên desktop. Mặt khác, trong ASP.NET từ phiên bản .NET Framework 2.0 trở lên có thêm các thao tác với cơ sở dữ liệu mà không sử dụng ADO.NET như SqlDataSource, LINQ hoặc Profiles. Ngoài ra các ứng dụng truy cập dữ liệu của .NET Framework còn có thể truy nhập vào các nguồn dữ liệu ngoài như File, Stream, XML, Ajax, web services, WCF, data services. Trong hướng dẫn này, ta sẽ tạo ra một Web site project thao tác với cơ sở dữ liệu. Sử dụng Visual Studio 2008 tạo một project Website. Trong đó tạo một database tên là DB_TEST.MDF trong folder App_Data (Figure 1) Figure 1. Tạo database DB_TEST trong ứng dụng Website Sử dụng database DB_TEST tạo 2 table HangHoa và KhoHang (Figure 2, Figure 3) Microsoft Vietnam – DPE Team | Bài số 2: Giới thiệu cách thức truy cập dữ liệu 2
Figure 2. Table HangHoa trong database DB_TEST Figure 3. Table KhoHang trong database DB_TEST Tạo một chuỗi connection trong file cấu hình web.config đặt tên là ConnectionString cho phép truy nhập vào cơ sở dữ liệu DB_TEST.MDF web.config // các thiết lập cấu hình khác 2 Truy cập dữ liệu ADO.NET ADO.NET Data Providers cho phép truy nhập vào một cơ sở dữ liệu cụ thể, thực hiện các câu lệnh SQL và nhận dữ liệu. Data provider là chiếc cầu nối giữa ứng dụng và nguồn dữ liệu. Lớp ADO.NET Data Provider bao gồm các thành phần: Connection: Thực hiện connect tới nguồn cơ sở dữ liệu; Command: Thực hiện một câu lệnh SQL hoặc một store procedures; DataReader: Chỉ đọc và nhận dữ liệu từ một truy vấn; DataAdapter thực hiện 2 nhiệm vụ: Điền dữ liệu nhận được vào một DataSet, có thể ghi nhận sự thay đổi dữ liệu trong DataSet. Một ví dụ sử dụng ADO.NET với đối tượng hiển thị dữ liệu là GridView. Tạo một webform đặt tên là Adonet.aspx, trong webform đó tạo một GridView đặt tên là GridView1. Mã lệnh thực hiện kết nối dữ liệu: Adonet.aspx.cs SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].Connection String); Microsoft Vietnam – DPE Team | Bài số 2: Giới thiệu cách thức truy cập dữ liệu 3
SqlCommand sql = new SqlCommand("SELECT * FROM HangHoa", conn); DataSet ds = new DataSet(); SqlDataAdapter sda = new SqlDataAdapter(sql); sda.Fill(ds,"HangHoa"); DataTable dt = ds.Tables["HangHoa"]; GridView1.DataSource = dt.DefaultView; GridView1.DataBind(); Figure 4. Thực hiện chương trình với truy nhập dữ liệu ADO.NET 3 Truy cập dữ liệu XML Dữ liệu XML ngày càng thông dụng và được phát triển mạnh mẽ hơn trước. Trong các ứng dụng ngày nay, việc sử dụng XML thay cho dữ liệu truyền thống đang có xu hướng phát triển mạnh mẽ. Tuy nhiên các ứng dụng sử dụng XML làm cơ sở dữ liệu vẫn còn ở mức quy mô nhỏ và hạn chế. Ví dụ sử dụng GridView để hiển thị dữ liệu trong một file XML. Employee.xml Nguyen Van A 1988 Student Do Nhu B 1989 Engineer XML.aspx.cs DataSet ds = new DataSet(); ds.ReadXml(Server.MapPath("Employee.xml")); DataTable dt = ds.Tables["Employees"]; GridView1.DataSource = dt.DefaultView; GridView1.DataBind(); Microsoft Vietnam – DPE Team | Bài số 2: Giới thiệu cách thức truy cập dữ liệu 4
Figure 5. Thực hiện truy cập dữ liệu XML 4 Truy cập dữ liệu với SqlDataSource. SqlDataSource là một thành phần được giới thiệu từ .NET Framework 2.0. Sử dụng SqlDataSource để truy cập dữ liệu sẽ không cần phải viết mã lệnh lập trình, chỉ cần khai báo đầy đủ các thuộc tính cần. SqlDataSource chỉ nên dùng khi không cần sử dụng các truy vấn SQL quá phức tạp để thao tác với cơ sở dữ liệu. SqlDataSource là một cách thức kết nối dữ liệu dùng ADO.NET provider (System.Data.SqlClient, System.Data.OracleClient, System.Data.OleDbClient, System.Data.OdbcClient). SqlDataSource cần có một connectionString thường đặt trong web.config. Tiếp theo của SqlDataSource là một câu lệnh SQL có thể là một câu lệnh truy vấn SELECT hoặc các câu lệnh liên quan đến thay đổi dữ liệu như: DELETE, INSERT, UPDATE. Figure 6. Tạo SqlDataSource truy cập cơ sở dữ liệu Microsoft Vietnam – DPE Team | Bài số 2: Giới thiệu cách thức truy cập dữ liệu 5
Figure 7. Lựa chọn kết nối cơ sở dữ liệu trong SqlDataSource Lựa chọn table cần hiển thị dữ liệu vào trong SqlDataSource (ví dụ table KhoHang) sau đó thiết lập GridView trỏ vào SqlDataSource vừa được tạo (Figure 8) Figure 8. Lựa chọn SqlDataSource1 cho GridView1 Microsoft Vietnam – DPE Team | Bài số 2: Giới thiệu cách thức truy cập dữ liệu 6
Figure 9. Thực hiện truy cập dữ liệu với SqlDataSource 5 Truy cập dữ liệu LINQ LINQ là một sự sáng tạo mới trong .NET Framework 3.5 (Language Integrate Query) là một tập hợp mở rộng ngôn ngữ cho phép thực hiện các truy vấn trong ngôn ngữ C# 2008 và Visual Basic 2008. LINQ cho phép select, filter, sort, group và transform data từ các nguồn data source khác nhau theo một cách chung. LINQ to Objects thực hiện truy vấn các đối tượng, LINQ to DataSet thực hiện truy vấn DataSet, LINQ to SQL thực hiện truy vấn đến cơ sở dữ liệu SQL Server mà không phải viết code, LINQ to XML đọc dữ liệu từ định dạng XML. 5.1 LINQ cơ bản Ví dụ, nếu không dùng LINQ cho, cần lấy tất cả hàng hóa bắt đầu bằng B thì ta có code sau: DanhMucHangHoa dm = new DanhMucHangHoa(); List dshh = dm.LayDanhMucHangHoa(); List dmhh = new List (); foreach (HangHoaChiTiet hh in dshh) { if (hh.HangHoa_TenHang.ToString().StartsWith("B")) { dmhh.Add(hh); } } Nếu sử dụng LINQ trong mã lập trình: List dshh = dm.LayDanhMucHangHoa(); IEnumerable dmhh; dmhh = from hh in dshh where hh.HangHoa_TenHang.ToString().StartsWith("B") select hh; GridView1.DataSource = dshh; GridView1.DataBind(); 5.1.1 Cách làm việc của LINQ Để dùng LINQ cần tạo ra một LINQ expression theo đúng quy tắc. Giá trị trả về của LINQ expression là một đối tượng iterator thực thi giao diện IEnumerable Khi enumerable đã được gán vào iterator thì LINQ thực hiện. Microsoft Vietnam – DPE Team | Bài số 2: Giới thiệu cách thức truy cập dữ liệu 7
5.1.2 Cú pháp LINQ Cú pháp của LINQ tương tự như một cú pháp của SQL nhưng có trật tự khác với SQL. dmhh = from hh in dshh ; Ví dụ: IEnumerable dmhh = from hh in dshh select hh.HangHoa_TenHang; 5.1.3 Dùng filter và sorting với LINQ IEnumerable dmhh; dmhh = from hh in dshh where hh.HangHoa_TenHang.ToString().StartsWith("B") select hh; hoặc IEnumerable dmhh; dmhh = from hh in dshh orderby hh.HangHoa_TenHang select hh; Có thể dùng LINQ như sau (hai câu lệnh sau tương đương nhau): IEnumerable dmhh = from hh in dshh select hh; IEnumerable dmhh = hh.Select(hh => hh); 5.2 LinqDataSource LinqDataSource là một control có thể thực hiện nhiều tác vụ thêm, sửa, xóa dữ liệu một cách tự động. Với LinqDataSource không cần viết code cho cả việc cập nhật, sửa đổi dữ liệu cũng giống như SqlDataSource. Trước hết cần phải tạo ra một Linq to SQL class: File New File LINQ to SQL class (Figure 10) Microsoft Vietnam – DPE Team | Bài số 2: Giới thiệu cách thức truy cập dữ liệu 8
Figure 10. Tạo ra một LinqSqlDataContext cho phép LinqDataSource truy nhập Tạo ra mô hình LinqSqlDataContext cho phép Linq lấy dữ liệu từ database DB_TEST.MDF (Figure 11) Figure 11. Mô hình LinqSqlDataContext Thiết lập cấu hình cho control Linqdatasource1: Chọn Linqdatasource1 Configure Data Source Chọn LinqSqlDataContext (Figure 12) Microsoft Vietnam – DPE Team | Bài số 2: Giới thiệu cách thức truy cập dữ liệu 9
Figure 12. LinqDataSource Configure Data Source Thực hiện đưa dữ liệu từ LinqDataSource vào vào GridView (Figure 13) Figure 13. Chọn DataSource của GridView1 là LinqDataSource1 Microsoft Vietnam – DPE Team | Bài số 2: Giới thiệu cách thức truy cập dữ liệu 10
Figure 14. Thực hiện truy cập dữ liệu với LinqDataSource 6 Truy cập dữ liệu với web services Web services là một ứng dụng quan trọng trong các ứng dụng. Phần lớn các ứng dụng hiện nay đều sử dụng web services. Cách đơn giản nhất là thông qua HTTP-POST hoặc HTTP-GET hoặc SOAP. Mục đích của web services là các ứng dụng khác nhau có thể sử dụng các phương thức web services có sẵn mà không cần phải viết lại chúng nên sẽ tiết kiệm nhiều thời gian và công sức. Từ Solution Explorer Website chọn Add New Item Web Service WebService.asmx (Figure 15) Figure 15. Tạo web services trong ứng dụng Mặc định với mỗi web service được tạo ra trong các ứng dụng sử dụng Visual Studio đều có sẵn phương thức HelloWorld. Phương thức này trả về một giá trị string là “Hello World”. Ta tạo thêm một phương thức DanhMucHangHoa để truy cập vào dữ liệu đã có trong ứng dụng. Các phương thức trong web services được tạo Microsoft Vietnam – DPE Team | Bài số 2: Giới thiệu cách thức truy cập dữ liệu 11
như các phương thức bình thường trong ứng dụng nhưng có thêm thuộc tính chỉ định nó là một web services ký pháp là [WebMethod]. WebService.asmx.cs [WebMethod] public DataSet DanhMucHangHoa() { SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].Connection String); DataSet ds = new DataSet(); SqlDataAdapter sda = new SqlDataAdapter("SELECT * FROM HangHoa", conn); sda.Fill(ds, "HangHoa"); return ds; } Dùng một GridView để nhận dữ liệu từ phương thức DanhMucHangHoa của web services để kiểm tra xem dữ liệu nhận được như thế nào. Từ Website Add New Item WebForm WebServices.aspx WebServices.aspx.cs protected void Page_Load(object sender, EventArgs e) { WebService vs = new WebService(); GridView1.DataSource = vs.DanhMucHangHoa().Tables["HangHoa"].DefaultView; GridView1.DataBind(); } Kết quả khi thực hiện (Figure 16) Figure 16. Kết nối dữ liệu với web services 7 Truy cập dữ liệu với Ajax Hiện nay công nghệ AJAX đang được ưa chuộng trong lĩnh vực lập trình web. Thiếu vắng AJAX thì nền tảng được coi là Web 2.0 sẽ không còn tồn tại. Về mặt công nghệ Ajax cho ta một cái nhìn mới về tương tác giữa web client và web server. Ajax được coi là chiếc cầu nối giữa client và server, làm tăng tốc độ thực hiện của ứng dụng, làm ẩn đi cơ chế postback khiến người dùng tưởng như đang làm việc trên một ứng dụng desktop hơn là một ứng dụng web. Microsoft Vietnam – DPE Team | Bài số 2: Giới thiệu cách thức truy cập dữ liệu 12
Ajax sử dụng XMLHttpRequest của trình duyệt để gửi một yêu cầu đến web server thay cho Request truyền thống. Dữ liệu từ web server trả về cho XMLHttpRequest có dạng một tài liệu XML hoặc một tài liệu dạng Text. Dữ liệu này có thể được xử lý bởi các hàm Javascript trước khi được trả lại cho trình duyệt. Khác với cách gửi request – response truyền thống thì dữ liệu từ web server trả về cho client được trình duyệt hiển thị ngay mà không qua một bước xử lý trung gian nào nữa. Sử dụng các framework AJAX có sẵn để gọi Ajax. Ví dụ ta gọi URL bằng ajax của thư viện miễn phí prototype.js như sau (Figure 17) Figure 17. Sử dụng AJAX AJAX có 2 dạng dữ liệu được trả về là responseText và responseXML. Tùy từng mục đích sử dụng mà có thể lựa chọn cách thức lấy dữ liệu về cho hợp lý. Mặt khác, khi nhận được dữ liệu từ AJAX trả về có thể xử lý trước khi hiển thị dữ liệu cho người dùng cuối. Kết quả thực hiện Ajax với tham số URL: (Figure 18) Microsoft Vietnam – DPE Team | Bài số 2: Giới thiệu cách thức truy cập dữ liệu 13
Figure 18. Gọi AJAX với tham số URL 8 Câu hỏi ôn tập Câu hỏi: Từ khi có các control SqlDataSource, LinqDataSource thì có cần thiết dùng các đối tượng của ADO.NET (Connection, Command, Adapter, ) để truy cập dữ liệu nữa không? Trả lời: Vẫn cần thiết vì dù các đối tượng SqlDataSource, LinqDataSource rất linh hoạt và có thể đảm đương hầu hết các chức năng nhưng vẫn chưa thể cung cấp đủ cho nhu cầu người dùng nhất là đối với những thao tác phức tạp lên cơ sở dữ liệu. Câu hỏi: Khi cần thực hiện lấy dữ liệu từ một table trong cơ sở dữ liệu sử dụng ADO.NET rồi đưa vào đối tượng DataTable thì cần các bộ thành phần nào sau đây: A. Connection, Command, Adapter B. Connection, DataSet, Adapter C. Connection, DataTable, DataSet D. Command, Adapter, DataTable Trả lời: Đáp án B. 9 Tài liệu tham khảo Microsoft Vietnam – DPE Team | Bài số 2: Giới thiệu cách thức truy cập dữ liệu 14
Bài số 3 Tổng quan về ASP.NET MVC Framework Table of Contents 1 Tại sao sử dụng ASP.NET MVC 2 1.1 ASP.NET MVC là gì 2 1.1.1 Mô hình MVC cơ bản 2 1.1.2 Một vài đặc tính trong ASP.NET MVC 2 1.2 Sự khác biệt với WebForm 3 2 Ví dụ xây dựng ứng dụng với ASP.NET MVC Framework 4 2.1 Tạo Project với ASP.NET MVC Web Application 4 2.2 Tìm hiểu định tuyến URL 8 2.3 Xây dựng mô hình dữ liêụ 9 2.3.1 Taọ cơ sở dữ liêụ 9 2.3.2 Sử duṇ g mô hình LINQ to SQL 10 2.4 Tìm hiểu về Controllers 14 2.5 Tìm hiểu về Views 16 2.6 Tìm hiểu về Models 18 2.7 Cấu trúc Views\Shared\Site.Master 20 2.8 Kết qua ̉ 21 3 Câu hỏi ôn tập 21 4 Tài liệu tham khảo 22
1 Tại sao sử dụng ASP.NET MVC 1.1 ASP.NET MVC là gì 1.1.1 Mô hình MVC cơ bản MVC viết tắt của các chữ cái đầu của Models, Views, Controllers. MVC chia giao diện UI thành 3 phần tương ứng: đầu vào của controller là các điều khiển thông qua HTTP request, model chứa các miền logic, view là những thứ được sinh ra trả về cho trình duyệt. Figure 1. Mô hình MVC cơ bản Lợi ích của việc dùng phương pháp MVC là sự phân đoạn rõ ràng giữa models, views, controllers bên trong ứng dụng. Cấu trúc sạch sẽ giúp cho việc kiểm tra lỗi ứng dụng trở nên dễ dàng hơn. 1.1.2 Một vài đặc tính trong ASP.NET MVC Tách rõ ràng các mối liên quan, mở khả năng test TDD (test driven developer). Có thể test unit trong ứng dụng mà không cần phải chạy Controllers cùng với tiến trình của ASP.NET và có thể dùng bất kỳ một unit testing framework nào như NUnit, MBUnit, MS Test, v.v Có khả năng mở rộng, mọi thứ trong MVC được thiết kế cho phép dễ dàng thay thế/tùy biến ( ví dụ: có thể lựa chọn sử dụng engine view riêng, routing policy, parameter serialization, v.v ). Bao gồm một ánh xạ URL mạnh mẽ cho phép xây dựng ứng dụng với những URL sạch, các URL không cần cs phần mở rộng ( ví dụ: có thể ánh xạ địa chỉ /Products/Edit/4 để thực hiện hành động “Edit” của lớp điều khiển ProductControllers hoặc ánh xạ địa chỉ /Blog/SomeTopic để thực hiện hành động “Display Topic” của lớp điều khiển BlogEngineController ) ASP.NET MVC Framework cũng hỗ trợ những file ASP.NET như .ASPX .ASCX và .Master, đánh dấu các tập tin này như một “view template” ( có thể dễ dàng dùng các tính năng của ASP.NET như lồng các trang Master, snippets, mô tả server controls, template, data-binding, localization, v.v ). Tuy nhiên sẽ Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 2
không còn postback và interactive back server và thay vào đó là interactive end-user tới một Controller class ( không còn viewstate, page lifecycle ) ASP.NET MVC Framework hỗ trợ đầy đủ các tính năng bảo mật của ASP.NET như forms/windows authenticate, URL authorization, membership/roles, output và data caching, session/profile state, configuration system, provider architecture v.v 1.2 Sự khác biệt với WebForm ASP.NET WebForm sử dụng ViewState để quản lý, các trang ASP.NET đều có lifecycle, postback và dùng các web controls, các events để thực hiện các hành động cho UI khi có sự tương tác với người dùng nên hầu hết ASP.NET WebForm xử lý chậm. ASP.NET MVC Framework chia ra thành 3 phần: Models, Views, Controllers. Mọi tương tác của người dùng với Views sẽ được thực hiện hành động trong Controllers, không còn postback, không còn lifecycle không còn events. Việc kiểm tra ( test ), gỡ lỗi ( debug ) với ASP.NET đều phải chạy tất cả các tiến trình của ASP.NET và mọi sự thay đổi ID của bất kỳ controls nào cũng ảnh hưởng đến ứng dụng. Đối với ASP.NET MVC Framework thì việc có thể sử dụng các unit test có thể thẩm định rất dễ dàng các Controller thực hiện như thế nào. Tính năng ASP.NET 2.0 ASP.NET MVC Kiến trúc chương trình Kiến trúc mô hình WebForm Kiến trúc sử dụng việc phân chia Business Database chương trình thành Controllers, Models, Views Cú pháp chương trình Sử dụng cú pháp của webform, tất Các sự kiện được điều khiển bởi các sự kiện và controls do server controllers, các controls không do quản lý server do server quản lý Truy cập dữ liệu Sử dụng hầu hết các công nghệ truy Phần lớn dùng LINQ to SQL class cập dữ liệu trong ứng dụng để tạo mô hình truy cập đối tượng Debug Debug chương trình phải thực hiện Debug có thể sử dụng các unit test tất cả bao gồm các lớp truy cập dữ kiểm tra các phương thức trong liệu, sự hiển thị, điều khiển các controller controls Tốc độ phân tải Tốc độ phân tải chậm khi trong Phân tải nhanh hơn do không phải trang có quá nhiều các controls vì quản lý ViewState để quản lý các ViewState quá lớn control trong trang Tương tác với javascript Tương tác với javascript khó khăn Tương tác với javascript dễ dàng vì vì các controls được điều khiển bởi các đối tượng không do server quản server lý điều khiển không khó URL Address Cấu trúc địa chỉ URL có dạng Cấu trúc địa chỉ rành mạch theo .aspx?& dạng Controllers/Action/Id Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 3
2 Ví dụ xây dựng ứng dụng với ASP.NET MVC Framework Tính năng ASP.NET MVC Framework hiện giờ mới là bản Beta trong .NET Framework 3.5. Để xây dựng ứng dụng với ASP.NET MVC Framework cần có môi trường hoạt động .NET Framework 3.5 ( cụ thể chương trình sau sẽ xây dựng với Visual Studio 2008 ), tiếp theo cần một MVC Framework. Mặc định trong Visual Studio 2008 chưa có sẵn ASP.NET MVC Web Applications. Có thể download ASP.NET MVC Framework tại địa chỉ 2362BDDE0766&displaylang=en. Cài đặt Visual Studio 2008 sau đó cài đặt ASP.NET MVC Framework. Bây giờ có thể bắt đầu xây dựng ứng dụng với MVC. 2.1 Tạo Project với ASP.NET MVC Web Application Trong chương trình Visual Studio 2008 đã cài đặt ASP.NET MVC Framework: File New Project Windows C# ASP.NET MVC Web Application ( xem Figure 2). Figure 2. Tạo một Projects ASP.NET MVC Khi tạo một ASP.NET MVC Framework thì một hộp thoại Unit Test xuất hiện. Chọn Yes nếu muốn tạo một Project Test, chọn No nếu không muốn tạo một Unit Test. ( xem Figure 3) Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 4
Figure 3. Tạo Unit Test cho ASP.NET MVC Sau khi một ứng dụng ASP.NET MVC Web Application được tạo, nhìn vào trong mục Solution Explorer sẽ thấy xuất hiện mặc định 3 thư mục: Models, Views, Controllers chứa các đối tượng tương ứng với các thành phần Models, Views, Controllers trong mô hình MVC. Mở rộng folder Controllers sẽ thấy HomeController.cs, mở rộng Views sẽ thấy folder Home, Shared và Account. Mở rộng folder Home sẽ thấy About.aspx và Index.aspx ( xem hình Figure 4 ) Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 5
Figure 4. Solution Explorer MVC Chạy ứng dụng bằng cách ấn F5. Nếu là ứng dụng mới tạo lần đầu thì sẽ có thông báo hỏi có cho phép mở chế độ Debug hay không? Nếu đồng ý chọn “Modify the Web.config file to enable debugging”, ko muốn debug chọn “Run without debugging”. ( xem Figure 5). Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 6
Figure 5. Mở Debug trong Web.config ASP.NET MVC Kết quả khi chạy ứng dụng ( xem Figure 6) là ứng dụng được load vào browser. Trong ví dụ này chỉ có 2 trang là Index và About. Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 7
Figure 6. Thực thi ứng dụng mẫu ASP.NET MVC 2.2 Tìm hiểu định tuyến URL Browser yêu cầu một địa chỉ từ controller action trong ASP.NET MVC Framework được gọi là định tuyến URL ( URL routing). Url routing sẽ chỉ định request tới controller action. URL routing sử dụng một bảng định tuyến để điều khiển các request. Bảng định tuyến được tạo khi ứng dụng bắt đầu được chạy lần đầu tiên. Bảng định tuyến được thiết lập trong file Global.asax using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Routing; namespace HiTest { // Note: For instructions on enabling IIS6 or IIS7 classic mode, // visit public class MvcApplication : System.Web.HttpApplication { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Home", action = "Index", id = "" } // Parameter defaults ); } protected void Application_Start() { RegisterRoutes(RouteTable.Routes); } } } Khi ứng dụng chạy lần đầu tiên, phương thức Application_Start() được gọi, phương thức này gọi một phương thức khác RegisterRoutes(RouteTable.Routes) để tạo ra bảng định tuyến. Định tuyến mặc định chia một request thành 3 phân đoạn, mỗi phân đoạn nằm giữa 2 dấu “/”. Phân đoạn đầu tiên chứa tên một controller, phân đoạn thứ 2 chứa tên controller action, phân đoạn thứ 3 là tham số đầu vào của controller action. Ví dụ: với địa chỉ /Product/Details/3 được hiểu là: Controller = ProductController Action = Detail Id = 3 Controller mặc định sẽ là HomeController, Action mặc định là Index, Id mặc định là “” Ví dụ: với địa chỉ /Employee: Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 8
Controller = EmployeeController Action = Index Id = “” 2.3 Xây dự ng mô hiǹ h dữ liệ u 2.3.1 Tạo cơ sở dữ liệu Từ App_Data click phải chuôṭ choṇ Add New Item SQL Server Database đăṭ tên Database.mdf Figure 7. Tạo cơ sở dữ liệu Database.mdf trong App_Data Trong cơ sở dữ liêụ Database.mdf taọ 2 table: ( xem Figure 8, Figure 9 ) Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 9
Figure 8. Bảng SanPham trong cơ sở dữ liêụ Database.mdf Figure 9. Bảng LoaiSanPham trong cơ sở dữ liệu Database.mdf 2.3.2 Sử dụ ng mô hiǹ h LINQ to SQL Trong Solution Explorer click phải chuôṭ vảo Models Add New Item LINQ to SQL Classes (Figure 10) Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 10
Figure 10. Tạo LINQ to SQL Classes Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 11
Từ Server Explorer Kéo thả 2 tables LoaiSanPham, SanPham vào file DataClasses.dbml Figure 10. Tạo file DataClasses.dbml sử duṇ g 2 bảng LoaiSanPham và SanPham Trong file DataClasses.dbml click phải chuôṭ choṇ Add Association để tạo liên kết giữa 2 table. (Figure 11) Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 12
Figure 11. Tạo liên kết giữa các bảng trong DataClasses.dbml Kết quả đươc̣ như Figure 12 dướ i đây. Figure 12. Cấu trú c của DataClasses.dbml Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 13
2.4 Tìm hiểu về Controllers Controller chịu trách nhiệm điều khiển các tương tác của người dùng bên trong ứng dụng MVC. Controller sẽ quyết định cái gì được trả về cho người dùng khi người dùng tạo ra một request trên browser. Một controller là một class ( C# class hoặc VB class). Trong ví dụ ứng dụng ASP.NET MVC Web Application mâũ luôn tồn taị 2 controller là AccountController.cs và HomeController.cs nằm trong folder Controllers HomeController.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Mvc.Ajax; namespace HiTest.Controllers { [HandleError] public class HomeController : Controller { public ActionResult Index() { ViewData["Title"] = "Home Page"; ViewData["Message"] = "Welcome to ASP.NET MVC!"; return View(); } public ActionResult About() { ViewData["Title"] = "About Page"; return View(); } } } Trong HomeController.cs có 2 phương thức là Index() và About(). Hai phương thức này là 2 action trong controller HomeController.cs nó thực hiện khi được gọi bằng địa chỉ /Home/Index và /Home/About. Bất kỳ phương thức nào có thuộc tính public đều là một action trong controller. Tạo một Controller mới Trong folder Controllers phải chuột chọn Add New Item MVC Controller Class ( Figure 13) Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 14