用ajax.NET 實現無重新整理投票、評論
C# 中建立新的 ASP.NET 專案,再新增引用 AJAX.dll 檔案。唯一的額外配置步驟是在 <system.web> 元素中(位於 web.config 檔案中)新增以下程式碼。
<configuration> <system.web> <httpHandlers> <!-- Register the ajax handler --> <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" /> </httpHandlers> ... ... </system.web> </configuration>
為了使伺服器端函式在 JavaScript 中可用,必須做兩件事情。首先,要使用的函式必須標有 Ajax.AjaxMethodAttribute。其次,在頁載入事件期間,必須通過呼叫 Ajax.Utility.RegisterTypeForAjax 來註冊包含這些函式的類
以下是我用ajax.net實現的無重新整理評論。
頁面用到的js如下:
<script language="JavaScript" type="text/javascript">
function showaddpl(str,infoid)
{
var comment=document.getElementById(str);
var pl=document.getElementById('pl_'+infoid)
if(comment.innerHTML=="")
{
comment.innerHTML=_010SmpdVote.ShowComment(infoid).value;
comment.innerHTML+="<div class=/"mood_reply_box clear/"><div><dl class=/"clearfix/"><dt>使用者名稱</dt><dd><input name=/"textfield/" type=/"text/" id=/"textfield_"+str+"/" style=/"width:180px;border:1px solid #F2908E/" /></dd></dl></div><div><dl class=/"clearfix/"><dt>評論內容</dt><dd><textarea class=/"tcss/" id=/"TextBox_"+str+"/" style=/"width:500px;border:1px solid #F2908E;cursor:text;font-size:12px;padding:1px 2px;/"></textarea></dd></dl></div><div class=/"ok clear/"><span style=/"padding: 3px 5px;background:#740315;border:1px solid #F2908E;color:#fff/" onmouseover=/"this.style.cursor='pointer'/" onclick=/"addpl('"+str+"','"+infoid+"')/">提交</span></div></div>";
pl.innerHTML='『收起評論』';
}
else
{
pl.innerHTML='『發表及檢視評論』';
comment.innerHTML="";
}
}
function showpl(str,infoid)
{
var comment=document.getElementById(str);
comment.innerHTML=_010SmpdVote.ShowComment(infoid).value;
}
function addpl(str,infoid)
{
var txtContent = document.getElementById("TextBox_"+str+"").value; //文字框輸入內容
if (txtContent == "") alert('請填寫評論內容!');
else
{
var username=document.getElementById("textfield_"+str+"").value;
var result=_010SmpdVote.InsertComment(infoid,username,txtContent).value;
alert(result);
showpl(str,infoid);
}
}
function vote(id,str)
{
var tpcount=_010SmpdVote.Vote(id).value;
var countstr=document.getElementById(str);
countstr.innerHTML=tpcount;
alert('OK!');
}
</script>
主要的cs程式碼如下:
注意:1、需要在Page_Load中加上Ajax.Utility.RegisterTypeForAjax(typeof(_010SmpdVote));
其中_010SmpdVote是頁面類的名字。
下面是在頁面顯示參加投票和評論的獎項:
private void ShowInfo(string type)
{
DataTable dt = Smpd.GetAppraisalListNoPage(int.Parse(type));
StringBuilder sb = new StringBuilder("");
string htmlurl = "";
string imgfile = "";
string voteinfo = "";
//sb.Append("<div class=/"hot_list/">");
for (int i = 0; i < dt.Rows.Count; i++)
{
imgfile = dt.Rows[i]["imghtmlurl"].ToString();
htmlurl = dt.Rows[i]["link"].ToString().Replace("
int n = i + 1;
sb.Append("<dl class=/"clearfix/">");
sb.Append(" <dt><strong><i>" + n + "</i></strong>");
sb.Append("<a target=/"_blank/" href=/"" + dt.Rows[i]["link"].ToString() + "/">" + dt.Rows[i]["titlt"].ToString() + "</a>");
sb.Append("<span onmouseover=/"this.style.cursor='pointer'/" onclick=/"vote('" + dt.Rows[i]["id"].ToString() + "','count_"+i+"');/"> 頂 </span>");
sb.Append("<span id=/"count_"+i+"/" style=/"font-family: Verdana,Arial,Helvetica,sans-serif; font-size:16px; color: rgb(255, 0, 0);/">").Append(dt.Rows[i]["dccount"].ToString()).Append("</span>");
//sb.Append("<span style=/"color:#000;/">『<a href=/"ShowComment.aspx?htmlurl=" + htmlurl + "&id=" + dt.Rows[i]["id"].ToString() + "/" target=/"_blank/">檢視評論</a>』</span>");
sb.Append("<span id=/"pl_" + dt.Rows[i]["id"].ToString() + "/" onmouseover=/"this.style.cursor='pointer'/" onclick=/"showaddpl('hot_" + i + "','" + dt.Rows[i]["id"].ToString() + "')/" style=/"color:#000;/">『發表及檢視評論』</span></dt>");
sb.Append("<dd class=/"fL pr10/">");
sb.Append("<a target=/"_blank/" href=/"" + dt.Rows[i]["link"].ToString() + "/">");
sb.Append("<img src=/"" + imgfile + "/" border=/"0/" width=/"127/" height=/"95/"></img></a>");
sb.Append("</dd>");
voteinfo = dt.Rows[i]["info"].ToString();
voteinfo = commonuse.CutString(280, voteinfo);
sb.Append("<dd><a target=/"_blank/" href=/"" + dt.Rows[i]["link"].ToString() + "/">" + voteinfo + "</a>");
sb.Append("<a target=/"_blank/" href=/"" + dt.Rows[i]["link"].ToString() + "/">");
sb.Append("<span style=/"color:#FF0000/">詳細內容 >></span></a></dd>");
sb.Append("<dd><div class=/"mood_reply clear/" id=/"hot_"+i+"/">");
sb.Append("</div></dd></dl>");
}
下面是幾個Ajax方法,都是被頁面javascript呼叫的方法,注意要想方法能被前臺js呼叫,必須在方法前加[Ajax.AjaxMethod()]
//投票方法
[Ajax.AjaxMethod()]
public int Vote(int id)
{
Smpd.Vote(id.ToString(),42, "", "", "", "", "", "", "", "", "", "", "", "");
return Smpd.GetInfoVoteNum(id);
}
//發表評論的方法
[Ajax.AjaxMethod()]
public string InsertComment(int id,string username,string content)
{
Smpd.InsertComment(id, username, content, 1);
return "評論成功!";
}
//無重新整理顯示評論的方法
[Ajax.AjaxMethod()]
public string ShowComment(int id)
{
StringBuilder sb = new StringBuilder("");
DataTable dt = Smpd.GetCommentList(id, 1);
if (dt.Rows.Count > 0)
{
for (int n = 0; n < dt.Rows.Count; n++)
{
string username = "匿名使用者";
if (dt.Rows[n]["username"].ToString() != "")
username = dt.Rows[n]["username"].ToString();
sb.Append("<div class=/"mood_box_table/">");
sb.Append("<dl class=/"clearfix/"><dt class=/"img clearfix/">");
sb.Append("<div class=/"mood_authorname fL/">" + username + " </div>");
sb.Append("<div class=/"mood_comment_last fL/"><span class=/"gray/">");
sb.Append(dt.Rows[n]["addtime"].ToString());
sb.Append("</span></div></dt>");
sb.Append("<dd class=/"commentcont/">" + dt.Rows[n]["info"] + " </dd>");
sb.Append("</dl></div>");
}
}
return sb.ToString();
}