Thành viên
 
 
 
Sử Dụng Ajax Trong ASP.Net - Bài 1 làm quen với Ajax
  Trung bình: 2.7 (Đã có 85 lượt đánh giá)
   02/07/2007 05:32 PM

Một trong những kỹ thật lập trình đình đám nhất hiện nay mà chúng ta không thể không nghiên cứu. Qua các bài viết này tôi hi vọng sẽ giúp các bạn hiểu được cũng lắm vững các nguyên tắc lập trình cơ bản nhất của Ajax trong môi trường .Net. 

AJAX là gì?

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 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 máy chủ web, còn XML là định dạng chủ yếu cho dữ liệu truyền dữ liệu và Javacript có nhiệm vụ lắp ráp chúng lại với nhau.

Các bạn có thể tìm hiểu kĩ hơn về Ajax qua bài viết Kỹ thuật lập trình Ajax hoặc có thể tìm các bài nói về ajax đã được đăng lên zensoft bằng cách click vào đây

Hiển nhiên để phát triển ứng theo phong các AJAX chúng ta cần phải biết về JavaScript, DOM, CSS, HTML, XML… Điều đó thật không dễ dàng gì. Thật may là hiện tại đã có khá nhiều thư viện cho phép chúng ta phát triển ứng dụng AJAX nhanh và đơn giản hơn nhiều. (Chúng ta sẽ tìm hiểu về những thư viện này trong các bài sau ;-) ).

Ví dụ

Trong ví dụ tôi sẽ trình bày sau đây sẽ giúp chúng ta làm quen với cách mà AJAX làm việc, tất nhiên tại ví dụ này chúng ta sẽ không dùng những thư viện xây dựng sẵn.

AjaxEx1.aspx

Zensoft website - Lập Trình Ajax Trong ASP.Net

    <h1> Thí dụ về Ajax</h1>

    <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 superCategories = document.getElementById("<% =ddlSuperCategories.ClientID %>");
    var categories = document.getElementById("<% =ddlCategories.ClientID %>");
    var articles = document.getElementById("<% =ddlArticles.ClientID %>");
    var results = document.getElementById("<% =lblResults.ClientID %>");

    var HttpRequest = false;

    if (window.XMLHttpRequest) // Internet Explorer
    {
        HttpRequest = new XMLHttpRequest();
    }
    else  // Other browsers  
    {
        HttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }


    /// <summary>
    ///Lấy dữ liệu về thư mục bài viết từ server rồi đưa vào dropdown
    /// </summary>
    function getCategories(superCategoriesID)
    {
        resetCategory();
        if (!HttpRequest) return;
        if (superCategoriesID < 1) return;

        var url = "AjaxServer.aspx?superCategoryID=" + superCategoriesID;
        HttpRequest.open("GET",url);
        HttpRequest.onreadystatechange = function()
        {
            if (HttpRequest.readyState == 4 && HttpRequest.status == 200)
            {
               var xml = HttpRequest.responseXML;
               var c = xml.getElementsByTagName("category");

               categories.options.length = 0; //Xóa dữ liệu cũ
               for (i = 0; i < c.length; i++)
               {
                   var value  = c[i].firstChild.nodeValue;
                   var id = c[i].attributes[0].value;
                   categories.options[i] = new Option(value, id);
               }
               
               categories.disabled = false;
               categories.focus();             
           }
       }
       HttpRequest.send(null);
   }

   /// <summary>
   /// Lấy dữ liệu về bài viết từ server rồi đưa vào dropdown
   /// </summary>
   function getArticles(categoryID)
   {
       resetArticle();
       if (!HttpRequest) return;
       if (categoryID < 1) return;

       var url = "AjaxServer.aspx?categoryID=" + categoryID;
       HttpRequest.open("GET",url);

       HttpRequest.onreadystatechange = function()
       {
           if (HttpRequest.readyState == 4 && HttpRequest.status == 200)
           {

               var xml = HttpRequest.responseXML;
               var a = xml.getElementsByTagName("article");

               articles.options.length = 0;//Xóa dữ liệu cũ

               for (i = 0; i < a.length; i++)
               {
                   var value  = a[i].firstChild.nodeValue;
                   var id    = a[i].attributes[0].value;

                   articles.options[i] = new Option(value, id);
               }

               articles.disabled = false;
               articles.focus();             
           }

       }
       HttpRequest.send(null);
    }

    function resetCategory()
    {
        categories.options.length = 0;
        categories.disabled = 'disabled';
        
        resetArticle();
    }

    function resetArticle()
    {
        articles.options.length = 0;
        articles.disabled = 'disabled';
        
        results.innerHTML = "[Chưa có bài viết nào được chọn]";
    }


    function displayResults()
    {
        var text = "[Chưa có bài viết nào được chọn]";

        if (articles.selectedIndex > 0)
        {
            text = "<b> Bạn đã chọn:</b><br />"
            text = text + "Nhóm thư mục: " + superCategories.options[superCategories.selectedIndex].text +"<br />";
            text = text + "Thư mục: " + categories.options[categories.selectedIndex].text +"<br />";
            text = text + "Bài viết: " + articles.options[articles.selectedIndex].text +"<br />";
        }
        results.innerHTML = text;
    }

   </script>

