Thành viên
 
 
 
Làm quen với Ajax Bài 2
  Trung bình: 2.7 (Đã có 29 lượt đánh giá)
   09/08/2008 08:00 AM

Trong bài viết trước tôi đã giới thiệu với các bạn các nguyên tắc cơ bản nhất để có thể sử dụng được ajax trong asp.net. Ở bài này chúng ta làm quen với cách lập trình ajax sử dụng thư viện ajax của mirosoft. 

Sử Dụng Ajax Trong ASP.Net - Bài 1 làm quen với Ajax

Để bắt đầu ví dụ, bạn hãy chắc chắn rằng đã cài đặt ajax extension. Nếu chưa bạn bạn có thể vào trang ajax.asp.net để tải về

Trong bài này chúng ta vẫn sử dụng các dropdow như ví dụ ở bài trước.Khi 1 dropdown nó sẽ gửi 1 thông điệp SOAP ('Simple Object Access Protocol) cho webservice, client sẽ nhận về dữ liệu theo định dạng JSON (JavaScript Object Notation). Tất cả quá trình trên sẽ được quản lý bởi thư viện AJAX của Microsoft.

ajax example

AjaxEx2.aspx

...
    <asp:ScriptManager runat="server" ID="ScriptManager1">
       <Services>
        <asp:ServiceReference Path="~/Examples/AjaxEx2Webservice.asmx" />
       </Services>
    </asp:ScriptManager>   
        <br />
        <h1>
            Thí dụ về Ajax bài 2</h1>
        <div>
            <table style="width: 380px">
                <tr>
                    <td width="50%">
                        Hãy chọn nhóm thư mục
                    </td>
                    <td width="50%">
                        <asp:DropDownList AutoPostBack="false" ID="ddlSuperCategories" runat="server" Width="190">
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td>
                        Chọn thư mục:
                    </td>
                    <td>
                        <asp:DropDownList AutoPostBack="false" ID="ddlCategories" runat="server" Width="190"
                            Enabled="false">
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td>
                        Chọn bài viết:
                    </td>
                    <td>
                        <asp:DropDownList AutoPostBack="false" ID="ddlArticles" runat="server" Width="190"
                            Enabled="false">
                        </asp:DropDownList>
                    </td>
                </tr>
            </table>
    <asp:Label ID="lblResults" runat="server" Text="[Chưa có bài viết nào được chọn]" ForeColor="#880000"></asp:Label>     

<script type="text/javascript" language="Javascript">

   var ddlSuperCategories;
   var ddlCategories;
   var ddlArticles;
   var lblResults;

   var SuperCategoryID;

//khi trang web được load, ta thêm các sự kiện cho dropdown
   function pageLoad()
   {
      ddlSuperCategories = $get("<% =ddlSuperCategories.ClientID %>");
      ddlCategories = $get("<% =ddlCategories.ClientID %>");
      ddlArticles = $get("<% =ddlArticles.ClientID %>");

      $addHandler(ddlSuperCategories, "change", onSuperCategoriesChanged);
      $addHandler(ddlCategories, "change", onCategoriesChanged);
      $addHandler(ddlArticles, "change", onArticlesChanged);

      lblResults = $get("<% =lblResults.ClientID %>");
   }
 
   /// <summary>
   /// Xóa dữ liệu trong ddlCategories khi ddlSuperCategories chưa đươc chọn.
   /// </summary>
   function resetCategories()
   {
       ddlCategories.options.length = 0;
       ddlCategories.disabled = true;  
       resetArticles()
   }
 
   /// <summary>
   /// Xóa dữ liệu trong ddlArticles.
   /// </summary>
   function resetArticles()
   {

       ddlArticles.options.length = 0;
       ddlArticles.disabled = true;

       lblResults.innerHTML = "[---]";
   }

   /// <summary>
   /// Sự kiện sảy ra khi dllSuperCategories thay đổi. Trong sự kiện này sẽ gọi tới AjaxEx2Webservice để lấy dữ liệu.
   /// </summary>
   function onSuperCategoriesChanged(eventElement)
   {
       resetCategories();

       SuperCategoryID = ddlSuperCategories.options[ddlSuperCategories.selectedIndex].value;

       if (SuperCategoryID > 0)
       {
           AjaxEx2Webservice.GetCategories(SuperCategoryID, onGetCategoriesCallback);
       }
   }

   /// <summary>
   /// Sự kiện sảy ra khi dllCategories thay đổi.
   /// </summary>
   function onCategoriesChanged(eventElement)
   {
       resetArticles();

       var CategoryID = ddlCategories.options[ddlCategories.selectedIndex].value;
       if (CategoryID > 0)
       {
           AjaxEx2Webservice.GetArticles(CategoryID, onGetArticlesCallback);
       }
   }
   
   /// <summary>
   /// Hiển thị kết quả khi ddlArticles thay đổi
   /// </summary>
   function onArticlesChanged(eventElement)
   {

       var text = "[---]";

       ArticleID = ddlArticles.options[ddlArticles.selectedIndex].value;

       if (ArticleID > 0)
       {
           var aticleTitle   = ddlArticles.options[ddlArticles.selectedIndex].text;
           text = "Bạn đã chọn bài viết: '" + aticleTitle;
       }

       lblResults.innerHTML = text;
   }
   
   /// <summary>
   /// Sử kiện này sẽ sảy ra khi server trả về dữ liệu cho ddlCategories.
   /// </summary>
   function onGetCategoriesCallback(Categories)
   {
       ddlCategories.options[0] = new Option("[---]",0);
       for (var i = 0; i < Categories.length; ++i)
       {
           ddlCategories.options[ddlCategories.options.length] =
               new Option(Categories[i].Title,Categories[i].CategoryID);
       }
       ddlCategories.disabled = false;
       ddlCategories.focus();
   }

   /// <summary>
   /// Sử kiện này sẽ sảy ra khi server trả về dữ liệu cho ddlArticles.
   /// </summary>
   function onGetArticlesCallback(Article)
   {
       ddlArticles.options[0] = new Option("[---]",0);

       for (var i = 0; i < Article.length; ++i)
       {
          ddlArticles.options[ddlArticles.options.length] =
              new Option(Article[i].Title, Article[i].ArticleID);

       }

       ddlArticles.disabled = false;
       ddlArticles.focus();
   }
</script>

 AjaxEx2.aspx.cs

    protected void Page_Load(object sender, EventArgs e)
    {
        ddlSuperCategories.DataSource = SuperCategoriesBF.GetSuperCategoriesAll();
        
        ddlSuperCategories.DataTextField = "Title";
        ddlSuperCategories.DataValueField = "SuperCategoryID";

        ddlSuperCategories.DataBind();

        ddlSuperCategories.Items.Insert(0, new ListItem("[---]", "0"));

    }


AjaxEx2Webservice.cs

...
using System.Collections.Generic;
using AjaxControlToolkit;
using System.Web.Script.Services;

using Zensoft.Website.BusinessLayer.BusinessFacade;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class AjaxEx2Webservice : System.Web.Services.WebService
{

    public AjaxEx2Webservice()
    {
    }

    /// <summary>
    /// Hàm này dùng để lấy dữ liệu về thư mục bài viết
    /// </summary>
    /// <param name="superCategoyID"></param>
    /// <returns></returns>
    [WebMethod]
    public CategoriesBF[] GetCategories(int superCategoyID)
    {
        return CategoriesBF.GetCategoriesBySuperCategoryID(superCategoyID).ToArray();
    }

    /// <summary>
    /// Lấy 10 bài viết trong thư mục được chọn
    /// </summary>
    /// <param name="categoyID"></param>
    /// <returns></returns>
    [WebMethod]
    public ArticlesBF[] GetArticles(int categoyID)
    {
        return ArticlesBF.GetArticlesPublishedPagedByCategoyID(categoyID, 0, 10).ToArray();
    }
}


Bạn có thể click vào đây để xem vi dụ minh họa

Qua bài biết tôi hi vọng đã giúp các bạn hiệu được cách làm việc với ajax trong asp.net. Chúc các bạn thành công.


Gửi bởi: sondt
Lượt xem: 8778

 
nhỏ tý 14/08/08 10:14 AM
bạn có cái demo không

sondt 14/08/08 02:21 PM
http://zensoft.vn/examples/AjaxEx2.aspx
đây là ví dụ demo

nhỏ tý 14/08/08 04:02 PM
ý mình là cái mã nguồn đó mình làm ma chưa được

sondt 14/08/08 10:01 PM
đoạn ví dụ trên minh họa cho kỹ thuật ajax được ứng dụng vào website zensoft ntn. Nên bạn không thể dùng vi dụ đó để chạy trên máy của mình được vì nó có sử dụng một số hàm  lấy dữ liệu từ Zensoft.

annhat 20/08/08 02:07 AM
Pác SONDT hay thiệt, dám đem cấu trúc DB Zensoft lên khoe hàng. Nhỡ mà bị crack mất dữ liệu thì khổ :D

haipt 20/08/08 08:42 AM
@annhat: Bác Sondt làm vậy chỉ là chia sẻ kiến thức cho anh em thôi, bạn dùng từ "khoe hàng" có vẻ hơi "tội" cho bác ấy ^_^... Sondt nhà ta luôn thích "cuộc sống ẩn dật trên mạng" hehe...

phupn 28/09/08 10:44 AM
Bài này rất hay ! thay vì làm như "làm quen với AJAX bài 1" thì bạn kết hợp với webservice.Bạn có thể giải thích rỏ hơn được không.bài viết có vẻ thiếu dữ kiện.Bình thường mọi đọc thì chắc không thể hiểu dc lớp BusinessFacade là gì.
bạn có thể làm 1 ví dụ rỏ ràng hơn không?
VD như lớp BF thì nó trả về object j chẵng hạn.
thanks !!!

QuangZ 09/10/08 12:37 PM
Em chào bác, bài viết của bác rất hay.
Em cảm ơn bác.

sondt 09/10/08 03:57 PM
@phupnt: Đợt này mình hơi bận nên ko thể viết đc bài để chia sẻ cùng các bạn, để hơn về BusinessFacade là gì bạn có thể tham khảo thêm tại bài viết http://zensoft.vn/ShowArticle.aspx?ID=2343

linh 18/02/09 11:31 PM
hic,minh` cung lam ajax nhưng lại bằng c# cơ,có bạn nào biết chỉ giúp mình với.

madvisor2008 15/03/09 07:16 PM
Xử lý 1 vấn đề đơn giản mà viết phức tạp quá!
Để giải quyết cái này chỉ cần làm bằng html + ajax đơn giản cũng được mà?

coitn32 15/03/09 11:52 PM
Cho mình hỏi là gọi webservice trong javascript như thế nào vậy. mình đã khai báo đoạn:
<asp:ScriptManager runat="server" ID="ScriptManager1">
      <Services>
        <asp:ServiceReference Path="~/MyWebservice.asmx" />
      </Services>
    </asp:ScriptManager> 

mà khi gọi nó vẫn báo là MyWebservice chưa được định nghĩa?

chjao ban 19/08/09 09:55 AM
Code lởm. có thì share cho mọi người
định nhử anh em à. hackervn

phongvan0818 31/08/09 08:20 AM
Bạn có thể hướng dẫn mình cách viết ajax bằng C# được không, mình làm mãi mà chưa được,tks!

Mr DevNET 09/10/10 09:26 AM
Bài này rất hay,nó cho bạn biết được cơ chế hoạt động của ajax.
nếu các bạn chỉ biết dùng các tool thì bạn không biết nó hay như thế nào đâu

Quảng cáo Hải Phòng
Quảng cáo Hải Phòng
NHẬN XÉT CỦA BẠN
Trung bình: 2.7   
Kiểu gõ: Off Telex VNI VIQR Tổng hợp (Telex, Vni, Viqr)
Họ Tên:
Hòm thư:
Nội Dung:
Số ký tự còn lại: 3500