Tương tác jQuery và Asp,net WebServices – Part III

Web Services đã có một chặng đường phát triển khá dài, từ lúc bắt đầu phát triển, XML được chọn là định dạng dữ liệu giao tiếp mặc định cho môi trường này, tuy nhiên với nhiều phức tạp trong cấu trúc và thiếu các tiêu chuẩn mở rộng, XML đã dần đi đến giai đoạn thoái trào, giờ đây người lập trình cảm thấy XML làm dữ liệu của họ trở nên cồng kềnh và chiếm nhiều băng thông không cần thiết.

Trong lập trình Ajax, JSON có hiệu quả vượt trội hơn hẳn XML, giữ lại được những lợi thế cạnh tranh của XML như tính dễ đọc, dễ viết, dễ dàng chuyển đổi …, bản thân JSON là ngôn ngữ vay mượn từ khá nhiều ngôn ngữ khác như C#, Java, Python, Js … điều đó làm nó trở nên thân thiện và quen thuộc hơn đối với phần lớn lập trình viên.

Tương tác jQuery và Asp,net WebServices – Part II

1.2 Sử dụng jQuery Selector
Các thao tác lập trình ở phía Client với javascript đều gắn liền với các đối tượng DOM của tài liệu html, jQuery hỗ trợ khá nhiều công cụ để chọn và lấy (wrap) một hoặc một tập đối tượng một cách nhanh chóng và rất tường minh.
1.2.1 Sử dụng CSS Selector
jQuery dựa trên thuộc tính CSS của đối tượng để lựa chọn, có thể sử dụng các định danh Id, sử dụng tên CSS class, tag hoặc phân cấp DOM để chọn một hoặc một tập các element.

Tương tác jQuery và Asp,net WebServices – Part I

I. Tại sao là jQuery ???
1.1     Dấu đô la ($) và sức mạnh của jQuery
Khi cơ sở hạ tầng internet ngày càng phát triển, tốc độ truy cập internet cao, các ứng dụng viết trên nền Web bắt đầu lấn át các ứng dụng được viết cho desktop bởi ưu điểm “phân tán” và “di động” của nó. Để tăng tính tương tác và linh động đối với người sử dụng, các nhà phát triển bắt đầu ứng dụng Ajax nhiều hơn vào sản phẩm của mình. Ajax đã là “mốt” thời thượng, và, có thể nói jQuery là ngôi sao toả sáng nhất trên “sàn diễn” Ajax.

jQuery Intellisense in VS 2008

Hướng dẫn kích hoạt jQuery Intellisense trong VS 2008

Bước 1: Install VS 2008 SP1
Phiên bản cập nhật SP1 này được bổ sung các tính năng hỗ trợ javascript phong phú hơn, hỗ trợ nhiều thư viện javascript hơn, jQuery là một trong số đó.
Có thể tải VS 2008 SP1 ở đây.
Bước 2: Cài đặt bản patch KB958502 để hỗ trợ file Intellisense “-vsdoc.js
Tham khảo thêm các thông tin về patch này ở đây.
Download Patch.

Tương tác jQuery và Asp,net WebServices – Part IV

2.1.3 Nhận kết quả trả về
Nếu request được gửi đi thành công, khi nhận được respone, hàm đã đăng ký trong sự kiện success sẽ được gọi, nếu Service Method có trả về dữ liệu thì hàm success sẽ nhận một tham số là một object đại diện cho dữ liệu trả về này.
Object này chỉ có một thuộc tính duy nhất là “d” (viết tắt của data), giá trị của thuộc tính này chính là kết quả trả về của WebMethod.

Tương tác jQuery và Asp,net WebServices – Part III

Web Services đã có một chặng đường phát triển khá dài, từ lúc bắt đầu phát triển, XML được chọn là định dạng dữ liệu giao tiếp mặc định cho môi trường này, tuy nhiên với nhiều phức tạp trong cấu trúc và thiếu các tiêu chuẩn mở rộng, XML đã dần đi đến giai đoạn thoái trào, giờ đây người lập trình cảm thấy XML làm dữ liệu của họ trở nên cồng kềnh và chiếm nhiều băng thông không cần thiết.

Trong lập trình Ajax, JSON có hiệu quả vượt trội hơn hẳn XML, giữ lại được những lợi thế cạnh tranh của XML như tính dễ đọc, dễ viết, dễ dàng chuyển đổi …, bản thân JSON là ngôn ngữ vay mượn từ khá nhiều ngôn ngữ khác như C#, Java, Python, Js … điều đó làm nó trở nên thân thiện và quen thuộc hơn đối với phần lớn lập trình viên.

Tương tác jQuery và Asp,net WebServices – Part II

1.2 Sử dụng jQuery Selector
Các thao tác lập trình ở phía Client với javascript đều gắn liền với các đối tượng DOM của tài liệu html, jQuery hỗ trợ khá nhiều công cụ để chọn và lấy (wrap) một hoặc một tập đối tượng một cách nhanh chóng và rất tường minh.
1.2.1 Sử dụng CSS Selector
jQuery dựa trên thuộc tính CSS của đối tượng để lựa chọn, có thể sử dụng các định danh Id, sử dụng tên CSS class, tag hoặc phân cấp DOM để chọn một hoặc một tập các element.