AjaxEx1.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("Chọn nhóm thư mục...", "0"));

// handle change events on client
ddlSuperCategories.Attributes.Add("onchange", "getCategories(this.value);");
ddlCategories.Attributes.Add("onchange", "getArticles(this.value);");
ddlArticles.Attributes.Add("onchange", "displayResults();");

}

AjaxServer.aspx.cs


protected void Page_Load(object sender, EventArgs e)
{

    int superCategoryID=0;
    if (Request["superCategoryID"] != null)
    int.TryParse(Request["superCategoryID"], out superCategoryID);

    int categoryID = 0;
    if (Request["categoryID"] != null)
        int.TryParse(Request["categoryID"], out categoryID);

    // either retrieve cities or class dates
    if (categoryID != 0)
        GetArticles(categoryID);
    else
        GetCategories(superCategoryID);
}

/// <summary>
/// Trả về dữ liệu thư mục bài viết theo chuẩn XML
/// </summary>
/// <param name="superCategoryID"></param>
private void GetCategories(int superCategoryID)
{
    // lấy dữ liệu
    List<CategoriesBF> categories = CategoriesBF.GetCategoriesBySuperCategoryID(superCategoryID);

    StringBuilder sb = new StringBuilder();

    sb.Append(@"<?xml version=""1.0"" ?>");
    sb.Append(@"<categories>");
    sb.Append(@"<category id='0'>Chọn thư mục...</category>");

    foreach (CategoriesBF c in categories)
    {
        sb.Append(@"<category id='" + c.CategoryID + "'><![CDATA[" + c.Title + "]]></category>");
    }

    sb.Append(@"</categories>");

    Response.Clear();
    Response.ContentType = "text/xml";
    Response.Write(sb.ToString());
    Response.End();
}



private void GetArticles(int categoryID)
{
    // lấy dữ liệu
    List<ArticlesBF> articles = ArticlesBF.GetArticlesPublishedPagedByCategoyID(categoryID, 0, 10); //các bạn có thể hiểu là lấy 10 bài viết đầu tiên trong thư mục có ID = categoryID

    StringBuilder sb = new StringBuilder();

    sb.Append(@"<?xml version=""1.0"" ?>");
    sb.Append(@"<articles>");
    sb.Append(@"<article id='0'>Chọn bài viết...</article>");

    // note: class is a keyword, therefore prefix with '@'
    foreach (ArticlesBF a in articles)
    {
        sb.Append(@"<article id='" + a.ArticleID + "'><![CDATA[" + a.Title + "]]></article>");
    }

    sb.Append(@"</articles>");
    Response.Clear();

    Response.ContentType = "text/xml";
    Response.Write(sb.ToString());
    Response.End();
}


Click vào đây để xem ví dụ


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

 
Lê Hoài Nam 25/10/07 04:11 PM
Có thể cho tôi đoạn code xây dựng lớp List<CategoriesBF> được không?

