ASP.Net MVC : Ajax và jQuery

Tôi đã được sử dụng Asp.Net MVC trong thời gian khá lâu và thực sự thích nó. Nó rất dễ dàng để làm công cụ ajax nhưng tôi nghĩ rằng, dễ dàng hơn nếu bạn sử dụng jQuery.

Trong bài này tôi sẽ làm bao gồm :

• Làm thế nào để cập nhật một phần
• Làm thế nào để thực hiện một Nhận yêu cầu với các tham số bổ sung trong chuỗi truy vấn
• Làm thế nào để tạo một yêu cầu Đăng với paremeters bổ sung bên trong cơ thể yêu cầu
• Điều gì sẽ xảy ra nếu javascript bị vô hiệu hóa hoặc người dùng bằng cách sử dụng một trình duyệt cũ hơn

Menu giao diện

Các mục trình đơn trong trang chủ sẽ được như dưới đây;

Như đã thấy trong các phần tô đậm thay vì sử dụng Ajax.ActionLink tôi sẽ sử dụng  Html.ActionLink với lớp tuỳ thuộc tính xác định loại yêu cầu sẽ được gọi bằng phương pháp ajax jQuery. Tất cả các trình đơn invokes phương pháp hành động TestMethod trong lớp HomeController.

Chúng ta cần thêm các thư viện và một jquery javascript tùy chỉnh tập tin có chứa các phương pháp helper.

Đây là Helper.js

Phần code tiếp theo của  Helper.js

Cập nhật Xem và Lưu kết quả cuộc gọi Ajax với jQuery

Các đối tượng javascript Helper có hai phương pháp helper được MakeRequest và UpdateView. Phương pháp MakeRequest chấp nhận một đối tượng có tính chất bổ sung và các chức năng như url, dữ liệu, contentType. Phương pháp thứ hai chỉ đơn giản UpdateView cập nhật các khu vực trong thành phần với id chính. Nhưng vì div chính cũng chứa các div chân trang chúng tôi chỉ đơn giản là lọc div chân và sau đó cập nhật phần còn lại của chính bằng một selector jquery đơn giản.

Bộ chọn jQuery là:

$("#main > :not(#footer)");

Phần thứ hai của lớp helper bắt đầu từ dòng 30 được thực hiện khi các tài liệu được nạp. Sau khi tài liệu chúng tôi kết nạp một sự kiện nhấp chuột vào trình đơn div (id = trình đơn). Vì vậy:

• Bất cứ khi nào một sự kiện nhấp chuột xảy ra bên trong trình đơn div chúng tôi kiểm tra các mục tiêu, nếu nó là một phần tử neo.
• Nếu nó là một thẻ neo chúng tôi kiểm tra xem nó là thuộc tính lớp
• Nếu các yếu tố đã neo html lớp chúng tôi gọi một Http Đăng yêu cầu. nếu nó đã jsonGet lớp chúng tôi gọi một Http Nhận và gửi dữ liệu thêm trong chuỗi truy vấn, nếu nó có jsonPost lớp chúng tôi một bài incoke Http và gửi dữ liệu bổ sung trong cơ thể yêu cầu.

Khi thành công chức năng gọi lại được gọi là nó vượt qua các phản ứng recevied với phương pháp UpdateView trong đối tượng người trợ giúp. Sau khi nhận được mặt UpdateView đầu vào nó kiểm tra kiểu đối số này. Nếu nó là một chuỗi các phương pháp chỉ cần cập nhật với các mục được thông qua. Nếu đầu vào nhận được là một đối tượng phương pháp lặp qua các thuộc tính của đối tượng và tạo ra một yếu tố ul và cập nhật với ul này.

Phương pháp UpdateView từ các đối tượng người trợ giúp.

Và cuối cùng ở đây là ActionMethod TestMethod sẽ xử lý các yêu cầu gửi đến.

Bây giờ khi chúng tôi nhận được yêu cầu

• Trước tiên, chúng tôi kiểm tra xem nó là một yêu cầu ajax nếu nó không phải là chúng ta chỉ cần vượt qua các đối tượng mô hình để xem TestMethod
• Nếu yêu cầu này là một yêu cầu ajax chúng tôi kiểm tra kiểu phản ứng mà người dùng yêu cầu nếu contentType là html, chúng tôi khiến một tên partialview SimplePartialView.
• Nếu một yêu cầu ajax với contentType của json chúng tôi kiểm tra HttpMethod của yêu cầu đó. Nếu httpmethod là GET chúng ta đọc được đăng các giá trị (mà cũng có những cái được thêm vào qua jQuery bên cạnh những người trong url yêu cầu như trong masterpage) và gửi lại cho khách hàng ở định dạng json. Nếu phương pháp POST http là chúng ta đọc dữ liệu bổ sung từ cơ thể yêu cầu và gửi chúng cho khách hàng về định dạng json.

Tất nhiên bạn có thể có một actionmethod thêm rằng sẽ chỉ nhận các yêu cầu được làm bằng Http Đăng HttpPost sử dụng thuộc tính như:

[HttpPost]
public ActionResult TestMethod()

Điều gì sẽ xảy ra nếu người dùng đã bị vô hiệu hoá javascript hoặc sử dụng một trình duyệt cũ hơn

Ứng dụng của chúng tôi sẽ vẫn chạy. Bởi vì chúng tôi sử dụng Html.ActionLink thay vì Ajax.ActionLink nếu javascript bị vô hiệu hóa các mã jQuery của chúng tôi sẽ không được gọi. Vì vậy, ví dụ nếu người dùng nhấp vào JSON (Post) liên kết nó sẽ nhận được một phản ứng html thay vì json bởi vì chúng tôi kiểm tra xem yêu cầu là một yêu cầu ajax trong TestMethod với phương pháp khuyến nông isAjaxRequest và nếu nó không phải là chúng tôi chỉ đơn giản render xem TestMethod.

Sau đây là xem TestMethod TestMethod.aspx

 and SimpleViewPartialView.ascx

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