Cấp bậc tác giả:

DOTNET

Tạo ứng dụng Chat AJAX trên ASP.NET

Được viết bởi webmaster ngày 19/04/2013 lúc 12:26 PM
Ajax (Asynchronous JavaScript And XML) là một kỹ thuật phát triển web mới tương tác trang web. AJAX giúp chúng ta phát triển các ứng dụng web và lấy lượng nhỏ dữ liệu từ máy chủ web.
  • 0
  • 3616
Tải tệp tin: Click ở đây

Tạo ứng dụng Chat AJAX trên ASP.NET


Giới thiệu

Ajax (Asynchronous JavaScript And XML) là một kỹ thuật phát triển web mới tương tác trang web. AJAX giúp chúng ta phát triển các ứng dụng web và lấy lượng nhỏ dữ liệu từ máy chủ web.
  • JavaScript
  • XML
  • Asynchronous Call đến máy chủ
Chat

Ví dụ AJAX Chat cho thấy cách xây dựng trình duyệt nền tảng Chat sử dụng ASP.NET và AJAX. ASP.NET AJAX là cách dễ nhất và thú vị nhất để bắt đầu viết các ứng dụng Web không đồng bộ sử dụng ASP.NET.

Bước 1: Mở Visual Studio 2010.
  • Vào File-> New-> WebSite
  • Chọn ASP.NET Empty WebSite
Bước 2: Tới Solution Explorer và nhấn chuột phải.
  • Chọn Add-> New Item
  • Chọn WebForm
  • Trang default.aspx mở
Thêm một vài điều khiển Chat

Bước 3:   Vào trang default.aspx và click vào tùy chọn [Design] và kéo control từ hộp công cụ.
Kéo Control ToolkitScriptManager, điều khiển UpdatePanel, Button, Bulleted List,TextBox
Nhớ Add Reference AjaxControlToolkit.dll vào

Xác định kích hoạt cho UpdatePanel

Bước 4: Đến default.aspx tùy chọn [Design] và click vào UpdatePanel.
  • Chọn Properties
  • Bấm vào Trigger và xác định tên sự kiện ControlIDand
updatepanel01.jpg

Bước 5: Viết mã điều khiển UpdatePanel và xác định AsyncPostBackTrigger.
<asp:UpdatePanel ID="ChatUpdatePanel" runat="server" UpdateMode="Always">
                <ContentTemplate>
                    Chatters<br/>
                    <asp:BulletedList ID="ChattersBulletedList" runat="server" BackColor="#FF8000" />
                        Chat Text<br/>
                    <div id="ChatText" style="width: 440px; height: 140px; overflow: auto; background-color: #B6E2B7;">
                        <asp:BulletedList runat="server" ID="ChatMessageList" />
                    </div>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="cmdUpdate" EventName="Click" />
                    <asp:AsyncPostBackTrigger ControlID="ChatTextTimer" EventName="Tick" />
                </Triggers>
            </asp:UpdatePanel>

Add Thư mục App_Code

Bước 6: Tới Solution Explorer và thêm thư mục App_Code cho Chat.cs và tập tin lớp Chatter.cs, cần thiết để tạo ra dữ liệu thử nghiệm.

Thêm Chatter

Bước 7: Đến Solution Explorer và click vào dự án.
  • Chọn Add-> NewItem
  • Chọn lớp GlobalApplication
  • Global.asax trang mở
Xác định NameSpace

<%@ Import Namespace="System.Collections.Generic" %> Đây là bài ​​kiểm tra chỉ có dữ liệu

Mã:

<%@ Import Namespace="System.Collections.Generic" %>
<%@ Application Language="C#" %>

<script runat="server">
    void Application_Start(object sender, EventArgs e)
    {
        List<Chatter> chatters = new List<Chatter>();
        chatters.Add(new Chatter(new Guid("CD863C27-2CEE-45fd-A2E0-A69E62B816B9"), "QuangIT"));
        chatters.Add(new Chatter(Guid.NewGuid(), "Dotnet1"));
        chatters.Add(new Chatter(Guid.NewGuid(), "Dotnet2"));
        chatters.Add(new Chatter(Guid.NewGuid(), "Dotnet3"));
        chatters.Add(new Chatter(Guid.NewGuid(), "Dotnet4"));
        chatters.Add(new Chatter(Guid.NewGuid(), "Dotnet5"));
        chatters.Add(new Chatter(Guid.NewGuid(), "Dotnet6"));
        Application.Add("Chatters", chatters);

        List<chate> chats = new List<chate>();
        chats.Add(new chate());
        Application.Add("Chats", chats);
        foreach (KeyValuePair<Guid, Chatter> chatter in Chatter.ActiveChatters())
        {
            chatter.Value.Join(chate.ActiveChats()[0]);
        }
    }
    void Application_End(object sender, EventArgs e)
    {
        //  Code that runs on application shutdown
    }
    void Application_Error(object sender, EventArgs e)
    {
        // Code that runs when an unhandled error occurs|
    }
    void Session_Start(object sender, EventArgs e)
    {
        // Code that runs when a new session is started
    }
    void Session_End(object sender, EventArgs e)
    {
        // Code that runs when a session ends. 
        // Note: The Session_End event is raised only when the sessionstate mode
        // is set to InProc in the Web.config file. If session mode is set to StateServer 
        // or SQLServer, the event is not raised.

    }
       
</script>

