利用Ajax技术写一个迷你留言板WEB控件

简介: 初学Ajax不久,自己写个小东西,以作学习日记留言板图片如下:样例地址:http://www.8dao.net/miniguest/首先,这里用的是Access数据库,便于移动。数据库很简单,表Guest,字段有ID,Name,Content要实现Ajax,利用asp.net ajax 1.0 bate是很方便的,在http://ajax.asp.net可以下载到。
初学Ajax不久,自己写个小东西,以作学习日记
留言板图片如下:
{56B69F79-4349-4E3C-B28A-FC8885FE3C34}.JPG
样例地址: http://www.8dao.net/miniguest/

首先,这里用的是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控件才能使用。

此控件修改一下可以做为文章评论控件用,加上个:更多。。。,按文章ID显示评论就可以用了。

初学Ajax,做一应用,做为学习日志。还望多指教。
相关文章
|
2天前
|
XML 前端开发 JavaScript
CSR(客户端渲染)和AJAX在Web开发中各自扮演不同的角色
【5月更文挑战第8天】CSR(客户端渲染)与AJAX在Web开发中各司其职。CSR提供初始HTML框架,通过JavaScript在浏览器端获取并渲染数据,提升交互性和响应速度。AJAX则实现页面局部更新,如实时搜索,不刷新页面即可获取数据。CSR可能因DOM操作多而引发性能问题,但可优化解决;AJAX适合频繁交互场景,提高响应性。两者在不同需求下各有优势,需按项目选择适用技术。
12 4
|
2天前
|
前端开发 搜索推荐 安全
AJAX和CSR(客户端渲染)是Web开发中常用的两种技术
【5月更文挑战第8天】AJAX提升用户体验,减轻服务器压力,但对搜索引擎不友好且增加开发复杂度,易引发安全问题。CSR提供快速响应和交互性,改善用户体验,但首屏加载慢,搜索引擎支持不足,同样面临安全挑战。两者各有适用场景,需按项目需求选择。
9 0
|
4天前
|
SQL 存储 C#
C# Web控件与数据感应之 TreeView 类
C# Web控件与数据感应之 TreeView 类
|
4天前
|
SQL 存储 Oracle
C# Web控件与数据感应之 CheckBoxList 类
C# Web控件与数据感应之 CheckBoxList 类
|
4天前
|
SQL 存储 Oracle
C# Web控件与数据感应之 Control 类
C# Web控件与数据感应之 Control 类
|
4天前
|
SQL 存储 Oracle
C# Web控件与数据感应之 ListControl 类
C# Web控件与数据感应之 ListControl 类
|
8天前
|
存储 前端开发 安全
13:会话跟踪技术Session的深度应用与实践-Java Web
13:会话跟踪技术Session的深度应用与实践-Java Web
23 3
|
8天前
|
存储 前端开发 搜索推荐
12:会话跟踪技术Cookie的深度应用与实践-Java Web
12:会话跟踪技术Cookie的深度应用与实践-Java Web
22 4
|
前端开发 Java
【AJAX】AJAX技术详细解析以及实例(2)
【AJAX】AJAX技术详细解析以及实例
174 0
【AJAX】AJAX技术详细解析以及实例(2)
|
XML Web App开发 缓存
【AJAX】AJAX技术详细解析以及实例(1)
【AJAX】AJAX技术详细解析以及实例
180 0