Tương tác jQuery và Asp,net WebServices – Part I

I. Tại sao là jQuery ???
1.1     Dấu đô la ($) và sức mạnh của jQuery
Khi cơ sở hạ tầng internet ngày càng phát triển, tốc độ truy cập internet cao, các ứng dụng viết trên nền Web bắt đầu lấn át các ứng dụng được viết cho desktop bởi ưu điểm “phân tán” và “di động” của nó. Để tăng tính tương tác và linh động đối với người sử dụng, các nhà phát triển bắt đầu ứng dụng Ajax nhiều hơn vào sản phẩm của mình. Ajax đã là “mốt” thời thượng, và, có thể nói jQuery là ngôi sao toả sáng nhất trên “sàn diễn” Ajax.

[MVCTutorial] Creating a Movie Database Application with ASP.NET MVC

Creating a Movie Database Application with ASP.NET MVC (C#)

Source link : http://www.asp.net/learn/mvc/tutorial-01-cs.aspx

The purpose of this tutorial is to give you a sense of “what it is like” to build an ASP.NET MVC application. In this tutorial, I blast through building an entire ASP.NET MVC application from start to finish. I show you how to build a simple database-driven application that illustrates how you can list, create, and edit database records.

To simplify the process of building our application, we’ll take advantage of the scaffolding features of Visual Studio 2008. We’ll let Visual Studio generate the initial code and content for our controllers, models, and views.

If you have worked with Active Server Pages or ASP.NET, then you should find ASP.NET MVC very familiar. ASP.NET MVC views are very much like the pages in an Active Server Pages application. And, just like a traditional ASP.NET Web Forms application, ASP.NET MVC provides you with full access to the rich set of languages and classes provided by the .NET framework.

My hope is that this tutorial will give you a sense of how the experience of building an ASP.NET MVC application is both similar and different than the experience of building an Active Server Pages or ASP.NET Web Forms application.

Overview of the Movie Database Application

Because our goal is to keep things simple, we’ll build a very simple Movie Database application. Our simple Movie Database application will allow us to do three things:

1. List a set of movie database records
2. Create a new movie database record
3. Edit an existing movie database record

Again, because we want to keep things simple, we’ll take advantage of the minimum number of features of the ASP.NET MVC framework needed to build our application. For example, we won’t be taking advantage of Test-Driven Development.

In order to create our application, we need to complete each of the following steps:

1. Create the ASP.NET MVC Web Application Project
2. Create the database
3. Create the database model
4. Create the ASP.NET MVC controller
5. Create the ASP.NET MVC views

[ASP.NET] MVC Framework

Bắt đầu vào những năm 70 của thế kỷ 20, tại phòng thí nghiệm Xerox PARC ở Palo Alto. Sự ra đời của giao diện đồ họa (Graphical User Interface) và lập trình hướng đối tượng (Object Oriented Programming) cho phép lập trình viên làm việc với những thành phần đồ họa như những đối tượng đồ họa có thuộc tính và phương thức riêng của nó. Không dừng lại ở đó, những nhà nghiên cứu ở Xerox PARC còn đi xa hơn khi cho ra đời cái gọi là kiến trúc MVC (viết tắt của Model – View – Controller).
Trong kiến trúc MVC, một đối tượng đồ họa (GUI Component) bao gồm 3 thành phần cơ bản: Model, View, và Controller. Model có trách nhiệm đối với toàn bộ dữ liệu cũng như trạng thái của đối tượng đồ họa. View chính là thể hiện trực quan của Model, hay nói cách khác chính là giao diện của đối tượng đồ họa. Và Controller điều khiển việc tương tác giữa đối tượng đồ họa với người sử dụng cũng như những đối tượng khác.

Khi người sử dụng hoặc những đối tượng khác cần thay đổi trạng thái của đối tượng đồ họa, nó sẽ tương tác thông qua Controller của đối tượng đồ họa. Controller sẽ thực hiện việc thay đổi trên Model. Khi có bất kỳ sự thay đổi nào ở xảy ra ở Model, nó sẽ phát thông điệp (broadcast message) thông báo cho View và Controller biết. Nhận được thông điệp từ Model, View sẽ cập nhật lại thể hiện của mình, đảm bảo rằng nó luôn là thể hiện trực quan chính xác của Model. Còn Controller, khi nhận được thông điệp từ Model, sẽ có những tương tác cần thiết phản hồi lại người sử dụng hoặc các đối tượng khác.

Lấy ví dụ một GUI Component đơn giản là Checkbox. Checkbox có thành phần Model để quản lý trạng thái của nó là check hay uncheck, thành phần View để thể hiện nó với trạng thái tương ứng lên màn hình, và thành phần Controller để xử lý những sự kiện khi có sự tương tác của người sử dụng hoặc các đối tượng khác lên Checkbox. Khi người sử dụng nhấn chuột vào Checkbox, thành phần Controller của Checkbox sẽ xử lý sự kiện này, yêu cầu thành phần Model thay đổi dữ liệu trạng thái. Sau khi thay đổi trạng thái, thành phần Model phát thông điệp đến thành phần View và Controller. Thành phần View của Checkbox nhận được thông điệp sẽ cập nhật lại thể hiện của Checkbox, phản ánh chính xác trạng thái Checkbox do Model lưu giữ. Thành phần Controller nhận được thông điệp do Model gởi tới sẽ có những tương tác phản hồi với người sử dụng nếu cần thiết.
Kiến trúc MVC đã tách biệt (decoupling) sự phụ thuộc giữa các thành phần trong một đối tượng đồ họa, làm tăng tính linh động (flexibility) và tính tái sử dụng (reusebility) của đối tượng đồ họa đó. Một đối tượng đồ họa bấy giờ có thể dễ dàng thay đổi giao diện bằng cách thay đổi thành phần View của nó trong khi cách thức lưu trữ (Model) cũng như xử lý (Controller) không hề thay đổi. Tương tự, ta có thể thay đổi cách thức lưu trữ (Model) hoặc xử lý (Controller) của đối tượng đồ họa mà những thành phần còn lại vẫn giữ nguyên.

Kiến trúc MVC đã được ứng dụng để xây dựng rất nhiều framework và thư viện đồ họa khác nhau. Tiêu biểu là bộ thư viện đồ họa của ngôn ngữ lập trình hướng đối tượng SmallTalk (cũng do Xerox PARC nghiên cứu và phát triển vào thập niên 70 của thế kỷ 20). Các Swing Components của Java cũng được xây dựng dựa trên kiến trúc MVC. Ví dụ đi cùng với JButton là ButtonUI (thành phần View) và ButtonModel (thành phần Model). Ta hoàn toàn có thể viết MyButtonUI hoặc YourButtonUI để thay đổi giao diện của JButton theo ý mình (tương tự cho ButtonModel). Một điểm khá thú vị đối với Swing Components là nó cho phép ta chỉ thay đổi giao diện một phần nào đó của component. Ví dụ ta có thể thay đổi thể hiện của list item trong JList thông qua ListCellRenderer.

Ngay cả Microsoft Visual C++ (VC++) cũng ứng dụng MVC để xây dựng Document View Architecture. Bạn nào đã từng tạo một project MDI trong VC++ đều thấy rằng VC++ sẽ tạo ra các lớp CXXXDoc và CXXXView (XXX là tên project của chúng ta). CXXXDoc chính là thành phần Model và CXXXView là thành phần View của chương trình. Như vậy nếu theo đúng kiến trúc MVC thì tất cả những xử lý liên quan đến lưu trữ dữ liệu của chương trình phải được đặt ở CXXXDoc, còn những xử lý liên quan đến việc thể hiện phải được đặt ở CXXXView. Khi có sự thay đổi dữ liệu ở CXXXDoc, cần cập nhật lại hiển thị ở CXXXView, CXXXDoc sẽ gọi hàm UpdateAllView của nó để phát thông điệp thông báo cho tất cả các View gắn kết với nó. Tại CXXXView ta bắt sự kiện OnUpdate để cập nhật lại hiển thị của View. Hồi đó mỗi lần làm chương trình VC++, tchya đặt tất cả xử lý ở CXXXView, xong rồi ở CXXXDoc hay CMainFrame cần gọi cái gì đó của CXXXView thì cứ việc khai báo một con trỏ pView trỏ đến CXXXView. hì hì, giờ nghĩ lại thấy “bưởi” quá. Vì như vậy vô tình ta đã làm cho CXXXDoc và CMainFrame phụ thuộc (coupling) vào CXXXView, khi muốn thay đổi View thì rất khó khăn.

Khi cài đặt kiến trúc MVC ta cần lưu ý những điểm sau:

- Thành phần Model không cần thiết phải biết đến các View và Controller cụ thể gắn kết với nó. Khi có thay đổi, Model chỉ việc phát thông điệp cho những ai đăng ký với nó. Điều này có thể được thực hiện thông qua Observer Pattern.
- Nên áp dụng Facade Pattern để kết hợp Model, View, và Controller lại với nhau thành “3 trong 1” cho dễ quản lý và thao tác đối với người sử dụng.
- Kiến trúc MVC không phải là kiến trúc 3 tầng (3-Tiers Architecture). Mặc dù giữa 2 kiến trúc này có nhiều điểm tương đồng nhưng chúng nói về 2 khía cạnh khác nhau.

Mô hình MVC đơn giản

Mô hình MVC phức tạp hơn 1 tí

Về .net, bác Bill đã xây dựng tương đối ok về mô hình này rồi, nên việc cần làm là áp dụng sao cho đúng cách là dc.