hoainamgv 25/10/07 04:23 PM
có thể cho tôi xin đoạn code xây dựng lớp List<CategoriesBF> để tham khảo được không?Hiện tôi đang cần để làm đề tài tốt nghiệp
Xin chân thành cảm ơn

sondt 26/10/07 09:36 AM
@hoainamgv: vì code của lớp CategoriesBF có liên quan tới cấu trúc dữ liệu của website nên hiện tại chư thể public cho mọi người dc. Tuy nhiên bạn có thể tham khảo bài viết dưới đây để hiểu thêm cách xây dựng các tầng của website.

http://zensoft.vn/ShowArticle.aspx?ID=2343

Về cơ bản CategoriesBF là tầng Presentation tương ứng trong bài viết

Còn về cấu trúc của List<T> - đây là một lớp mới của .net 2.0, tôi sẽ cố gắng viết bài giới thiệu về lớp này trong thời gian sớm nhất.

hoainamgv 26/10/07 08:26 PM
Cảm ơn bạn SONDT về bài viết "Xây dựng ứng dụng tin tức đơn giản với ASP.NET 2.0", vì là người mới tìm hiểu về ASP.NET nên tôi thấy bài viết này rất thực tế và dễ hiểu
Mong là bạn sẽ dành thời gian để giới thiệu về cấu trúc List<T>

minhvuongnht 30/10/07 08:19 PM
xin  hoi co ai biet ket noi den co so du lieu Access bang JavaScript ko. cho cho minh voinha. Cam On nhieu?  

sondt 31/10/07 11:19 AM
@minhvuongnht: theo mình biết thì không thể connect CSDL chỉ với JavaScript (client), muốn thao tác với CSDL bạn nên chọn script chạy ở phía server

F2F 10/11/07 09:48 AM
giúp với kíu kí

server trả về client bằng code seo

        Dim xmlItems As XmlDocument = New XmlDocument

        xmlItems.Load(Server.MapPath("data") & "/quangcao.xml")
        Response.Clear()
        Response.ContentType = "text/xml"
        Response.Write(xmlItems)
        Response.End()

ở dưới client

