利用Ajax技術寫一個迷你留言板WEB控制項

來源:互聯網
上載者:User
ajax|web|控制項

初學Ajax不久,自己寫個小東西,以作學習日記
留言板圖片如下:

範例地址: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="留言" /></div>
    </ContentTemplate>
</asp:UpdatePanel>


這樣就可以完成這個控制項了,然後就是在頁面上調用這個控制項了,調用這個控制項的頁面必須有一個ScriptManager控制項才能使用。

此控制項修改一下可以做為文章評論控制項用,加上個:更多。。。,按文章ID顯示評論就可以用了。

初學Ajax,做一應用,做為學習日誌。還望多指教。
http://www.cnblogs.com/aowind/archive/2006/11/21/567157.html



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。