Sử dụng Ajax trong website Asp.Net

Ajax được giới thiệu lần đầu tiên vào ngày 18/02/2005 trong một bài báo có tên AJAX : A New Approach to Web Applications của tác giả Jesse James Garrett, công ty AdapativePath. Ngay sau đó thuật ngữ AJAX được phổ biến cực kỳ nhanh chóng trong cộng đồng phát triển Web và cho đến nay nó là một trong những từ khóa được tìm kiếm nhiều nhất trên Internet.

Chúng ta hãy làm một ví dụ nhỏ về sử dụng AJAX trong một website viết bằng asp.net để hiểu rõ vấn đề này. Hãy tạo một project mới với cấu trúc như sau:

Trong ví dụ dưới đây chúng ta sẽ làm một chức năng lấy thời gian từ sever thông qua Ajax bằng 2 phương pháp.

1. Sử dụng công cụ có sẵn của Visual Studio

- UpdatePanel của Visual Studio hỗ trợ người lập trình web thao tác với ajax một cách dễ dàng thông qua kéo thả, chỉ cần kéo UpdatePanel vào trang aspx, mọi xử lý viết trong thẻ UpdatePanel này sẽ được VS tự động chuyển sang xử lý dạng Ajax.

- Chúng ta tạo mới 1 trang ex1.aspx, thêm vào mã code như sau ở trang aspx

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label runat="server" Text="Label" ID="lbTime"></asp:Label>
                <asp:Button ID="Button1" runat="server" Text="Get Time" OnClick="Button1_Click" />
            </ContentTemplate>

        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                <img src="img/ajax-loader.gif" />
            </ProgressTemplate>
        </asp:UpdateProgress>

- Để sử dụng Ajax, chúng ta bắt buộc phải thêm thẻ ScriptManager vào website, nếu sử dụng cho toàn bộ trang web ta cần thêm thẻ này vào trang MasterPage. Nội dung cần sử dụng ajax của bạn bỏ trong cặp thẻ asp:UpdatePanel, asp:UpdateProcess có tác dụng hiện thị thông báo loading... khi ajax đang xử lý.

- Trang trang ex1.aspx.cs ta thêm mã như sau

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            lbTime.Text = DateTime.Now.ToString();    
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        lbTime.Text = DateTime.Now.ToString();
    }

- Bây giờ, khi bạn click vào button trên trang aspx, bạn sẽ thấy thời gian thay đổi nhưng trang không bị load lại, tương tự thay vì chức năng hiện thị thời gian, bạn có thể làm một form contact hoặc comment bài viết.

2. Sử dụng jQuery

- Thay vì sử dụng công cụ có sẵn của Visual Studio cung cấp, các bạn có thể sử dụng phương thức $ajax của jQuery, bên cạnh phương thức này jQuery còn có một số phương thức khác như $load, $post với chức năng tương tự nhưng trong ví dụ dưới đây tôi sẽ dùng hàm $ajax. Chúng ta hãy tạo một trang ex2.aspx, mã nguồn ở trang aspx như sau

<form id="form1" runat="server">
        <asp:Label ID="lbTime" CssClass="lbTime" runat="server" Text="Label"></asp:Label>
        <input type="button" value="Get Time" id="btGetTime" />
    </form>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btGetTime').click(function () {
                $.ajax({
                    type: "POST",
                    url: "ex2.aspx/GetTime",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        $('.lbTime').text(data.d);
                    },
                    error: function () { alert('False!');}
                });
            });
        });
    </script>

- Ở trang ex2.aspx.cs ta cần viết một hàm lấy thời gian sever và trả về cho client, chúng ta sẽ phải dùng websevice. Thêm mã dưới đây vào trang ex2.aspx.cs của bạn

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack) và
        {
            lbTime.Text = DateTime.Now.ToString();
        }
    }

    [WebMethod]
    public static string GetTime()
    {
        return DateTime.Now.ToString();
    }

 

- Vì phương thức GetTime chúng ta viết ở dạng websevice, nên ta cần sử dụng thư viện System.Web.Services, giá trị trả về của phương thức này sẽ được lấy và hiện thi khi click vào button btGetTime thông qua phương thức $ajax của jQuery như ta đã viết ở trên (trang ex2.aspx). Ta hãy chạy thử trang ex2.aspx để xem kết quả, thời gian sẽ thay đổi khi click mà trang sẽ không phải load lại.

3. Kết

Tùy vào mỗi trường hợp các bạn có thể sử dụng một trong 2 phương pháp trên cho ứng dụng web của mình. Để dễ hiểu, tôi có đính kèm mã nguồn của ví dụ này ở cuối bài viết.

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

Download Source

Related Post


Sử dụng nén Gzip cho website Asp.net
Friday, October 25, 2013
Ở bài trước, tôi đã giới thiệu về cách tối ưu hóa Html,Css & Javascript để giảm dung lượng và tăng tốc độ tải của website, ở bài này chúng ta sẽ tìm hiểu về tính năng nén Gzip hiện tại đang được áp dụng rất phổ biến và được cho là tối ưu nhất. Gzipping giảm thời gian đáp ứng các yêu cầu của client bằng cách nén các thông tin trả lời và giảm đươc 70% kích thước. Hầu hết 90% các giao tiếp trên Internet giữa các trình duyệt và máy chủ web đều sử dụng Gzip.
Tích hợp thông tin thời tiết vào website P2
Tuesday, October 22, 2013
Như ở bài trước, chúng ta đã tìm hiểu được cách đọc dữ liệu thời tiết từ file xml của yahoo để xây dựng một tính năng xem thời tiết đơn giản. Ở bài này, chúng ta sẽ đi vào hoàn thiện chức năng xem thời tiết với lựa chọn cho nhiều thành phố, và hiển thị thêm hình ảnh mô tả...
Search

Đăng ký nhận bài mới


Category

Blog Archive