Bài giảng chi tiết môn học lập trình ASP.Net Bài học cung cấp kiến thức cơ sở lý thuyết tổng quan về ASP.NET, kiến trúc ASP.NET, Code phía server, cách thức truyền dữ liệu giữa các trang, chuyển trang. Sau khi học xong bài học này sinh viên có thể xây dựng được các trang Web Form sử dụng điều khiển Html, Server và biết cách truyền dữ liệu giữa các trang Web
HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Bài 15 THỰC HÀNH Nội dung: Ajax Hoạt động ajax Ajax ASP.NET MVC Ajax AJAX, viết tắt từ Asynchronous JavaScript and XML (JavaScript XML không đồng bộ), công cụ cho phép tăng tốc độ ứng dụng web cách chia nhỏ liệu tải thông tin thay đổi thay tải tồn trang web Ajax kỹ thuật phát triển web có tính tương tác cao cách kết hợp ngơn ngữ: • HTML (hoặc XHTML) với CSS việc hiển thị thông tin • Mơ hình DOM (Document Object Model), thực thông qua JavaScript, nhằm hiển thị thông tin động tương tác với thơng tin hiển thị • Đối tượng XMLHttpRequest để trao đổi liệu cách không đồng với máy chủ web (Mặc dù, việc trao đổi thực với nhiều định dạng HTML, văn thường, JSON chí EBML, XML ngơn ngữ thường sử dụng) • XML thường định dạng cho liệu truyền, định dạng dùng, bao gồm HTML định dạng trước, văn (plain text), JSON EBML Hoạt động ajax Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Trình duyệt Khi kiện xuất hiện: • Tạo đối tượng XMLHttpRequest • Gửi đối tượng HttpRequest Server Internet dụng • Xử lý HttpRequest • Tạo đối tượng response gửi liệu trở lại cho trình duyệt Trình duyệt • Sử dụng Javascript để xử lý trả liệu • Cập nhật nội dung trang web Internet Ví dụ 1: Xử lý form dùng Javascript Load Text Into Multiple Tags Using JavaScript function loadText() { document.getElementsByTagName("p")[0].innerHTML = "Hello World"; document.getElementsByTagName("p")[1].innerHTML = "Goodbye World"; } Kết thực hiện: Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Mỗi button click chạy function loadText() nội dung thẻ p phía cập nhật giá trị ‘Hello World’ ‘Goodbye World’ Ví dụ 2: Xử lý form dùng Javascript jquey Load Text Into A Tag With jQuery $(document).ready(function() { $("input").click(function() { $('p').html("Hello World"); }); }); Ví dụ 3: Sử dụng Ajax jQuery File exampleajax.html minh họa sử dụng công nghệ ajax: click vào button ‘Load some copy’ nội dung file ajaxCopy.txt hiển thị phía button AJAX Detection And Data Loading With jQuery $(document).ready(function() { $("input").click(function() { $('#words').load("ajaxCopy.txt"); }); }); Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Kết là: Như thấy: phần id=words cập nhật liệu liệu từ file ajaxCopy.txt cịn thơng tin khác giữ nguyên Chú ý: file ajaxCopy.txt đặt server thư mục với file exampleajax.html Ví dụ 4: Sử dụng HTML5, Ajax jQuery AJAX Detection And Data Loading Using New School jQuery & HTML5: Example # 3 $(document).ready(function() { $("button").click(function() { $('#words').load("ajaxCopy.txt"); }); }); Load Some Copy! Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Kết thực tương tự ví dụ 3 Ajax ASP.NET MVC Trong NET, gọi code phía server theo cách: • jQuery AJAX • ASP.NET AJAX 3.1 JQuery Ajax Chúng ta xem xét phương thức jQuery AJAX sau đây: • $.ajax() thực việc AJAX request khơng đồng • $.get() Lấy liệu từ server sử dụng AJAX HTTP GET request • $.post() Lấy liệu từ server sử dụng AJAX HTTP POST request Có nhiều loại tham số khác cho phương thức $.ajax(), sau số loại tham số thường dùng: • • • • • • • • async type url data datatype contentType success error Trong đó: async Là false request gửi đồng Giá trị mặc định true async: false Nếu bạn đặt false thì, request bạn chặn việc thực thi đoạn mã khác nhận phản hồi (response) type Là kiểu HTTP Request, thường “POST” “GET” Mặc định “GET” Một số dạng khác request “PUT” “DELETE”, dạng không hỗ trợ số web browsers type: "POST" url Là URL request url: "/Home/JqAJAX" data Là liệu gửi lên server Nó đối data: JSON.stringify tượng query string (model_data) Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET dataType Là kiểu liệu bạn mong chờ nhận từ server Mặc định, JQuery tìm kiếm dạng MIME response khơng có dataType định Các dạng dataType text, xml, json, script, html jsonp dataType: "json" content Type Loại content type liệu gửi tới server Mặc định 'application/x-www-formurlencoded' contentType: 'applicati on/json; charset=utf-8' success Một hàm gọi (callback) request thành công Hàm nhận response data (được chuyển đổi thành đối tượng JavaScript dataType JSON), trạng thái text request raw request object success: function (resul t) { Một hàm gọi (callback) request có lỗi Hàm nhận raw request object trạng thái text request error: function (result) { alert('Error occured!!'); error $('#result').html(result) ; } } Ví dụ 1: Cộng số nguyên Chúng ta có đoạn code Html Jquery Ajax file cshtml sau: Ajax Demo Number 1: Number 2: $(document).ready(function () { $("#b1").click(function(){ var n1 = $("#num1").val(); var n2 = $("#num2").val(); $.ajax({ url: '@Url.Action("Math", "AjaxDemo2")?n1=' + n1 + '&n2=' + n2, success: function (data) { if (data.status == "ok") { $("#rs").html(data.result); } } }); }); }); Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET function(data): trả đối tượng Json, có thuộc tính status result File Controller: public class AjaxDemo2Controller : Controller { // GET: AjaxDemo2 public ActionResult Index() { return View(); } public ActionResult Math(int n1, int n2) { var x = n1 + n2; var result = n1 + " + " + n2 + " = " + x; var data = new { status = "ok", result = result }; return Json(data, JsonRequestBehavior.AllowGet); } } Kết thực hiện: Chú ý click vào button Calculate, trang web dường đứng yên, nhìn lên địa trình duyệt khơng thấy trang bị load lại Học kết hợp Trang