Sample Asp.NET MVC AJAX với JQuery

- 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 :bbpchao:.

- 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 :bbpnodo:.

- 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:

Simple ASP.NET MVC AJAX with JQuery
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ẹ :bbpraroi:
Simple ASP.NET MVC AJAX with JQuery
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:
Simple ASP.NET MVC AJAX with JQuery
Hình 3: Thêm View và Controller
Các bạn đang xem bài viết Asp.net MVC Ajax với Jquery từ blog của Nguyễn Thoại (http://nthoai.blogspot.com)

- 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:
Simple ASP.NET MVC AJAX with JQuery
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:
Simple ASP.NET MVC AJAX with JQuery
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 :bbpraroi:. Theo đúng convention của ASP.NET MVC:
public ActionResult GetInformation()
{

return Json( new { Message1 = "Nguyen Thoai",
Message2 = "<a href='http://nthoai.blogspot.com' target='_blank'>http://nthoai.blogspot.com</a>"
}

);

}

Các bạn đang xem bài viết Asp.net MVC Ajax với Jquery từ blog của Nguyễn Thoại (http://nthoai.blogspot.com)

- Đ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 :bbpcuoi3: http://nthoaiblog.googlepages.com/SampleMvcPreview5AjaxJQuery.zip

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

Posted in Labels: , , , |

7 comments:

  1. thanhcccp Says:

    Viết cái này lâu chưa ku, tao cũng muốn viết hoài mà lười quá chưa viết đc. Good đó :)

  2. everything for you Says:

    sao minh khong download duoc source code cua ban ve nhi.
    Ban co the gui cho minh vao dia chi email: vvphan@gmail.com

    cam on ban nhieu nhe

  3. meopro Says:

    test thu xem :D . Good

  4. chieuhado Says: This comment has been removed by the author.
  5. chieuhado Says:

    Cám ơn bạn nhiều . Mình cũng đang cần kiến thức về lập trình.net nè .
    Mình mong bạn sẽ chia sẻ nhiều hơn nữa trong diễn đàn này nha . Mình sẽ có nhiều thắc mắc còn hỏi bạn đó . Nhưng thôi hẹn lần sau, bạn nhớ ghé qua nha

    _____________________
    tuyen dung | tim viec | viec lam

  6. dongmt Says:

    Cái MVC này, đơn giản thì cũng đơn giản, khó thì nó cũng khó...
    Cám ơn bạn về những bài viết.

  7. Anonymous Says:

    Không hiểu sao, script không chạy mới đau! chán quá, mình đả kiểm tra tất cả các trường hợp, enable scrip, tham chiêu đúng các script!

rss
 

About Me

Place I've live
Near Bossley Park, Sydney, NSW, Australia
Place I've work
  • Freelancer (from 06/2010 to present)
  • Harvey Nash (from 05/2008 to 06/2010)
  • DataDesign Vietnam (10/2005 to 04/2008)
Place I've studied
  • University of Natural Science (Bachelor of Science HoChiMinh City Vietnam From 2001 to 2005)
  • Le Hong Phong High School (HoChiMinh City Vietnam From 1997 to 2000)