Lưu ý: Vì chúng ta muốn mô phỏng nhóm Chatters đã đăng nhập vào trang web, chúng ta sẽ tạo ra danh sách các đối tượng tán gẫu bên trong phương thức Application_Start. 

Bước 8: Tới Default.aspx.cs và xác định hai biến private, cho trò chuyện ("Name"), và một cho ví dụ trò chuyện duy nhất.

Mã 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    private chate m_chat = chate.ActiveChats()[0];
    private Chatter m_chatter = Chatter.ActiveChatters()[new Guid("CD863C27-2CEE-45fd-A2E0-A69E62B816B9")];
    protected void Page_Load(object sender, EventArgs e)
    {
        _UpdateChatterList();
        _UpdateChatMessageList();
    }
    private void _UpdateChatMessageList()
    {
        ChatMessageList.DataSource = m_chat.Messages;
        ChatMessageList.DataBind();
    }
    private void _UpdateChatterList()
    {
        ChattersBulletedList.DataSource = m_chat.Chatters;
        ChattersBulletedList.DataTextField = "Name";
        ChattersBulletedList.DataBind();
    }
    protected void SendButton_Click(object sender, EventArgs e)
    {
        if (!string.IsNullOrEmpty(NewMessageTextBox.Text))
        {
            string messageSent = m_chat.SendMessage(m_chatter, NewMessageTextBox.Text);
            NewMessageTextBox.Text = string.Empty;
        }
        _UpdateChatterList();
        _UpdateChatMessageList();
    }
}

Bước 9: Trang default.aspx và viết mã.

Mã:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script type="text/javascript">
            function _SetChatTextScrollPosition() {
                var chatText = document.getElementById("ChatText");
                chatText.scrollTop = chatText.scrollHeight;
                window.setTimeout("_SetChatTextScrollPosition()", 1);
            }
            window.onload = function () {
                _SetChatTextScrollPosition();
            }
        </script>
        <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </cc1:ToolkitScriptManager>
        Chatters
        <br />
        <asp:BulletedList ID="BulletedList1" runat="server" BackColor="#FF8000" />
        Chat Text<br />
        <asp:UpdatePanel ID="ChatUpdatePanel" runat="server" UpdateMode="Always">
            <ContentTemplate>
                Chatters<br />
                <asp:BulletedList ID="ChattersBulletedList" runat="server" BackColor="#FF8000" />
                Chat Text<br />
                <div id="ChatText" style="width: 440px; height: 140px; overflow: auto; background-color: #B6E2B7;">
                    <asp:BulletedList runat="server" ID="ChatMessageList" />
                </div>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="cmdUpdate" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="ChatTextTimer" EventName="Tick" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="cmdUpdate" runat="server" Text="Button" OnClick="SendButton_Click" />
        Send Message Text<br />
        |
        <asp:TextBox ID="NewMessageTextBox" runat="server" Columns="50" BackColor="White"></asp:TextBox>
        <asp:Timer runat="server" ID="ChatTextTimer" Interval="1000" />
    </div>
    </form>
</body>
</html>

Bước 10: Lớp Chate.cs và viết mã cho các dữ liệu thử nghiệm.

Mã 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Collections.ObjectModel;

/// <summary>
/// Summary description for chate
/// </summary>
public class chate
{
    private Guid m_id;
    public Guid Id
    {
        get { return m_id; }
    }
    private List<string> m_messages = new List<string>();
    public List<string> Messages
    {
        get { return m_messages; }
    }
    private List<Chatter> m_chatters = new List<Chatter>();
    public List<Chatter> Chatters
    {
        get { return m_chatters; }
        set { m_chatters = value; }
    }
    public static ReadOnlyCollection<chate> ActiveChats()
    {
        if (HttpContext.Current.Application["Chats"] != null)
        {
            List<chate> chats = ((List<chate>)HttpContext.Current.Application["Chats"]);
            return new ReadOnlyCollection<chate>(chats);
        }
        else
        {
            return new ReadOnlyCollection<chate>(new List<chate>());
        }
    }
    public string SendMessage(Chatter chatter, string message)
    {
        string messageMask = "{0} @ {1} : {2}";
        message = string.Format(messageMask, chatter.Name, DateTime.Now.ToString(), message);
        m_messages.Add(message);
        return message;
    }
}

Bước 11: Bây giờ viết mã cho lớp chatter.cs cho ứng dụng chat.

Mã 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Summary description for Chatter
/// </summary>
public class Chatter
{
private Guid m_id;
    public Guid Id
    {
        get { return m_id; }
    }
    private string m_name;
    public string Name
    {
        get { return m_name; }
    }
    public static Dictionary<Guid, Chatter> ActiveChatters()
    {
        Dictionary<Guid, Chatter> retval = new Dictionary<Guid, Chatter>();
        if (HttpContext.Current.Application["Chatters"] != null)
        {
            List<Chatter> chatters = ((List<Chatter>)HttpContext.Current.Application["Chatters"]);
            foreach (Chatter chatter in chatters)
            {
                retval.Add(chatter.Id, chatter);
            }
        }
        return retval;
    }
    public void Join(chate chat)
    {
        chat.Chatters.Add(this);
    }
    public Chatter(Guid id, string name)
    {
        m_id = id;
        m_name = name;
    }
}

Bước 12: Chạy ứng dụng. Bấm F5.
Bước 13: Viết tin nhắn trong texbox và click vào nút gửi.

updatepanel02.jpg

Nguồn bài viết: Dngaz.com

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML