AJAX学习 23日 组件应用 gridview和聊天室和Control Toolkit
3章 数据显示控件 AJAX GridView
上：模糊查询，输入框
中：显示， GridView
下：添加一条成语
任务：数据的增加、修改、删除、浏览
用到ScripManager,UpdatePanel、UpdateProcess
ScripManager负责管理页面的脚本资源
有些属性很重哟啊
这个采用三层设计
Phrase类执行数据操作
ObjectDataSource数据操作和页面操作的中介
数据显示、数据添加、修改、删除
成语类Phrase把常用操作进行封装
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>Ajax GridView</title>
</head>
<body style="font-size: 12px; background-color: #F7F6F3;">
<form id="form1" runat="server">
<div style="text-align: center;">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<span style="font-size: 11pt; color: #990033"><strong>在线 成语词典</strong></span>
</div>
请输入要查询的关键字：<asp:TextBox ID="keyword" runat="server"></asp:TextBox>
<asp:Button ID="search" runat="server" Text="搜索"></asp:Button>
<br />
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div style="color: Red; position: absolute; top: 10px; left: 800px; background-color:#333333;">
<h3>
正在更新数据.....</h3>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="ObjectDataSource1"
GridLines="None" Width="850px" CellPadding="4" ForeColor="#333333" PageSize="6">
<Columns>
<asp:CommandField ShowEditButton="True" ShowDeleteButton="True" HeaderText="操作">
<ItemStyle Width="80px" />
</asp:CommandField>
<asp:BoundField DataField="Name" HeaderText="名称" SortExpression="Name">
<ItemStyle Width="60px" />
</asp:BoundField>
<asp:BoundField DataField="pronunciation" HeaderText="发音" SortExpression="pronunciation">
<ItemStyle Width="60px" />
</asp:BoundField>
<asp:BoundField DataField="paraphrase" HeaderText="解释" SortExpression="paraphrase">
<ItemStyle Width="215px" />
</asp:BoundField>
<asp:BoundField DataField="derivation" HeaderText="起源" SortExpression="derivation">
<ItemStyle Width="215px" />
</asp:BoundField>
<asp:BoundField DataField="example" HeaderText="示例" SortExpression="example">
<ItemStyle Width="215px" />
</asp:BoundField>
</Columns>
<EmptyDataTemplate>
没有找到您要的成语。
</EmptyDataTemplate>
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" HorizontalAlign="Left" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger EventName="Click" ControlID="search" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataKeyNames="Id"
DefaultMode="Insert" GridLines="None" DataSourceID="ObjectDataSource1" Width="206px">
<Fields>
<asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True"
SortExpression="Id" />
<asp:BoundField DataField="Name" HeaderText="名称" SortExpression="Name">
<ItemStyle Width="60px" />
</asp:BoundField>
<asp:BoundField DataField="pronunciation" HeaderText="发音" SortExpression="pronunciation">
<ItemStyle Width="60px" />
</asp:BoundField>
<asp:BoundField DataField="paraphrase" HeaderText="解释" SortExpression="paraphrase" />
<asp:BoundField DataField="derivation" HeaderText="起源" SortExpression="derivation" />
<asp:BoundField DataField="example" HeaderText="示例" SortExpression="example" />
<asp:CommandField ShowInsertButton="True" />
</Fields>
</asp:DetailsView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetPhrase"
TypeName="Phrase" DeleteMethod="DeletePhrase" UpdateMethod="UpdatePhrase" InsertMethod="InsertPhrase"
OnInserting="ObjectDataSource1_Updating" OnUpdating="ObjectDataSource1_Updating"
OnDeleting="ObjectDataSource1_Updating">
<SelectParameters>
<asp:ControlParameter ControlID="keyword" DefaultValue="一" Name="name" PropertyName="Text" />
</SelectParameters>
<UpdateParameters>
<asp:Parameter Name="id" Type="String" />
<asp:Parameter Name="Name" Type="String" />
<asp:Parameter Name="pronunciation" Type="String" />
<asp:Parameter Name="paraphrase" Type="String" />
<asp:Parameter Name="derivation" Type="String" />
<asp:Parameter Name="example" Type="String" />
</UpdateParameters>
<DeleteParameters>
<asp:Parameter Name="id" Type="String" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="Name" Type="String" />
<asp:Parameter Name="pronunciation" Type="String" />
<asp:Parameter Name="paraphrase" Type="String" />
<asp:Parameter Name="derivation" Type="String" />
<asp:Parameter Name="example" Type="String" />
</InsertParameters>
</asp:ObjectDataSource>
</div>
</form>
</body>
</html>
第四章 Timer控件应用 聊天室
UpdatePanel+Timer实现
聊天用户、聊天信息、聊天室三个对象 抽象化、封装
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
//聊天用户类
public class ChatUser
{
private string _Name;//账号
private string _Password;//密码
private DateTime lastUpdated;//上次更新时间
public ChatUser(string name, string password)
{
this._Name = name;
this._Password = password;
this.lastUpdated = DateTime.Now;
}
public string Name//账号
{
get
{
return this._Name;
}
}
public string Password//密码
{
get
{
return this._Password;
}
}
public bool IsExpired(TimeSpan timeSpan)//用户登录是否过期
{
return DateTime.Now - this.lastUpdated >= timeSpan;
}
public void Update()//更新自己的过期时间
{
this.lastUpdated = DateTime.Now;
}
}
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
//聊天消息类
public class Msg
{
private string _UserName = "系统";//消息发送者
private string _OtherName = "所有人";//消息接收者
private string _Message;//消息
private DateTime _DateTime;//发送时间
private string _Img = "";//表情图片
private string _IsBold = "0";//是否黑体（斜体）
private string _Color = null;//消息的颜色
public DateTime DateTime//消息发送时间
{
get
{
return this._DateTime;
}
}
public string UserName//消息发送者
{
get
{
return this._UserName;
}
}
public string Message//消息
{
get
{
return this._Message;
}
}
public string OtherName//消息接收者
{
get { return _OtherName; }
}
public string IsBold//是否黑体（斜体）1代表黑体 2代表斜体
{
get { return _IsBold; }
}
public string Color//消息的颜色
{
get { return _Color; }
}
public string Img//消息附加的表情图片
{
get { return _Img; }
}
//聊天消息初始化函数
public Msg(string userName, string othername, string message, string isbold, string color, string img)
{
this._UserName = userName;
this._OtherName = othername;
this._Message = message;
this._IsBold = isbold;
this._Color = color;
this._Img = img;
this._DateTime = DateTime.Now;
}
public Msg(string msg)//系统消息初始化函数
{
this._Message = msg;
this._DateTime = DateTime.Now;
}
}
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Threading;
using System.Collections.Generic;
//聊天室
public class Room
{
private static readonly long ClearUserInterval = 300000;//调用定时函数的时间间隔5分钟
private static readonly TimeSpan ExpiringInterval = new TimeSpan(0, 10, 0);//过期的区间10分钟
private static readonly int MessageLimit = 50;//存储的信息的最大数量
private Dictionary<string, ChatUser> chatingUsers = null;//聊天用户的集合
private LinkedList<Msg> chatMessage = null;//消息集合
private Timer timer = null;
private object islock = new object();
public Room()
{
this.chatingUsers = new Dictionary<string, ChatUser>();
this.chatMessage = new LinkedList<Msg>();
//定期清除过期用户
TimerCallback callback = new TimerCallback(this.OnClearExpiredUser);
this.timer = new Timer(callback, null, ClearUserInterval, ClearUserInterval);
}
private static Room _Instance = new Room();
public static Room Instance//singleton设计模式，保证全局只有一个Room实例
{
get
{
return _Instance;
}
}
//用户是否在聊天
public bool UserIsChatting(string userName)
{
return this.chatingUsers.ContainsKey(userName);
}
//获取特定的聊天用户类
public ChatUser GetUser(string userName)
{
return this.chatingUsers[userName];
}
//添加一个聊天用户
public void AddUser(string userName, string password)
{
lock (islock)//上锁
{
this.chatingUsers[userName] = new ChatUser(userName, password);
}
}
//定期执行的函数，踢掉过期用户
private void OnClearExpiredUser(object state)
{
lock (islock)//防止并发
{
List<ChatUser> expiredUsers = new List<ChatUser>();//过期用户
foreach (ChatUser user in this.chatingUsers.Values)//遍历所有用户，找出过期用户
{
if (user.IsExpired(ExpiringInterval))
{
expiredUsers.Add(user);
}
}
//踢出过期用户
foreach (ChatUser user in expiredUsers)
{
this.chatingUsers.Remove(user.Name);
}
}
}
//发送消息
public void SendMessage(string userName, string othername, string message, string isbold, string color, string img)
{
lock (islock)
{
if (this.chatMessage.Count >= MessageLimit)//信息量超出最大值，清除一个
{
this.chatMessage.RemoveFirst();
}
//添加新信息
this.chatMessage.AddLast(new Msg(userName, othername, message, isbold, color, img));
}
}
public void SendMessage(string message)//发送系统消息
{
lock (islock)
{
if (this.chatMessage.Count >= MessageLimit)
{
this.chatMessage.RemoveFirst();
}
//添加消息
this.chatMessage.AddLast(new Msg(message));
}
}
//所有消息
public IEnumerable<Msg> GetAllMessages()
{
return this.chatMessage;
}
//所有用户
public IEnumerable<ChatUser> GetAllUsers()
{
return this.chatingUsers.Values;
}
}
第五章使用模块开发
1.自动完成
就如搜索中，自动出现下面的选择，把文本框和下拉列表结合在一起
2.验证图片技术，类似技术NoBot控件，不可视，表单过快等
3.拖曳排序RecorderList
4.评分Rating控件（一般用来评分或投票）
5.QQ样式的菜单 多重叠菜单组件Accordion
浙公网安备 33010602011771号