BÀI TẬP VỀ LẬP TRÌNH WEB

Chia sẻ: LE Van Hai | Ngày: | Loại File: DOC | Số trang:11

Thêm vào BST

Báo xấu

294
lượt xem 67
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

AJAX, viết tắt từ Asynchronous ế ắ ừ JavaScript and XML (JavaScript và XML không đồng bộ), là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách cắt nhỏ dữ liệu và chỉ hiển thị những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: BÀI TẬP VỀ LẬP TRÌNH WEB

BÀI TẬP LẬP TRÌNH WEB Đề bài : AJAX and User Controls Dynamically Loading User Controls Lớp: T7B1 Môn: Lập trình WEB Giảng Viên : Tô Oai Hùng Sinh Viên: Lê Văn Hải Nguyễn Hữu Tài AJAX and User Controls
AJAX, viết tắt từ Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ), là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách cắt nhỏ dữ liệu và chỉ hiển thị những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web. AJAX không phải một công nghệ đơn lẻ mà là sự kết hợp một nhóm công nghệ với nhau. Trong đó, HTML và CSS đóng vai trò hiển thị dữ liệu, mô hình DOM trình bày thông tin động, đối tượng XMLHttpRequest trao đổi dữ liệu không đồng bộ với các ứng dụng Ajax xoay quanh một tính năng có tên là XMLHttpRequest. Đối tượng XMLHttpRequest dùng để trao đổi dữ liệu một cách không đồng bộ với máy chủ web. Trong ASP.NET, AJAX được gọi là callbacks khách hàng. Để thêm AJAX hỗ trợ để điều khiển của người dùng, bạn phải thực hiện thông qua lớp giao diện ICallBackEventHandler và thêm mã JavaScript script cần thiết để xử lý các kết quả của các cuộc gọi AJAX. Dưới đây là các bước thực hiện AJAX: 1.Tạo một kịch bản cho khách hàng cách gọi AJAX. Bạn có thể lấy kịch bản này thông qua phương thức Page.ClientScript.GetCallbackEventReference () . 2. Tạo phương thức RaiseCallbackEvent () và GetCallbackResult () trong đó trả về một chuỗi giá trị từ máy chủ. 3. Tạo một phương thức để khách hàng nhận giá trị RaiseCallbackEvent() từ máy chủ . Ứng dụng sau hiển thị ngẫu nhiên một trong ba câu danh ngôn. Báo giá này được tự động cập nhật 10 giây một lần . Trang RandomQuotation.ascx Dùng AJAX để hiển thị một báo giá ngẫu nhiên protected void Page_Load(object sender, EventArgs e) {
callback = Page.ClientScript.GetCallbackEventReference(this, null, "UpdateQuote", null, "CallbackError", true); string startupScript = string.Format("setInterval( \"{0}\", 1000 )", callback); Page.ClientScript.RegisterStartupScript(this.GetType(), "RandomQuotation",startupScript, true); Label1.Text = GetCallbackResult(); } Phương thức Page_Load () tạo ra những kịch bản cho khách hàng cách gọi AJAX. Lệnh gọi AJAX lấy từ Page.ClientScript.GetCallbackEventReference () . Các phương thức JavaScript setInterval () được sử dụng để thực thi lệnh này 10 giây một lần. Việc kiểm soát người dùng được thực hiện qua lớp giao diện ICallbackEventHandler (Sử dụng System.Web.UI.ICallbackEventHandler). Giao diện này có hai vấn đề mà bạn phải thực hiện là: RaiseCallbackEvent () và GetCallbackResult (). Hai phương pháp này được gọi trên máy chủ theo thứ tự. Trong ứng dụng trên RaiseCallbackEvent () hiện không có gì và GetCallbackResult () trả về phương thức báo giá ngẫu nhiên cho khách hàng. public void RaiseCallbackEvent(string result) { //phương thức RaiseCallbackEvent(String )sẽ gọi để thực thi callback trên server. } //phương thức GetCallbackResult()sẽ trả về kết quả tới client public string GetCallbackResult() { string k1, k2, k3; k1 = "All paid jobs absorb and degrade the mind -- Aristotle"; k2 = "No evil can happen to a good man, either in life or after death -- Plato"; k3 = "The only good is knowledge and the only evil is ignorance -- Plato"; String[] quotes ={ k1, k2, k3 }; Random rnd = new Random(); return quotes[rnd.Next(0,3)]; }
Cuối cùng là việc kiểm soát người dùng chứa một khối lệnh của khách hàng gồm hai hàm JavaScript. function UpdateQuote(result) { var divQuote = document.getElementById('divQuote'); divQuote.innerText = result; } function CallbackError(result)+ { alert( result ); } Chức năng đầu tiên, được đặt tên UpdateQuote (), hiển thị các báo giá ngẫu nhiên trở lại do RaiseCallbackEvent () trong một HTML tag. Chức năng thứ hai, được đặt tên CallbackError (), cho thấy một hộp thoại cảnh báo khi một lỗi xảy ra trong quá trình thực hiện các cuộc gọi AJAX. Trang ShowRandomQuotation.aspx chứa các điều khiển của người dùng và hiển thị thời gian hiện hành. .quote { width:150px; padding:20px; border:Dotted 2px orange; background-color:#eeeeee; font:16px Georgia,Serif; } Show Random Quotation
Dynamically Loading User Controls (Loading động User Controls) Đầu tiên ,chúng ta cần phải nắm rõ thế nào là một User Controls?Để Giúp ta hiếu sâu hơn.User Controls được nằm độc lập riêng với trang HTML và mã ASP.net một cách tiềm ẩn.Chúng rất hữu ích cho việc thêm vào khối chức năng của trang sử dụng User Controls cho đầu và cuối trang,thêm một số chức năng cho trang web.Vì đầu trang và cuối trang yêu cầu cụ thể nên nó có thể được nạp một cách tự động.Để sử dụng có phương pháp LoadControl. Đây là một chức năng đơn giản. Sau khi tải nó có thể thêm vào trang web đó bằng cách thêm nó vào bộ sưu tập control.Nhược điểm là không kiểm soát được nơi hiển thị khi người sử dụng xuất hiện.Để khắc phục điều đầu tiên ta phải tạo ra một đối tượng Container cho những UserControls hiển thị nạp vào.Nó thường là những PlaceHolder hoặc điều khiển Panel.Điểm đặc biệt cần chú ý khi sử dụng UserControls là phương pháp này chỉ đặt nó trên trang web hiện hành chứ không chắc chắn là nơi diễn ra.vì vậy cần giữ cho này cho một điều khiển. Dynamically Loading User Controls,có nghĩa là không load controls trong thời gian thiết kế,mà đợi cho thời gian chạy mới load control. Việc chia nhỏ như vậy sẽ giúp bạn dễ dàng nâng cấp, bảo trì, phát triển thêm cho trang web sau này, và có khả năng tái sử dụng lại các đoạn code. Phần thứ hai là mình sẽ trình bày rõ hơn về Dynamically Loading User Controls để cho các bạn nắm rõ hơn. Thông thường những user control có đuôi là *.ascx.Tất cả các liên quan đến việc load user control sẽ được viết vào đây.nó chỉ dùng vào việc thiết kế giao diên.nên nó thuộc loại dữ liệu động giúp ta có thể thay đổi một cách dể dàng.những fỉle có đuôi *.cs thường là các lớp giao diện dùng định nghĩ lại những phần tử thừa kế.nên nó thường thay cho lớp đa thừa kế.việc sử dụng lớp đa thừa kế có rất nhiều ứng dụng trong thực tế của trang web nó giúp cho việc ít tốn kém viết code dài hơn khi có nhiều phần tử có thuộc tính giống nhau sẽ được kế thừa từ lớp cha của nó. Mặc khác nó giúp trang web bảo mật hơn trong qua trình viết code,trách cho người sử dụng can thiệp sâu vào bên trong ứng dụng của trang web. Phần tỉnh của trang web hiện thị ra bên ngoài trang web thương được viết trong trang *.aspx.đây được xem là một khuông mẩu cơ bản của trang web.các user controls thường được hiển thị trong đây.nó sẽ nặm trong PlaceHolder hoặc Panel. Để user controls có thể hiển thị được vào trang web ta thường có dòng đăng kí: Ví dụ: the HeaderUserControl.ascx
Sau đó tiêu đề sẽ hiển thị là: Thông thường việc làm ở những dòng trên có tác dụng là đưa user controls vào trang web.nhưng như thế là vẫn chưa đủ,chỉ đưa vào nhưng điều khiển thật sự chưa nằm trên trang web.điều này khiến mọi thao tác của ta diều vô hiệu.tuy nhiên đã có phương pháp là đưa nó vào controls của trang web.cũng giống như là một danh sách controls và user sẽ tiếp tục được đưa vào danh sách đó.nhằm đặt điều khiển của user controls đó vào danh sách của trang web.nội dung của trang page_Load() sẽ là: Control FeaturedProductUserControl = LoadControl("FeaturedProduct.ascx"); Và các điều khiển sẽ là: Controls.Add(FeaturedProductUserControl); Tuy nhiên , thông thường trong thực tế người ta có thể đưa ra nhiều lựa chọn.có nghĩa là có nhiều User Controls Được đưa vào nên người ta sẽ dùng phương pháp đăng kí khác : Đó là tạo ra một mảng chứa các phần tử controls,khi cần dùng thì sẽ truy xuất phần tử trong mảng ra. Đặc điểm tiếp theo là thừa kế lớp giao diện để cho quá trình viết code được nhanh và đơn giản hơn. Việc thông qua lớp giao diện sẽ làm tăng thêm tính bảo mật Ví dụ :khai báo một lớp giao diện tên là IWizardStep public interface IWizardStep { void LoadStep(); Boolean NextStep(); } Để sử dụng lớp giao diện kế thừa ta phải biết Imlements lớp giao diện cha cho con. Khai báo kế thừa lớp giao diện: Public void abc:system.web.ui,IWizardStep { /////////////// } Đôi khi cũng có một số lớp giao diện được định nghĩa sẵn trong lớp. Trong qua trình làm việc của trang web đôi khi cần lưu dữ liệu trong phiên làm việc ,nên phải cần các biến có kiểu dữ liệu chung ở đây người ta sẽ dùng Viewstate hoặc session.
Nhận xét chung về Dynamically Loading User Controls khả năng truy cập trang web nhanh.giảm tối đa việc viết trang web trên *.aspx việc liên kết các trang sẽ thay thế bằng việc gọi các module tương ứng. Dễ sửa đổi code và phân quyền cho user tùy việc phân quyền mà các trang Web sẽ được nạp tương ứng. Bạn có thể dùng phương pháp này để xây dựng một ứng dụng như forum, bán hàng, hoặc lớn hơn là một portal chẳng hạn. Đặc điểm chung của các ứng dụng đó là chúng có rất nhiều module, nhiều chức năng khác nhau, và hiển thị theo quyền truy cập. Nếu viết theo các trang aspx thông thường. Bạn sẽ phải mất nhiều thời gian cho việc kéo thả, thậm chí là copy & paste cho các phần chung như header, footer, hay menu chính. Thay vào đó bạn hãy thực hiện phân quyền, load các role tương ứng và các UC cũng lần lượt hiển thị cho các bạn với các chức năng tương ứng. Tất nhiên phương thức xử lý các UC cũng khác đi một chút so với demo. Nhưng ý tưởng chung là vậy. Sau đây là một số thông tin về bài tập lớn của em đang làm cũng liên quan đến user control. 1.Trang WebSurvey.aspx.cs hiển . Hiển thị một hình thức khảo sát với câu hỏi tự động nạp. using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.IO; public partial class _WebSurvey : System.Web.UI.Page { Control survey = null; protected void Page_Load(object sender, EventArgs e) { int seclect = ddlLanguage.SelectedIndex; switch (seclect) { case 1: { survey = Page.LoadControl("ASPSurvey.ascx"); break; } case 2: { survey = Page.LoadControl("ASPNetSurvey.ascx"); break; } } if (survey != null) PlaceHolder1.Controls.Add(survey); else { ltlResults.Visible = true; } } protected void btnSubmit_Click(object sender, EventArgs e) { int seclect = ddlLanguage.SelectedIndex; switch (seclect) { case 1: { //http://forum.t3h.vn/showthread.php?t=2682 //ASPSurvey aspResults = new ASPSurvey(); //ep kieu sang ASP... ASPSurvey aspResults= (ASPSurvey)survey; ltlResults.Text = "ASP Survey";
ltlResults.Text += "Know slow? " + aspResults.KnowSlow().ToString(); ltlResults.Text += "Know outdated?" + aspResults.KnowOutdated().ToString(); break; } case 2: { ASPNetSurvey aspResults = (ASPNetSurvey)survey; ltlResults.Text = "ASP.NET Survey"; ltlResults.Text += "Know fast? "+aspResults.KnowFast().ToString(); ltlResults.Text += "Know newest? "+aspResults.KnowNewest().ToString(); break; } } } } Trong phần code trên đáng lưu ý là : ASPSurvey aspResults= (ASPSurvey)survey; Nó ép kiểu sang 1 control. 2.nhưng trang user control.xin lấy ví dụ một trang điển hình sau. ASPSurvey.ascx
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class ASPSurvey : System.Web.UI.UserControl { bool k1,k2; protected void Page_Load(object sender, EventArgs e) { k1 = chkSlow.Checked; k2 = chkOutdated.Checked; } public bool KnowSlow() { return k1; } public bool KnowOutdated() { return k2; } } Điều đặc biệt ở đây là tất cả mọi thiết kế điều nằm trong trang này là các thiết kế liên quan đến giao diện.