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
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.