利用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,做一应用,做为学习日志。还望多指教。
相关文章
|
29天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
37 6
|
1月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
48 3
|
1月前
|
JSON 前端开发 JavaScript
java-ajax技术详解!!!
本文介绍了Ajax技术及其工作原理,包括其核心XMLHttpRequest对象的属性和方法。Ajax通过异步通信技术,实现在不重新加载整个页面的情况下更新部分网页内容。文章还详细描述了使用原生JavaScript实现Ajax的基本步骤,以及利用jQuery简化Ajax操作的方法。最后,介绍了JSON作为轻量级数据交换格式在Ajax应用中的使用,包括Java中JSON与对象的相互转换。
54 1
|
1月前
|
缓存 安全 前端开发
构建高效Web应用的五大关键技术
【10月更文挑战第42天】在数字化浪潮中,Web应用已成为企业与用户互动的重要桥梁。本文将深入探讨提升Web应用性能和用户体验的五项核心技术,包括前端优化、后端架构设计、数据库管理、安全性增强以及API开发的最佳实践。通过这些技术的应用,开发者可以构建出更快、更稳定且更安全的Web应用,满足现代网络环境的需求。
|
1月前
|
人工智能 安全 物联网
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
|
Web App开发 前端开发 关系型数据库
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
90 0
|
7月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
168 0
|
7月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
7月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
64 0