if(xmlHttp.responseText.indexOf('invalid') == -1)
{
alert('huhuh');
//var node = xmlHttp.responseText.documentElement;
var xml = xmlHttp.responseXML;
alert(xml);
var node = xml.getElementsByTagName("Advertisements");

seo cai xml bằng null không --> không hiểu file xml trả với bác help em với. :-(

sondt 10/11/07 05:15 PM
@F2F: Tôi không hiểu câu hỏi của bạn lắm. Bạn có thể nói rõ hơn được không.

zeih 27/11/07 12:29 PM
trong đoạn code của AjaxEx1.aspx mình không thấy cbo ddlSuperCategories không có item, vậy dữ liệu đổ vô khi nào, trong code của server cũng không thấy đổ dữ liệu vào đó

sondt 27/11/07 02:43 PM
@Zeih: Mã chèn dữ liệu cho cbo ddlSuperCategories được thực hiện ở file AjaxEx1.aspx.cs, tôi đã bổ xung lại. Cám ơn bạn đã góp ý

sellpear 19/01/08 11:59 AM
Ban oi , sao minh toan bi loi khi thuc hien "categories.options.length = 0;"
Minh khong hieu tai sao lai phai khai bao :
var categories = document.getElementById("<% =ddlCategories.ClientID %>");
sao phai co <% %>.
Minh moi hoc ve Javascript nen mong ban chi ho minh.
Cam on ban nhieu

sondt 19/01/08 05:34 PM
dung <% %> để chèn mã Asp vào mà.
Đoạn mã trên để gọi ID ở phía client của control ddlCategories

sellpear 21/01/08 12:01 PM
Cam on ban.Minh da hieu roi.
Ban cho minh hoi them : Tai sao moi khi co su kien Page_load, cai combo ddlCategories khong giữ lại giá trị cũ mà lại bị reset lại. Ví dụ khi mình thêm một button và click vào button đó thì combo sẽ không có dữ liệu nữa. Có cách nào vẫn giữ lại dữ liệu khi click button được không bạn, mong bạn trả lời mình.

DanNT 21/01/08 01:33 PM
Cám ơn bạn đã đưa một bài rất hay và thực tiễn. Mình đã thu được một kiến thức bổ ích. Các bạn có thể chia sẻ với tôi về Ajax được thì hay quá. mình muốn tìm hiểu nó nhưng chưa biết  bắt đầu từ đâu

DanNT 21/01/08 02:44 PM
Bạn sellpear nói đúng đấy. Mình cũng không hiểu lấy dữ liệu của combo ddlCategories kiểu gì

htvphuong 13/03/08 08:05 PM
Sao lại có trang AjaxServer.aspx.cs nữa tui kg hiểu??? SONDT nói rõ dùm! Tui mới học ajax! Cám ơn trước!

MadScHT 24/04/08 08:41 PM
chào bạn. Mình đang nghiên cứu về Ajax và AjaxControlToolkit. Tức là sẽ tạo ứng dụng của Ajax trên nền tảng C#. Bài 1 của bạn rất hay. Thanks so much. Bạn có thể post tiếp bài 2, 3 và nhìu nữa. Ok?
Thân ái: MadScHT

sinbad 25/01/09 08:12 AM
Sao ko dùng ajax pro nhỉ, bạn sẽ đỡ tốn thời gian hơn nhiều, xem demo của mình viết trang music  = ajax pro : http://music.congnghiep4.com

Trần Văn Vẽ 11/02/09 02:57 PM
Cảm ơn bạn thật nhiều, đây là một ví dụ thật bổ ích. Mình nghĩ chúng ta phải làm theo thế này mới hy vọng hiểu được Ajax là gì, còn sử dụng các component có sẳn thì chỉ như gà công nghiệp, làm theo thôi. Sau khi đã hiểu sâu, thì việc sử dụng các component để xây dựng ứng dụng nhanh hơn.

nguyễn văn tuấn 13/06/09 11:35 AM
mìh đang làm web với asp.net bình thương. Mình muốn sử dụng thêm ajax vào trong đó thì làm thế nào?

phongvan0818 24/08/09 09:44 AM
Bạn có thể giải thích cho mình đoạn code   
sb.Append(@"<categories>");
....
sb.Append(@"<categories>");

nghĩa là sao vậy bạn. Mình làm các bước theo hướng dẫn nhưng báo lỗi đoạn đó. Dưới là đoạn thông báo lỗi mà mình mắc phải
This XML file does not appear to have any style information associated with it. The document tree is shown below.   

<Loai>
<Nhom id="0">Chọn thư mục...</Nhom>
</Loai>

phongvan0818 25/08/09 07:42 AM
Vẫn chưa ai trả lời giúp mình ah!

sondt 25/08/09 10:08 PM
@phongvan0818:
Chào ban.

đoạn mã trên là
sb.Append(@"<categories>");
....
sb.Append(@"</categories>");

chứ ko phải

sb.Append(@"<categories>");
....
sb.Append(@"<categories>");

sb.Append() chỉ có ý nghĩa là nối chuỗi thôi.

Đoan mã trên dùng để tạo ra một chuỗi theo định dạng XML

Có thể bạn đã tạo ra chuỗi không đúng định dạng XML nên ctrinh mới báo lỗi như vậy



phongvan0818 29/08/09 10:11 AM
Tks bạn nhé! Để mình check lại

caheoconmimi 02/02/10 03:42 PM
Bạn ơi cho mình hỏi khi dua du lieu vao bien categories
List<CategoriesBF> categories = CategoriesBF.GetCategoriesBySuperCategoryID(superCategoryID);

roi chay code duoi lam sao co the lay duoc dung c.CategoryID va c.Title trong list<CategoriesBF> minh cung c.(nhung ko ra)

    foreach (CategoriesBF c in categories)
    {
        sb.Append(@"<category id='" + c.CategoryID + "'><![CDATA[" + c.Title + "]]></category>");
    }

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