Van Thoai Nguyen's Blog - Chia sẽ những kĩ thuật lập trình .NET

- Theo tin trên blog của bác ScottGu thì JQuery trong tương lai sẽ được ship cùng với .NET IDE của Microsoft. Phiên bản MVC Preview5 cũng mới được cho ra lò. Bản thân tui trước giờ vẫn thắc mắc là khi sử dụng MVC thì sẽ viết web Ajax như thế nào. Sau một lúc gu gồ, tui tìm thấy 1 link khá hay của bác Phil Haack. Vì nội blog entry đó chỉ giới thiệu 1 video podcast và không có code mẫu nên tui quyết định làm theo hướng dẫn và viết một entry cuối cùng trong tháng 9 thân yêu .

- Trong bài viết này, tui sẽ làm y chang hướng dẫn của bác Phil Haack. Như chúng ta biết, thì AJAX là chữ viết tắt của “Asynchronous JavaScript and XML”. Như vậy ta có thể làm một trang web có AJAX bằng cách kết hợp JavaScript với các WebService. Một trong những mục đích của AJAX là tránh postback về phía server khi thực hiện các thao tác đơn giản. Trường hợp điển hình nhất là những Quick Reply của các forum. Khi bạn trả lời một bài viết nào đó vào ô text box Quick Reply rồi click vào nút gửi đi, nội dung bạn đánh vào sẽ được lưu vào database, phần HTML hiển thị reply của bạn sẽ hiện ra ngay sau bài viết mới nhất và những gì bạn đánh vào text box sẽ bị xóa đi. Đó làm một chức năng AJAX điển hình mà ta có thể code bằng tay được.

- Nếu là tui, tui sẽ implement một webservice để nhận request save xuống database nội dung bài post khi người ta reply. Kết tiếp viết một số hàm JavaScript đơn giản để hiển thị thêm phần nội dung HTML trả lời vào dưới cùng của bài viết và xóa trắng text box nếu cần thiết. Và thật sự đó là cách tui làm ở cty trước, khi implement chức năng reply post cho trang web www.cofieu.com.vn/news. Khi đó tui chưa sử dụng JQuery nên đã code hơi trâu bò một cách không cần thiết, trong khi những gì tui cần để select các DOM object trong HTML đã được JQuery hỗ trợ hết. Cái thật sự cần làm là WebService để thực hiện request từ phía client.

- Để tóm tắt, tui xin trình bày cách mà bác Phil Haack đã sử dụng. Trong video podcast của bác Phil không cần implement một WebService mới mà chỉ implement một hàm Action, trả về một JSON object. Và ta sẽ phải viết một số hàm JavaScript đơn giản, nhận data đó , kết hợp với JQuery để update HTML vào chỗ thích hợp. Ý tưởng là vậy, ta sẽ bắt tay vào làm demo đó như sau:

- Trước hết để thực hiện được demo này, các bạn đã install .NET Framework 3.5 SP1, VS.NET 2008 SP1, Asp.net MVC Preview 5 Codeplex. Nếu chưa có chịu khó gu gồ nhe .

- Trong tương lai thì các file js của thư viện JQuery sẽ được include sẵn mỗi khi mình tạo project web. Còn hiện nay MVC vẫn còn đang thử nghiệm nên chúng ta chịu khó download 2 file js ở các link sau về để include vào trong project:
Link 1: jquery-1.2.6.js
Link 2: jquery.color.js

- Sau khi đã install và download những thứ cần thiết, bạn hãy mở VS.NET 2008, tạo mới 1 project web ASP.NET MVC. Kéo 2 file js vừa download vào thư mục Content như hình:

Hình 1: Thêm jquery vào project

- Mở file Site.Master để include hai file đó vào website. Các bạn có thể kéo thả cho lẹ Hình 2: Thêm jquery vào master page

- Để thử cách viết Controller của MVC, ta hãy tạo mới một Controller khác và không đụng đến các Controller có sẵn khi tạo ra Project web. Như vậy ta sẽ tạo ra một trang mới là TestAjax/Main.aspx, và Controller tương ứng cho View này sẽ là TestAjaxController:
Hình 3: Thêm View và Controller

- Trong file Main.aspx, chúng ta sẽ thêm vào 2 span với id lần lượt là name và url để hiển thị thông tin nhận được khi request. Ta cũng sẽ tạo một button với sự kiện onClick ứng với hàm JavaScript ShowInformation() mà ta sẽ implement sau. Còn bây giờ hãy xem đại khái HTML của file Main.aspx:
Hình 4: Html của View

- Như vậy hàm JavaScript ShowInformation sẽ thực hiện việc Request lên server, sau đó nhận data từ server trả về và cập nhận html cho 2 thẻ span phía trên. Nội dung của hàm JavaScript như sau:
Hình 5: Code javascript của hàm ShowInformation

- Giải thích: Hàm ShowInformation sẽ request đến address “TestAjax/GetInformation để lấy dữ liệu. Request này sẽ được thực thi bởi hàm GetInformation trong class TestAjaxController . Theo đúng convention của ASP.NET MVC:


- Điều đáng lưu ý là function này là nó tạo ra 1 Annonymouse Object và wrap trong một JSonResult Type để trả về cho client. Như ta thấy trong hình thì Anonymouse Object này sẽ có 2 properties là Message1 và Message2 và 2 field này được sử dụng trong hàm JavaScript ở trên. (Anonymous Object là 1 feature mới của .NET Framework 3.x)

- Cuối cùng tui có thêm vào một hàm JavaScript để tạo hiệu ứng đẹp mặt như hướng dẫn trong video podcast. Tóm lại nếu mới tìm hiểu ASP.NET MVC và chưa biết nó support AJAX tới đâu nhưng ta chắc chắn rằng sẽ có cách để làm những hiệu ứng AJAX rất nhanh và dễ dàng nhờ vào JQuery.


- Demo của tui http://nthoaiblog.googlepages.com/SampleMvcPreview5AjaxJQuery.zip

http://nthoaiblog.googlepages.com/SampleMVCRCAjaxJQuery.zip (MVC Release Candidate)