我的一点点思路,不晓得怎么样~~~呵呵,反正效果是实现了~~~
先说说思路,前台还是用datalist控件把数据从后台读出来,现在关键是怎么样把新的留言加到datalist中并且不刷新页面,看了一些其他人的做法就是把所有的数据重新以异步的方式读到前台,数据量大的话觉得这样并不好,我的想法是不用重新读取所有数据但还能把新的留言呈现的前台页面。
当点击确认留言的时候,利用javascript创建一些HTML代码,把留言的内容呈现在前台,只要控制好样式,和原来datalist里面留言的样式一样就ok了,其他那些数据现在并没有在datalist中!!!那现在数据怎样传到后台数据库呢?呵呵,当然是利用javascript调用webserver了!!!这样就避免了异步读取所有的数据到前台,只需要把新留言的数据异步的方式传到数据库就ok了~~~
看看效果,点击提交按钮以后:

上图“原来的数据”那行留言是页面载入的时候在datalist控件中呈现的,而新添的数据那行是点击提交留言之后利用javascript创建的一些HTML控件呈现的,并没有在datalist控件中!!!只是控制好样式和datalist里面的一样就行了~~~,点击提交按钮的同时数据已经通过javascript调用webserver传到数据库里面了,
手动的刷新页面或下次打开页面的时候的效果图:

这次新添加的数据是在datalist中呈现的
前台代码:

Code

<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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>无标题页</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">

<Scripts>
<asp:ScriptReference Path="JScript.js" />
</Scripts>
<Services>
<asp:ServiceReference Path="WebService.asmx" />
</Services>
</asp:ScriptManager>
<div id="wrapper">

<div id="header">
<ul>
<li id="current"><a href="Default.aspx">首页</a></li>
<li><a href="http://www.163.com" target="_blank">网易</a></li>
<li><a href="http://www.cnblogs.com" target="_blank">博客园</a></li>
<li><a href="http://www.yesky.com" target="_blank">天极网</a></li>
</ul>
</div>
<div id="header-logo">
<div id="logo"><span class="logo-blue">Ajax </span><span class="logo-white">留言板</span></div>
</div>
<div id="content">
<div id="MessageForm" style="display:none;">
<h3 id="h3tiltle" onclick="doClose('MessageForm');" title="双击可关闭" style="cursor:hand;" ></h3>
<label>昵 称</label>
<input id="mName" value="Your Name" type="text" size="30" />
<br />
<label>标 题</label>
<input id="mTitle" value="" type="text" size="30" />
<br />
<label>内 容</label>
<textarea rows="5" cols="50" id="mComment"></textarea>
<br />
<input class="submit" type="button" value="提交留言" onclick="doMessage();"/>
</div>
<div id="AllMsg">
<asp:DataList ID="DataList1" runat="server" Width="545px">
<ItemTemplate>

<h2 ><img src="images/snow2.gif" / alt=""><%
#Eval("title") %></h2>

<p><%
#Eval("content") %></p>
<div class="article-controls">

<span><%
#Eval("name") %></span>|<span><%
#Eval("time") %></span>|<a class="comment" href="#" onclick="toReply('<%#Eval("name") %>');">回复</a>
</div>
</ItemTemplate>
</asp:DataList>
</div>
</div>
<div id="sidebar" >
<h1>管理面板</h1>
<div class="sidebar-box">
<p>
<a href="javascript:toMessage();">我要留言</a>
</p>
</div>
<h1>快速链接</h1>
<div class="sidebar-box">
<p>
<a href="#">链接一</a><br />
<a href="#">链接二</a><br />
<a href="#">链接三</a><br />
<a href="#">链接四</a><br />
<a href="#">链接五</a>
</p>
</div>

</div>
</div>
<div id="footer">
© Your copyright information |
<a href="#">Design by <b>Allen.com</b></a>
</div>
</form>
</body>
</html>

javascript代码;

Code
var i=0;
function toMessage()


{
$get('MessageForm').style.display='';
$get('h3tiltle').innerHTML="我要留言";
}
function toReply(name)


{
$get('MessageForm').style.display='';
$get('h3tiltle').innerHTML="我要回复";
$get('mTitle').value="回复:"+name;
}
function doClose(MessageForm)


{
$get(MessageForm).style.display='none';
}
function doMessage()


{
i++;
var name=$get('mName').value;
var title=$get('mTitle').value;
var content=$get('mComment').value;
var time=new Date();
var timeconver=time.getYear()+'/'+time.getMonth()+'/'+time.getDate()+'/'+' '+time.getHours()+':'+time.getMinutes()+':'+time.getSeconds();
//标题
titleobj=document.createElement('div');
titleobj.setAttribute("id","message"+i);
var img="<h2><img src='images/snow2.gif' alt=''>"+title+"</h2>";
titleobj.innerHTML=img;
//内容
contentobj=document.createElement('p');
contentobj.innerHTML=content;
//姓名时间
namediv=document.createElement('div');
namediv.setAttribute("class","article-controls");
namediv.setAttribute("className","article-controls");
var nameTime="<span>"+name+"|</span>";
nameTime+="<span>"+timeconver+"|</span>";
nameTime+="<a class='comment' href='javascript:toReply(\""+name+"\")'>回复</a>";
namediv.innerHTML=nameTime;
var AllMsg=$get('AllMsg');
var first=i-1;
var Beforetitle=$get("message"+first.toString());
AllMsg.insertBefore(titleobj,Beforetitle);
AllMsg.insertBefore(contentobj,Beforetitle);
AllMsg.insertBefore(namediv,Beforetitle);
WebService.addComment(title,content,name);
}
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
websever代码:
using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Web.Configuration;


/**//// <summary>
///WebService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]

public class WebService : System.Web.Services.WebService
{


public WebService ()
{

//如果使用设计的组件,请取消注释以下行
//InitializeComponent();
}

[WebMethod]
public void addComment(string title,string content,string name)

{
using (SqlConnection conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["Personal"].ConnectionString))

{
SqlCommand comm = new SqlCommand("INSERT INTO [tb_comment] ([title],[content],[time],[name]) VALUES ('" +title+ "','" +content+ "','" + DateTime.Now.ToString() + "','" +name+ "')", conn);
conn.Open();
comm.ExecuteNonQuery();
}
}
}


源程序下载:
/Files/dushouke/ajaxcomment.rar
posted on 2008-06-14 16:03
Shouke_du 阅读(230)
评论(3) 编辑 收藏 网摘