MVC Bài 12 ajax cơ bản

Hôm nay, gửi đến cả nhà những tính năng của ASP.NET MVC từ version 3 đến version 5; nhằm cô đọng lại những tính năng cho từng phiên bản, những cải thiện mới cho developer thông qua từng phiên bản ASP.NET MVC ASP.NET MVC3 So với phiên bản ASP.NET MVC2 thì tính năng mới được hỗ trợ thêm HTML5 và CSS3; tính năng này chỉ hỗ trợ cho những trình duyệt mới; Cải thiện về Model validation; Hỗ trợ 2 View Engine: RAZOR, ASPX, kể cả Open source trong khi ASP.NET MVC2 chỉ có ASPX; Controller được cải tiến hơn như thuộc tính ViewBag và kiểu ActionResult; Cải thiện Dependency Injection với IDpendencyResolver (có 2 phần: DependencyResolver và interface IDpendencyResolver)trong ASP.NET MVC3; đây là lớp thực thi mô hình Service Locator, cho phép framework gọi DIContainer khi cần làm việc với 1 lớp thực thi từ 1 kiểu cụ thể Cách tiếp cận với JavaScript được hạn chế; Hỗ trợ caching trong Partial page;

ThS Nguyễn Nghiệm

0913.745.789 nghiemn@fpt.edu.vn songlong2k@gmail.com

 Giới thiệu Ajax

 Cơ chế hoạt động của ajax

Phân trang bằng ajax

Xử lý giỏ hàng bằng ajax

Tìm kiếm nhanh bằng ajax

 AJAX = Asynchronous JavaScript And XML

Truyền thông bất đồng bộ với server

Dữ liệu truyền thông là XML

Lập trình phía client là JavaScript

HTML

Text

JSON

JavaScript

ThS Nguyễn Nghiệm

0913.745.789 nghiemn@fpt.edu.vn songlong2k@gmail.com

1 2

3

2

3

4 5

2

3

 $.post(url, data, function (response) { },

dataType)

$.ajax({… type:”POST” …})

$.ajax({… type :”GET” …})

$.ajax({… type :”GET”, dataType:”JSON” …})

$.ajax({… type :”GET”, dataType:”JavaScript” …})

 $("selector").load(function(){})

Tài tài nguyên cho selector

Tải nhóm tiếp

Tải trang yêu cầu bằng ajax

Thông tin giỏ hàng

Nút chọn hàng

Cập nhật số lượng

Items: List<Product> ItemCount: int

TotalAmount: double

Add(int id) Remove(int id) Update(int id, int qty) Clear()

CartController

Db: EShopV10DbContext Index()

Add(int id) Remove(int id) Update(int id, int qty) Clear()

ProductController

Db: EShopV10DbContext Index()

Product/Index

Cart/Index