首先,這裡用的是Access數據庫,便於移動。
數據庫很簡單,表Guest,字段有ID,Name,Content
要實現Ajax,利用asp.net ajax 1.0 bate是很方便的,在http://AJax.ASP.Net可以下載到。
安裝好後打開VS2005,新建一個ASP.Net AJax Enabled Web Site項目
在裡面添加一個WEB用戶控件 MiniGB.ascx,控件代碼如下:
<%@ Control Language="C#" ClassName="MiniGB" %>
<%@ Import Namespace="System.Data.OleDb" %>
<%@ Import Namespace="System.Data" %>
<script runat="server">
private OleDbConnection conn = new OleDbConnection("provider=microsoft.jet.oledb.4.0;data source="+System.Web.HttpContext.Current.Server.MapPath("guest.mdb"));
private string dname = "游客";
public string Dname
{
get
{
return dname;
}
set
{
dname = value;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
if (TextBox1.Text.Trim() != "")
{
OleDbCommand comm = new OleDbCommand("insert into guest(name,content)values('"+dname+"','" + TextBox1.Text.Trim() + "')", conn);
comm.ExecuteNonQuery();
listupdate();
TextBox1.Text = "";
}
}
private void listupdate()
{
OleDbDataAdapter da = new OleDbDataAdapter("select top 5 * from guest order by id desc", conn);
DataSet ds = new DataSet();
da.Fill(ds);
DataList1.DataSource = ds;
DataList1.DataBind();
}
protected void Page_Load(object sender, EventArgs e)
{
conn.Open();
listupdate();
}
</script>
<style>
.Gtitle
{
width:200px;
background-color:#464646;
color:#FFFFFF;
font-size:14px;
height:20px;
padding: 3px 0 0 10px;
font-weight:bold;
border-style:solid;
border-top-width:1px;
border-bottom-width:0px;
border-left-width:1px;
border-right-width:1px;
border-color:#BBBBBB;
}
.Gbody
{
width:200px;
border-style:solid;
border-top-width:0px;
border-bottom-width:0px;
border-left-width:1px;
border-right-width:1px;
border-color:#BBBBBB;
padding:3px 5px 3px 5px;
}
.Gend
{
width:200px;
border-style:solid;
border-top-width:0px;
border-bottom-width:1px;
border-left-width:1px;
border-right-width:1px;
border-color:#BBBBBB;
padding:3px 5px 3px 5px;
}
.Gname
{
width:190px;
font-size:12px;
color:blue;
}
.Gcontent
{
width:190px;
Word-break:break-all;
color:#444444;
font-size:12px;
padding: 3px 0 3px 0;
border-style:dotted;
border-top-width:0px;
border-bottom-width:1px;
border-left-width:0px;
border-right-width:0px;
border-color:#BBBBBB;
}
</style>
<ASP:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
</ASP:ScriptManagerProxy>
<ASP:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="Gtitle"><asp:Label ID="Label1" runat="server" Text="留言板"></ASP:Label></div>
<div class="Gbody"><ASP:DataList ID="DataList1" runat="server" >
<ItemTemplate>
<div class="Gname"><%# DataBinder.Eval(Container.DataItem, "name") %> 說:</div><div class="Gcontent"><%# DataBinder.Eval(Container.DataItem, "content") %></div>
; </ItemTemplate>
</ASP:DataList></div>
<div class="Gend"><ASP:TextBox ID="TextBox1" runat="server" Width="150px" />
<ASP:Button ID="Button1" runat="server" Text="留言" OnClick="Button1_Click" /></div>
</ContentTemplate>
</ASP:UpdatePanel>
這樣就可以完成這個控件了,然後就是在頁面上調用這個控件了,調用這個控件的頁面必須有一個ScriptManager控件才能使用。